Разбираемся c обновлением Автолэйаута за 5 минут
3 новых фичи - wrap, min/max width/height, truncate text.
Звучит WOW, но только звучит...
Wrap — нужен чтобы из горизонтального делать вертикальное и только. Его можно применить только к блокам с горизонтальным направлением АЛ. Чуть лучше раскрывается в связке с min/max width/height.
Мin/max width/height — это НЕ полноценные брэйкпоинты (как некоторые почему-то посчитали судя по комментариям и сообщениям), вы не сможете менять свойства блока в зависимости от размера.
Truncate text - обрезает текст и ставит в конце многоточие. Уже был как один из вариантов опции resizing text, добавили только выбор количества строк.
Разбираем подробнее...
Wrap
Нужен чтобы при изменении ширины блоки переносились вниз.
Включается в блоке настроек автолэйаута — стрелка переноса. Ваши блоки должны быть hug content или fixed - с fill работать не будет (только если не настроены min/max размеры).
Есть настройка и вертикального и горизонтального промежутка + ориентирование внутри фрэйма. Нет настройки порядка перестроения — всегда первым переносится правый блок.
Работает только с горизонтально-ориентированными блоками - если у вас вертикальный АЛ, при включении он автоматически поменяется на горизонтальный.Так же при включении wrap некоторые опции будут недоступны - например вертикальный fill container.
Bonus
При помощи wrap вы сможете сделать обрезание контента. Если у родительского блока задать вертикальное значение fixed и включить crop content - при уменьшении блок будет исчезать (вместо того чтобы просто обрезаться как при обычном горизонтальном АЛ).
Для понимания тоже самое в контурном режиме
Мin/max width/height
Настройка доступна только для фрэймов с включенным АЛ и для элементов внутри блока с включенным АЛ. Если вы добавите эти параметры какому-то из элементов, а потом вынесите из группы - параметры удалятся. Само собой max значение нельзя указать меньше чем min значение.
Для чего нужно:
1. Подчинение элемента внешним условиям
Например у вас есть таблица с данными. Все колонки внутри имеют ширину fill. Формат даты у меня постоянный - я знаю его ширину и могу выставить для него min width 200px. Как итог колонки без указания минимального размера остались fill, а период при уменьшении «зафиксировался» на 200px
2. Управление контентом внутри
Это усиление функционала wrap — добавляет ему конкретику.
Например у вас есть горизонтальная карточка, которая в мобильном адаптиве имеет вертикальную структуру. Задаем контенту и обложке min witdh 340, отступы у нас 15, промежуток 20, включаем wrap.
При переходе с 729 на 730px (сумма минимальных значений и отступов) у нас должна перестроится карточка.
Большой минус что я не могу управлять высотой обложки. Даже вручную, так как при такой конфигурации у меня недоступен fill container.
Truncate text
Обрезает текст многоточием. Находится как и прежде в type settings. Добавили количество строк. Раньше меняли высоту блока, теперь чуть удобнее.
Итого
- Я точно обновлю некоторые компоненты. Раньше я ручками проставлял минимальную ширину кнопок и прописывал в документации тоже самое для колонок таблиц. Это плюс.
- Wrap хорош, но кейсы все же редкие - фильтры-чипсы, карточки...
- Я вряд ли буду заморачиваться с min/max wrapами для создания адаптивного блока, а буду по-старинке делать несколько вариантов в компоненте. Просто она пока не дает нужной мне гибкости.
🤔 Кстати, а что стало с прошлыми блоками где по старому работало обрезание троеточием? надо бы проверить...