---
title: "Элементы разметки: контейнеры, карусели, bottom sheets"
description: "Группируйте элементы в стеки, карусели и bottom sheets во Flow Builder."
---

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

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

:::link
**Tabs** также относятся к этой категории, но описаны в отдельной статье. Подробнее — в разделе [Tabs](builder-tabs).
:::
## Стеки \{#stacks\}

:::link
Основная статья: [Позиционирование элементов](manage-paywall-ui-elements)
:::

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

:::tip
Вкладывайте стеки друг в друга, чтобы создавать более сложные макеты.
:::
### Изменение направления стека \{#change-stack-direction\}

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

Там же настраиваются отступы, выравнивание и распределение. Дочерние элементы отображаются в том порядке, в каком они перечислены в панели **Layers** — перетащите их, чтобы изменить порядок.
### Оборачивание и разворачивание \{#wrap-and-unwrap\}

Чтобы превратить существующий элемент в стек, выделите его и воспользуйтесь действием слоя **Wrap** [layer action](paywall-layout-and-products#layer-actions). Перетащите дополнительные элементы в новый стек с панели **Layers**. Чтобы удалить стек и поднять его дочерние элементы на уровень выше, используйте **Unwrap**.
## Карусель \{#carousel\}

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

Карусель содержит набор слоёв **Slide**. Когда слайд активен, элементы этого слоя отображаются на экране.
В отличие от вкладок, активный слайд карусели не является [выбираемым элементом группы](flow-selectable-elements) — на слайды нельзя ссылаться в условиях или динамическом тексте. Используйте карусель для визуальной ротации, а не для ветвления по действиям пользователя.
### Изменение активного слайда \{#change-active-slide\}

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

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

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

{/* TODO: on-device GIF */}
### Свойства

#### Auto-scroll

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

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

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

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

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

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

#### Точки

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

Отключите тумблер **Show dots**, чтобы скрыть индикатор слайдов. Когда точки отображаются, следующие свойства управляют их внешним видом:
- **Color** — цвет неактивной точки.
- **Active Color** — цвет точки для текущего видимого слайда.
- **Size** — диаметр каждой точки в пикселях.
- **Gap** — расстояние между соседними точками.
- **Padding** — отступ между рядом точек и контентом карусели выше.
## Bottom Sheet

:::link
Пошаговое руководство: [Показать все тарифы в Bottom Sheet](show-plans-bottom-sheet)
:::

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

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

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

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

{/* TODO: on-device GIF */}
### Начальная видимость \{#initial-visibility\}

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

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

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

### Открытие скрытого bottom sheet \{#triggering-the-bottom-sheet\}

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

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

## Разделители \{#dividers\}

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