Редактор Studio: соединение элементов в стек
7 мин.
Соединение элементов в стек — это быстрый способ организовать дизайн с одинаковыми интервалами, создавая чистый и аккуратный макет. Стек — это Flex-контейнер, который адаптирует размер по содержимому группы элементов, гарантируя, что они остаются по порядку (с заданным вами интервалом) и никогда не перекрываются.
При этом вы можете использовать отрицательные поля, чтобы элементы намеренно перекрывали друг друга.
Работа с перекрывающимися элементами?
Посмотрите видео по устранению неполадок, чтобы узнать, на что обратить внимание и как решить эту проблему.
Применение стопки
Когда элементы расположены рядом друг с другом (в одном и том же родительском элементе), появляется возможность соединить их в стек. В зависимости от порядка расположения элементов вы можете соединить их в стек по горизонтали или по вертикали.
Полезно знать:
- Если элементы расположены в форме квадрата (например, 2 x 2 элемента), вам будут доступны варианты как вертикального, так и горизонтального стека.
- Вы можете использовать Responsive Checker, чтобы найти возможности соединить в стек соседние элементы и гарантировать, что они никогда случайно не перекроются.
Чтобы применить стопку:
- Перейдите в редактор.
- Выровняйте элементы, которые вы хотите объединить в стопку.
- Выберите один из элементов.
- Наведите курсор на иконку Стопка
(горизонтальная) /
(вертикальная), чтобы увидеть превью того, как будет выглядеть стопка.
Примечание: доступные иконки стопки (горизонтальная или вертикальная) зависят от того, как вы выровняли элементы. - Нажмите на иконку Стопка, чтобы применить ее.
- (Необязательно) Перетащите линию между элементами, чтобы настроить поля.
Знаете ли вы?
- Вы также можете соединить элементы в стек, выбрав несколько элементов на холсте и нажав Стопка в Инспекторе.
- Вы можете создавать отрицательные поля, чтобы элементы намеренно перекрывали друг друга.
Переключение между горизонтальной и вертикальной стопкой
Не нравится макет стека? Вы всегда можете переключить его с горизонтального на вертикальный (и наоборот), чтобы выровнять элементы так, как вам нужно. Это автоматически переставит элементы в правильном порядке.
Чтобы изменить макет стопки:
- Выберите стопку в редакторе.
- Нажмите на выпадающий список.
- Выберите Горизонтально или Вертикально.
Управление стопкой
Вы можете настроить стопку в соответствии с новым контентом и требованиями. Добавляйте новые элементы в стопку, перемещайте их одним нажатием кнопки и отделяйте элементы, которые больше не нужны.
Чтобы управлять стопкой:
- Перейдите в редактор.
- Выберите нужную стопку.
- Выберите следующее действие:
Добавьте элемент в стопку
Отделить элемент от стопки
. Затем нажмите Отделить от стопки.
Изменение порядка элементов в стопке
/ Переместить ниже 
или Переместить влево 
/ Переместить вправо
.
Разъединение стопки элементов
Настройка дизайна стопки
Стек не обязательно должен быть прозрачным — вы можете настроить его дизайн так, чтобы контент выделялся на странице. Добавьте цвет фона, границы и тень. Вы также можете сделать углы стека более закругленными или прямыми.
Чтобы настроить дизайн стопки:
- Перейдите в редактор.
- Выберите нужную стопку.
- Нажмите на иконку Открыть инспектор
в правом верхнем углу редактора.
- Используйте доступные параметры в разделе Дизайн, чтобы настроить стек:
- Установите цвет фона. Вы также можете настроить его прозрачность и добавить эффект стекла.
- Добавьте границу, чтобы создать фрейм для стека.
- Выберите радиус углов.
- Включите тень и управляйте такими настройками, как угол, расстояние, размер и т. д.
Настройка макета стопки
Настройте макет стека так, чтобы каждый элемент имел такие интервалы, выравнивание и отступы, которые соответствуют вашему творческому видению или потребностям клиента.
Чтобы настроить макет стопки:
- Перейдите в редактор.
- Выберите нужную стопку.
- Нажмите на иконку Открыть инспектор в правом верхнем углу редактора.
- Прокрутите вниз до раздела Макет.
- Используйте доступные параметры, чтобы настроить макет стека:
- Переключите макет стека с Горизонтального на Вертикальный или наоборот.
- (Только для горизонтального) Измените направление с Слева направо на Справа налево или наоборот.
- Введите значение в поле Интервал между пунктами, чтобы создать равные поля между элементами стека.
- Выберите выравнивание для элементов стека: По левому краю, По правому краю, По центру или По ширине.
- Добавьте отступы по бокам.
Знаете ли вы?
Вы можете настроить отступы и интервалы прямо на холсте. Перетащите линию между элементами или дважды кликните по ней, если предпочитаете ввести точное значение. При необходимости вы даже можете изменить единицу измерения размера.