Figsight #17: Нарушаем пределы
Сегодня продолжим разговор о том, как совместить Fill и Hug в компоненте. Этот небольшой трюк очень сильно помог в моей работе, возможно, поможет и в вашей.
Fill внутри Hug
Это даже не совсем трюк, скорее малоизвестная особенность. Представим: у нас есть элемент внутри контейнера. Если сам элемент настроен как Hug, то контейнер может быть как Hug, так и Fill — тут всё понятно. Но если сам элемент уже Fill, то контейнеру остаётся только одно — тоже стать Fill. Стоит попробовать что-то другое, и Figma тут же нас переобует в Fixed.
Однако, есть лазейка. Контейнер с Fill-элементом может остаться Hug, если мы добавим ему ограничение — максимальную или минимальную ширину. У нас Hug с Fill внутри. Нарушили границу возможного.
Но зачем?
Хорошо, допустим это работает. Но зачем нам такая странная конструкция? Всё становится ясно, если внутрь контейнера добавить ещё один «статичный» элемент.
В этот момент поведение становится интересным: пока Fill-элемент не дорастёт до лимита, всё работает как Hug. Но как только достигает — переходит в поведение Fill. Мы получаем гибрид двух режимов — Hug с автопереходом в Fill. Как будто это вообще законно?
Применяем
Теперь к практике. Такая гибридная схема отлично подходит для случаев, когда у компонента есть чёткое ограничение по ширине. Например, тултипы, снекбары и все те случаи, когда что-то «растёт до поры, а потом держит форму». Ну а если границы заранее неизвестны, всегда есть метод из Figsight #15: Метод тени 2.0 — там это решается по-другому.
Надеюсь, трюк окажется полезным и в вашей работе, мы обязательно рассмотрим его применение позднее в одном из Figsolve. До следующего нарушения привычных правил.