5 ноября 2024

Вложенность групп в Zero Block

Теперь в Zero Block можно добавить группу, состоящую из одного или нескольких элементов, внутрь другой группы. Рассказываем, как работать с вложенностью и когда она может пригодиться.

Когда полезна вложенность групп

Вложенность групп будет полезна, когда вы используете автолейауты (флекс-контейнеры), создаёте карточки, галереи и многое другое. Например, вы собрали в Zero Block карточку для статьи с заголовком, описанием и картинкой. Из карточки сделали объектную группу (Group → Object), применили автолейауты (Auto Layout → Flex → Auto), чтобы высота карточки автоматически подстраивалась под количество текста, задали ссылку и цвет фона. А для гибкой настройки отступов между заголовком и описанием отдельно сгруппировали два этих элемента и также применили автолейауты к объекту. Так получилась вложенная группа с флекс-свойствами.

Посмотреть туториал о работе с автолейаутами

Как добавить группу внутрь другой?

Через панель слоёв;
Drag'n'Drop (только для групп с автолейутами);
Шорткат Cmd/Ctrl+G;
Через панель настроек;
Через контекстное меню.

💡Для групп доступно пять уровней вложенности. Имейте в виду, что в объектную группу нельзя добавить логическую (Logical). Если попытаться это сделать, её тип автоматически изменится на объектную (Object).

Примеры использования вложенных групп

Показываем несколько примеров, когда могут пригодиться вложенные группы и как их использовать в своих проектах.

Быстрое редактирование отступов и расположения элементов

В примере ниже — главный экран мебельного магазина. Это группа, для которой использованы автолейауты. Она состоит из нескольких групп с разными уровнями вложенности: обложки с фоновым изображением, навигации с логотипом и пунктами меню, галереи карточек, где каждая карточка — это тоже группа. Такая группировка элементов и использование автолейаутов позволяют автоматически подстраивать дизайн при изменении контента и быстрее менять расположение элементов.

Гибкая настройка анимации

Использование вложенности пригодится, когда вы хотите настроить разную анимацию для групп. Например, задать базовую анимацию появления для всей карточки и отдельно настроить анимацию при наведении для вложенной группы из одного элемента — стрелочки.

Быстрая настройка адаптивов

Использование автолейаутов и вложенных групп позволяет гораздо быстрее настраивать дизайн для разных разрешений экранов. Так вам не придётся все элементы редактировать вручную — они будут выстраиваться согласно заданным правилам.