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

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

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

Основы

Макет

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

• Vertical Container: располагает дочерние элементы сверху вниз
• Horizontal Container: располагает дочерние элементы слева направо
• 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)

Badge

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

Флажки

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

• Checkbox
• Circle
• Radiobutton
• Toggle

Формы и квизы

Кнопки

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

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

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

Поля ввода

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

• Текст
• 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: компактные строки со встроенными бейджами

Переключатель триала

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

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

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

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

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

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

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

Прогресс

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

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

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

Загрузчики

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

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