---
title: "Элементы"
description: "Все визуальные элементы, доступные в Flow Builder: контейнеры компоновки, текст, медиа, списки, кнопки, поля ввода, продукты и многое другое."
---

Чтобы открыть библиотеку элементов и добавить новый элемент на экран, нажмите кнопку плюс Plus на левой панели или над превью устройства.
Элементы делятся на следующие категории:
- [Основные](#basics) (контейнеры макета, текст, медиа, списки, значки, галочки)
- [Формы и квиз](#forms--quiz) (кнопки, поля ввода, квизы, вкладки)
- [Пейвол и коммерция](#paywall--commerce) (продукты, переключатель триала, вовлечённость пользователей, обратный отсчёт)
- [Индикаторы прогресса](#progress) и загрузчики

Для каждого элемента Adapty предлагает несколько пресетов — шаблоны с плейсхолдерами или заранее заданными взаимодействиями.
## Основы \{#basics\}
### Макет \{#layout\}

:::link
Основная статья: [Элементы макета](builder-containers)
:::

Элементы макета — это контейнеры, которые организуют вложенные элементы.

- **Vertical Stack**: располагает дочерние элементы сверху вниз
- **Horizontal Stack**: располагает дочерние элементы слева направо
- **Dividers (horizontal and vertical)**: линии, визуально разделяющие секции контента
- **Carousel**: прокручиваемый контейнер
- **Bottom Sheet**: панель, выдвигающаяся снизу экрана

:::link
Основная статья: [Текстовый контент](onboarding-text)
:::

Текст может быть статическим или содержать [переменные](onboarding-variables) (например, имя пользователя) и [локализованный контент](paywall-localization).

По умолчанию доступны следующие текстовые пресеты. Чтобы изменить этот список, добавьте или удалите [сохранённые стили текста](builder-styling#reusable-styles):

- H1
- H2
- H3
- Button Label
- Body
- Caption
- Small Label
### Медиа \{#media\}

:::link
Основная статья: [Изображения, видео и иконки](custom-media)
:::

:::note
Этот раздел описывает медиаэлементы переднего плана. Чтобы заполнить изображением или видео весь экран, измените [фон экрана](paywall-layout-and-products#screen-background).
:::

- **Icon**: векторная иконка из встроенной библиотеки с настраиваемыми размером и цветом
- **Image**: изображение — загрузите своё или укажите URL
- **Video**: встроенный видеоплеер для файлов размером до 50 МБ. Поддерживает зацикливание.
### Список \{#list\}

Элементы списка организуют контент в строки и столбцы для отображения однородно отформатированных данных. По сути, список — это [стек](manage-paywall-ui-elements#layout).

- **Icon List**: строки с ведущей иконкой и текстовым ярлыком
- **Timeline**: вертикальная последовательность с соединёнными индикаторами шагов
- **Image List**: строки с ведущим изображением и текстом
- **Icon Cards**: сетка карточек с центрированными иконками
- **Image Cards**: сетка карточек с изображениями
- **Comparison Table**: многоколоночная таблица, сравнивающая функции по тарифам (например, Free vs Pro)

### Значок \{#badge\}

Небольшая накладная метка для выделения элемента — обычно используется для отображения скидок или конкретных тарифов (например, «Скидка 5%»). Используйте [абсолютное позиционирование](manage-paywall-ui-elements#absolute), чтобы разместить значок поверх другого элемента.
### Флажки \{#checkmarks\}

Иконки-индикаторы выбора для [выбираемых элементов](flow-selectable-elements). Каждый пресет флажка включает активное и неактивное состояние, которые автоматически обновляются в зависимости от выбора пользователя.

- Checkbox
- Circle
- Radiobutton
- Toggle
## Формы и квизы \{#forms--quiz\}
### Кнопки \{#buttons\}

:::link
Основная статья: [Кнопки](paywall-buttons)
:::

Кнопки запускают действия по нажатию — переход на другой экран, открытие URL или закрытие флоу.

Каждый пресет — это отправная точка: измените стиль и назначьте любое действие. Настройте поведение кнопок на вкладке [Interactions](builder-ui#interactions-properties).
- **Base**: обычная кнопка с текстом по центру
- **Right Icon**: кнопка с иконкой справа
- **With Subtitle**: включает две строки текста
- **Pulse Animation**: включает анимированный эффект пульсации
- **Purchase**: инициирует покупку
- **Secondary Outline**: кнопка с обводкой для второстепенных действий
- **Back**: переход к предыдущему экрану
- **Close flow**: выход из флоу
- **View more plans**: показать дополнительные варианты продуктов
- **Links**: ссылки в футере
### Поля ввода \{#inputs\}

:::link
Основная статья: [Поля ввода и формы](builder-inputs-and-forms)
:::

Поля ввода позволяют пользователям вводить данные. Каждое поле использует подходящий метод ввода и правила валидации.

- Текст
- E-mail
- Пароль
- Число
- Номер телефона
- Дата
- Время
- Дата и время

Поля «Дата», «Время» и «Дата и время» при нажатии открывают нативный выборщик устройства (колесо прокрутки или календарь).

Используйте [переменные](onboarding-variables), чтобы обрабатывать введённые данные и управлять условной логикой.
### Квизы \{#quizzes\}

:::link
Основная статья: [Опросы и квизы](onboarding-quizzes)
:::

Элементы квиза представляют собой экраны с выбором из нескольких вариантов — для опросов, сбора предпочтений и сегментации пользователей. Настройте [взаимодействия](onboarding-navigation-branching), чтобы разветвлять флоу в зависимости от ответа пользователя.

- **Icon Options**: список в одну колонку с иконками
- **Emoji Options**: список в одну колонку с эмодзи
- **Image Options**: список в одну колонку с изображениями
- **Icon Grid**: многоколоночная сетка с иконками
- **Emoji Grid**: многоколоночная сетка с эмодзи
- **Image Grid**: многоколоночная сетка с фотографиями
- **Rating**: числовая шкала (например, 1–5)
### Вкладки \{#tabs\}

:::link
Основная статья: [Вкладки](builder-tabs)
:::

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

- **Segment control**: переключатель в форме таблетки с закруглёнными углами вокруг выбранной вкладки
- **Button Tabs**: отдельные вкладки в виде кнопок
- **Underline**: текстовые метки с подчёркиванием активной вкладки
## Пейвол и монетизация \{#paywall--commerce\}
### Продукты \{#products\}

:::link
Основная статья: [Продукты](paywall-product-block)
:::

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

- **Vertical List**: вертикальный список карточек продуктов
- **Horizontal List**: горизонтальный список карточек продуктов
- **Feature Carousel**: прокручиваемые карточки со списком функций
- **Feature Cards**: статичные карточки со списком функций
- **Banner List**: компактные строки со встроенными бейджами
{/* Not sure if will ship in v1 - **Bottom Sheet**: product selector inside a slide-up panel */}
### Переключатель пробного периода \{#trial-toggle\}

:::link
Основная статья: [Переключатели](builder-toggles)
:::

Переключатель, который меняет отображаемый продукт между стандартной ценой и предложением с бесплатным пробным периодом. При активации выбор продукта и состояние элементов обновляются автоматически.
### Вовлечение пользователей \{#user-engagement\}

Готовые блоки с пользовательскими оценками, которые повышают доверие и стимулируют конверсию. Шаблоны представляют собой базовые контейнеры с placeholder-контентом.

- **Review**: звёздный рейтинг с текстом отзыва и именем автора
- **Rating**: числовая оценка с отображением звёзд
- **App Rating**: крупная оценка со шкалой звёзд и количеством отзывов
- **Social Proof**: стопка аватаров с количеством пользователей
### Обратный отсчёт \{#countdown\}

:::link
Основная статья: [Таймер обратного отсчёта](paywall-timer)
:::

Отображает часы, минуты и секунды, убывающие до нуля. Используйте его, чтобы создать ощущение срочности для ограниченных по времени предложений. По достижении нуля таймер может запускать действия — например, переходить на другой экран или скрывать значок скидки.
- **Inline**: компактное числовое отображение
- **Inline with units**: числовое отображение с подписями единиц
- **Badge**: небольшой таймер-оверлей в виде бейджа
- **Blocks**: отдельные карточки для дней, часов, минут и секунд
## Прогресс \{#progress\}

:::link
Основная статья: [Загрузчики и индикаторы прогресса](builder-loaders-and-progress-bars)
:::
### Индикаторы прогресса \{#progress-indicators\}

Пошаговые индикаторы прогресса, которые показывают, на каком экране флоу находится пользователь. Удобны для онбординга, когда пользователю важно видеть, сколько шагов осталось.

- **Linear**: сплошная полоса, которая заполняется по мере прохождения шагов
- **Segmented**: полоса, разделённая на отдельные сегменты — по одному на каждый шаг
- **Connectors**: пронумерованные маркеры шагов, соединённые короткими линиями
### Загрузчики \{#loaders\}

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

- **Spinner**: вращающийся круговой индикатор
- **Spinner with label**: спиннер с текстовой подписью (например, «Загрузка...»)
- **Loader**: горизонтальная полоса прогресса
{/* - **Loader with label**: полоса прогресса с текстовой подписью и процентами */}