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

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

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

Стеки

Стеки группируют элементы по вертикали или горизонтали. Vertical Stack располагает элементы строками, Horizontal Stack — колонками.

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

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

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

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

Чтобы превратить существующий элемент в стек, выделите его и воспользуйтесь действием слоя Wrap layer action. Перетащите дополнительные элементы в новый стек с панели 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 — а не при загрузке экрана.

Структура

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

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

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

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

1. Сначала наполните контент листа — скрытые слои недоступны для редактирования, поэтому лист должен оставаться видимым, пока вы не закончите его заполнять.
2. На панели Layers выберите нижний лист.
3. Установите Visibility в значение Hide 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 — для разделения колонок внутри горизонтального стека. Толщина, цвет и длина настраиваются на правой панели.