Справочный центр
Группы и вложенные группы в Zero Block
Объединение элементов в группы и особенности работы с ними
В Zero Block можно объединить несколько элементов в одну группу, вкладывать группы элементов друг в друга, а также создать группу из одного элемента.
Создание групп упрощает взаимодействие с элементами, позволяет задать общую анимацию и упорядочить элементы по сетке.
Создание групп упрощает взаимодействие с элементами, позволяет задать общую анимацию и упорядочить элементы по сетке.
Как создать группу
Для того, чтобы создать группу слоев, объединить группы между собой или добавить один элемент в группу — вам необходимо выделить нужные элементы на странице, правой кнопкой мыши вызвать меню и нажать на кнопку Group либо использовать сочетание клавиш Сmd/Сtrl+G.
Также группу можно добавить внутрь другой группы через панель слоев, с помощью Drag'n Drop, панели настроек и контекстного меню.
Какие группы можно создавать в Zero Block
В Zero Block можно создавать группы двух типов: Object и Logical. У каждого типа есть свои особенности и дополнительные настройки, которые влияют как на поведение элементов, так и на саму группу.
Чтобы назначить тип группы, выделите группу элементов и в настройках Group выберите нужный тип из списка.
Для группы можно выбрать тип: Logical или Object
Logical
Logical — это группа элементов, независимых друг от друга. При добавлении анимации, она добавляется к каждому элементу в группе по отдельности. Каждый элемент редактируется отдельно друг от друга.
Группы Logical подходят в том случае, если необходимо объединить группу Object и одиночный элемент (или несколько) для создания блока с нестандартным расположением. В других случаях — рекомендуется использовать группы Object.
Logical можно использовать как контейнер для групп Object и других элементов при создании уникального дизайна.
Object
Позволяет объединить элементы и создать новый объект со своим уникальными настройками. Группа Object имеет настройку Flex, с помощью которой можно использовать Auto Layout.
Auto Layout — позволяет автоматически выравнивать элементы в группе и задавать внутренние отступы. В группах Logical нельзя использовать настройку Flex с Auto Layout, поэтому размещать элементы в рамках группы нужно вручную.
Для группы типа Object можно задать общий фон Background, а также Padding — внутренний отступ для объектов внутри группы. Редактировать можно как в целом группу, так и каждый элемент в группе. При добавлении анимации, она применяется ко всему объекту.
Пример настроек для группы типа Object
Чтобы создать фон в группе типа Logical, добавьте отдельный shape и разместите поверх элементы. В группе типа Object не требуется создавать отдельный элемент — используйте настройку Background, чтобы добавить картинку, градиент или цвет.
Пример загрузки изображения в Background для группы типа Object. Вместо картинки можно задать цвет или выбрать градиент из библиотеки.
Работа с вложенными группами
Объединять можно группы любого типа. При объединении группы в панели слоев (Layers) создается структура вложенности блоков. Чтобы переместить группу выше или ниже, а также убрать из общей группы — нужно зажать группу и переместить.
Вложенная группа не может быть Logical. При добавлении группы типа Logical внутрь другой — ее тип будет автоматически изменен на Object. Вкладывать друг в друга можно только группы типа Object.
Максимальная вложенность групп типа Object — 5 групп.
Вложение групп друг в друга
Продвинутые настройки в Zero Block:
Статья о работе с контейнерами и созданию «резиновых» элементов
Статья о продвинутых способах упорядочивания элементов внутри группы
Справка по сложной триггерной анимации: настройка и примеры
