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

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

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

Контейнеры

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

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

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

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

Обёртывание и разворачивание

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

Карусель

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

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

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

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

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

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

Свойства

Автопрокрутка

Автопрокрутка автоматически листает слайды — пользователю не нужно свайпать, чтобы увидеть весь контент.

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

• Delay — сколько времени каждый слайд остаётся видимым (мс).
• Duration — сколько времени занимает переход между слайдами (мс).

Размер карусели

Специальные элементы управления определяют размер карусели и расстояние между соседними слайдами. Установите для 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 из выпадающего списка.

Подвал

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

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

Футер vs. обычный фиксированный элемент

Оба остаются на экране, пока контент прокручивается. Выбирайте вариант, который подходит для вашей задачи:

• Используйте Footer для основной нижней панели экрана (кнопка CTA, юридический текст, ссылки). Он резервирует под себя место, так что контент всегда прокручивается выше него и никогда не перекрывается им, а нижняя безопасная зона закрывается автоматически.
• Используйте фиксированный элемент для того, что должно плавать поверх прокручиваемого контента, а не резервировать место, или для того, что прикрепляется к краю, отличному от нижнего, — плавающая кнопка закрытия/восстановления, постоянный баннер сверху, кнопка прокрутки наверх. Отступы для безопасной зоны в этом случае вы настраиваете самостоятельно.

Разделители

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