Чтобы открыть библиотеку элементов и добавить новый элемент на экран, нажмите кнопку плюс Plus на левой панели или над превью устройства. Элементы делятся на следующие категории:

• Основные (контейнеры макета, текст, медиа, списки, значки, галочки)
• Формы и квиз (кнопки, поля ввода, квизы, вкладки)
• Пейвол и коммерция (продукты, переключатель триала, вовлечённость пользователей, обратный отсчёт)
• Индикаторы прогресса и загрузчики

Для каждого элемента Adapty предлагает несколько пресетов — шаблоны с плейсхолдерами или заранее заданными взаимодействиями.

Основы

Макет

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

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

Текст может быть статическим или содержать переменные (например, имя пользователя) и локализованный контент.

По умолчанию доступны следующие текстовые пресеты. Чтобы изменить этот список, добавьте или удалите сохранённые стили текста:

• H1
• H2
• H3
• Button Label
• Body
• Caption
• Small Label

Медиа

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

Список

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

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

Значок

Небольшая накладная метка для выделения элемента — обычно используется для отображения скидок или конкретных тарифов (например, «Скидка 5%»). Используйте абсолютное позиционирование, чтобы разместить значок поверх другого элемента.

Флажки

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

• Checkbox
• Circle
• Radiobutton
• Toggle

Формы и квизы

Кнопки

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

Каждый пресет — это отправная точка: измените стиль и назначьте любое действие. Настройте поведение кнопок на вкладке Interactions.

• Base: обычная кнопка с текстом по центру
• Right Icon: кнопка с иконкой справа
• With Subtitle: включает две строки текста
• Pulse Animation: включает анимированный эффект пульсации
• Purchase: инициирует покупку
• Secondary Outline: кнопка с обводкой для второстепенных действий
• Back: переход к предыдущему экрану
• Close flow: выход из флоу
• View more plans: показать дополнительные варианты продуктов
• Links: ссылки в футере

Поля ввода

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

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

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

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

Квизы

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

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

Вкладки

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

• Segment control: переключатель в форме таблетки с закруглёнными углами вокруг выбранной вкладки
• Button Tabs: отдельные вкладки в виде кнопок
• Underline: текстовые метки с подчёркиванием активной вкладки

Пейвол и монетизация

Продукты

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

• Vertical List: вертикальный список карточек продуктов
• Horizontal List: горизонтальный список карточек продуктов
• Feature Carousel: прокручиваемые карточки со списком функций
• Feature Cards: статичные карточки со списком функций
• Banner List: компактные строки со встроенными бейджами

Переключатель пробного периода

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

Вовлечение пользователей

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

• Review: звёздный рейтинг с текстом отзыва и именем автора
• Rating: числовая оценка с отображением звёзд
• App Rating: крупная оценка со шкалой звёзд и количеством отзывов
• Social Proof: стопка аватаров с количеством пользователей

Обратный отсчёт

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

• Inline: компактное числовое отображение
• Inline with units: числовое отображение с подписями единиц
• Badge: небольшой таймер-оверлей в виде бейджа
• Blocks: отдельные карточки для дней, часов, минут и секунд

Прогресс

Индикаторы прогресса

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

• Linear: сплошная полоса, которая заполняется по мере прохождения шагов
• Segmented: полоса, разделённая на отдельные сегменты — по одному на каждый шаг
• Connectors: пронумерованные маркеры шагов, соединённые короткими линиями

Загрузчики

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

• Spinner: вращающийся круговой индикатор
• Spinner with label: спиннер с текстовой подписью (например, «Загрузка…»)
• Loader: горизонтальная полоса прогресса