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

Элементы делятся на следующие категории:

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

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

Основы

Макет

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

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

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

Текстовый элемент также может отображать данные из вашего приложения — например, баланс монет игрока или количество дней в серии. Вставьте кастомный тег туда, где должны отображаться данные. Значение тега задаётся в приложении через SDK Adapty, поэтому каждый пользователь видит свой баланс или свою серию.

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

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

В меню Text также есть элемент Old Price — перечёркнутая цена продукта, которая вычисляется автоматически на основе множителя. См. Добавить старую цену.

Медиа

• 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

Если нужен переключатель или чекбокс, на который пользователь нажимает напрямую, используйте элементы 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: компактные строки со встроенными бейджами

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

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

• Trial toggle: переключает отображаемый продукт между стандартной ценой и бесплатным пробным предложением
• Checkbox: чекбокс с текстовой меткой, по умолчанию содержащий строку согласия с условиями и политикой конфиденциальности
• Toggle: переключатель с текстовой меткой

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

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

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

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

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

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

Прогресс

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

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

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

Загрузчики

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

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