Элементы макета группируют другие элементы и управляют их расположением на экране.

Flow Builder включает четыре типа элементов макета:

• Containers: располагают дочерние элементы по оси — вертикально или горизонтально
• Carousel: прокручиваемый контейнер, показывающий по одному слайду за раз
• Bottom Sheet: панель, выезжающая снизу экрана поверх основного контента
• Dividers: тонкие линии, разделяющие строки и столбцы

Контейнеры

Контейнеры группируют элементы по вертикали или горизонтали. Vertical Container расставляет элементы в строки, Horizontal Container — в столбцы.

Изменение направления контейнера

Направление контейнера можно менять в любой момент. Переключайтесь между Vertical, Horizontal и Free в разделе Layout на правой панели — удалять и пересоздавать контейнер не нужно.

Там же, в разделе Layout, настраиваются отступы, выравнивание и распределение элементов. Дочерние элементы отображаются в том порядке, в котором они перечислены в панели Layers — перетаскивайте их для изменения порядка.

Оборачивание и разворачивание

Чтобы превратить существующий элемент в контейнер, выделите его и воспользуйтесь действием слоя Wrap из панели действий. Перетащите дополнительные элементы в новый контейнер из панели Layers. Чтобы удалить стек и поднять его дочерние элементы на уровень выше, используйте Unwrap.

Карусель

Карусель — это контейнер с прокруткой, показывающий по одному слайду за раз. Пользователь листает экран горизонтально, чтобы перейти к следующему слайду, или карусель автоматически переключается по таймеру.

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

Изменение активного слайда

Когда вы выбираете карусель, конструктор показывает всплывающую панель управления с выпадающим списком Slide и кнопкой + Add Slide.

• Нажмите + Add Slide, чтобы добавить новый пустой слайд.
• Используйте выпадающий список Slide, чтобы переключить активный слайд на канвасе, — или кликните на соответствующий слой Slide в панели Layers.

Чтобы изменить порядок слайдов, перетащите их внутри элемента Carousel в панели Layers.

Свойства

Auto-scroll

Auto-scroll автоматически переключает слайды — пользователю не нужно листать их вручную.

Поведение определяется двумя параметрами времени:

• Delay — как долго отображается каждый слайд (мс).
• Duration — как долго длится переход между слайдами (мс).

Carousel sizing

Специальные элементы управления задают размер карусели и расстояние между соседними слайдами. Установите Height в значение Fixed, чтобы макет не смещался, когда пользователь листает слайды с разным объёмом контента.

Размер слайда

Width и Height отдельного слайда. По умолчанию установлено Fill — слайд повторяет размеры карусели. Задайте фиксированную ширину, чтобы создать эффект «выглядывания», при котором соседние слайды частично видны.

Точки

Индикатор страниц в нижней части карусели. Он показывает пользователю, сколько слайдов существует и какой из них активен.

Отключите тумблер Show dots, чтобы скрыть индикатор слайдов. Когда точки отображаются, следующие свойства управляют их внешним видом:

• Color — цвет неактивной точки.
• Active Color — цвет точки для текущего видимого слайда.
• Size — диаметр каждой точки в пикселях.
• Gap — расстояние между соседними точками.
• Padding — отступ между рядом точек и контентом карусели выше.

Bottom Sheet

Bottom Sheet — это панель-слой, которая выезжает снизу экрана поверх основного контента.

Шторка всегда размывает фон позади себя — отключить это нельзя. Рекомендуется открывать её по тапу — например, по ссылке Show all plans — а не при загрузке экрана.

Структура

Bottom Sheet содержит два верхнеуровневых слоя:

• Heading — контейнер в верхней части шторки, по умолчанию содержит текстовый слой Title и кнопку закрытия Close button . Отредактируйте или удалите их при необходимости.
• Content — основной контейнер. Добавляйте в него продукты, кнопки, ссылки и другие элементы.

Начальная видимость

По умолчанию нижний лист появляется сразу при рендеринге экрана. Чтобы открывать его по требованию:

1. Сначала наполните контент листа — скрытые слои недоступны для редактирования, поэтому лист должен оставаться видимым, пока вы не закончите его заполнять.
2. На панели Layers выберите нижний лист.
3. Установите Visibility в значение Hide .

Лист остаётся в дереве слоёв, но перестаёт отображаться на экране.

Открытие скрытого bottom sheet

Чтобы открыть скрытый bottom sheet, привяжите действие Show к другому элементу:

1. Выберите элемент-триггер (например, кнопку или текстовую ссылку).
2. Откройте вкладку Interactions на правой панели.
3. Нажмите Add trigger > On tap, затем Add action.
4. Установите Action в значение Show и выберите bottom sheet из выпадающего списка.

Разделители

Horizontal Divider и Vertical Divider — тонкие линии для разделения контента. Используйте Horizontal Divider для разделения строк, а Vertical Divider — для разделения колонок внутри горизонтального контейнера. Толщину, цвет и длину можно настроить на правой панели.