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

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

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

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

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

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

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

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

Отступы, выравнивание и распределение элементов настраиваются там же, в разделе **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\}

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

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

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

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

#### Размер слайда \{#slide-sizing\}

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

#### Точки \{#dots\}

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

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

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

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

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

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

- **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 из выпадающего списка.

## Подвал \{#footer\}

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

В отличие от обычных элементов, подвал распространяется на нижнюю безопасную зону устройства: его фон доходит до самого края экрана.
Только один футер допускается на экране. Нельзя дублировать существующий футер или добавлять новый.
### Футер vs. обычный фиксированный элемент \{#footer-vs-a-regular-fixed-element\}

Оба остаются на экране, пока контент прокручивается. Выбирайте вариант, который подходит для вашей задачи:
- **Используйте Footer** для основной нижней панели экрана (кнопка CTA, юридический текст, ссылки). Он резервирует под себя место, так что контент всегда прокручивается выше него и никогда не перекрывается им, а нижняя безопасная зона закрывается автоматически.
- **Используйте [фиксированный элемент](manage-paywall-ui-elements)** для того, что должно плавать поверх прокручиваемого контента, а не резервировать место, или для того, что прикрепляется к краю, отличному от нижнего, — плавающая кнопка закрытия/восстановления, постоянный баннер сверху, кнопка прокрутки наверх. Отступы для безопасной зоны в этом случае вы настраиваете самостоятельно.
## Разделители \{#dividers\}

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