# Элементы экрана

Экран мини-приложения собирается из элементов: заголовков и текста, кнопок, картинок, полей ввода, списков, карт и других. Элементы лежат в областях экрана — в контенте, в колонках сетки, внутри карточки или секции аккордеона. Как устроены экран и его области — на странице [Конструктор](https://support.watbot.ru/mini-apps/builder#редактор-экрана).

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

## Как добавить элемент

Кнопка «Добавить элемент» есть в настройках области — под списком её элементов. В меню элементы разбиты на группы: «Основные», «Виджеты», «Контейнеры», «Поля ввода», «Списки», «Магазин», «Запись на приём» и «Мастеру». Новый элемент встаёт в конец области, порядок меняется перетаскиванием.

В области — до 100 элементов.

![Меню «Добавить элемент»: элементы по группам](https://support.watbot.ru/_media/ru/02-mini-apps/_images/add-element.webp?v=1791781230)

## Общее у всех элементов

- **Свёрнутый список.** В настройках области каждый элемент — строка с названием вида «Кнопка #2». Клик по строке раскрывает настройки элемента. Клик по элементу на телефоне открывает именно его.
- **Копирование.** Кнопка «Копировать» на элементе кладёт его в буфер. Вставить его можно в любом экране: первым пунктом меню «Добавить элемент» появится «Вставить: …». В той же версии копия сохраняет связи с выходов.
- **Выравнивание и цвет.** У заголовка, текста, кнопки, изображения, оценки и таймера есть «Выравнивание»: «По левому краю», «По центру», «По правому краю». У заголовка, текста, кнопки, разделителя, карточки, переключателя, ползунка, оценки и таймера — «Цвет» из палитры приложения.

![Редактор экрана: клик по кнопке на телефоне открыл её настройки](https://support.watbot.ru/_media/ru/02-mini-apps/_images/element-settings.webp?v=1791781230)

### Условие показа

«Условие показа» — в конце настроек любого элемента, в том числе вложенного в карточку. Элемент увидят только те, у кого условие выполнено. Если условие проверяет поле этого же экрана, элемент появляется и пропадает сразу, пока человек заполняет поле. В конструкторе такой элемент обведён пунктиром. Как задаются условия — на странице [Данные приложения](https://support.watbot.ru/mini-apps/data#условия).

![Поле «Адрес доставки» с условием показа: видно, только если включён переключатель «Нужна доставка»](https://support.watbot.ru/_media/ru/02-mini-apps/15-elements/_images/visibility.webp?v=1791781230)

## Выходы элементов

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

| Элемент | Выход |
|---|---|
| [«Кнопка»](https://support.watbot.ru/mini-apps/elements/basic/button) | Всегда — «Кнопка "Имя"» |
| [«Изображение»](https://support.watbot.ru/mini-apps/elements/basic/image) | С отметкой «Клик по изображению — событие» |
| [«Список»](https://support.watbot.ru/mini-apps/elements/basic/list) | У каждого пункта — «Пункт "Название"» |
| [«Карточка»](https://support.watbot.ru/mini-apps/elements/containers/card) | С отметкой «Клик по карточке — событие». Выходы вложенных элементов — тоже у экрана |
| [«Записи списка»](https://support.watbot.ru/mini-apps/elements/records/records) | С отметкой «Нажатие на запись — событие» |
| [«Карточка записи»](https://support.watbot.ru/mini-apps/elements/records/record) | С отметкой «Вести по связи, если записи нет» |
| [«Форма записи»](https://support.watbot.ru/mini-apps/elements/records/form) | Всегда — срабатывает после успешной отправки |
| [«Таймер»](https://support.watbot.ru/mini-apps/elements/widgets/countdown) | С отметкой «Переходить дальше» — «Время вышло» |
| [«HTML-код»](https://support.watbot.ru/mini-apps/elements/widgets/html) | Выходы, которые вы заводите в настройках кода |

У элементов магазина выходы свои: «Категории магазина» и «Корзина» дают выход всегда, «Оформление заказа» — тоже, «Товары магазина» и «Мои заказы» — с отметкой открывать по нажатию. Подробно — на странице [Магазин](https://support.watbot.ru/mini-apps/elements/shop).

У элементов записи на приём выходы описаны на странице [Запись на приём](https://support.watbot.ru/mini-apps/elements/booking).

Нажатия на поля ввода, таймер и карту выходами не считаются.

## Группы элементов

- [Основные](https://support.watbot.ru/mini-apps/elements/basic) — заголовок, текст, изображение, видео, кнопка, список и разделитель.
- [Виджеты](https://support.watbot.ru/mini-apps/elements/widgets) — таймер обратного отсчёта, карта и свой HTML-код.
- [Контейнеры](https://support.watbot.ru/mini-apps/elements/containers) — карточка и аккордеон, внутрь которых кладут другие элементы.
- [Поля ввода](https://support.watbot.ru/mini-apps/elements/fields) — поле, многострочное поле, список выбора, переключатель, ползунок, оценка звёздами, дата и время.
- [Списки](https://support.watbot.ru/mini-apps/elements/records) — записи списка, карточка записи и форма записи.
- [Магазин](https://support.watbot.ru/mini-apps/elements/shop) — витрина магазина проекта: товары, категории, карточка товара, корзина, оформление и заказы.
- [Запись на приём](https://support.watbot.ru/mini-apps/elements/booking) — запись клиентов к специалистам и экраны для мастеров.
- [Файлы: картинки и видео](https://support.watbot.ru/mini-apps/elements/files) — какие файлы можно загрузить в элементы.