# Елементи екрана

Екран міні-застосунку збирається з елементів: заголовків і тексту, кнопок, картинок, полів введення, списків, карт та інших. Елементи розміщуються в областях екрана — у контенті, у колонках сітки, усередині картки або секції акордеона. Як влаштовано екран і його області — на сторінці [Конструктор](https://support.jetbot24.ru/uk/mini-apps/builder#редактор-екрана).

На цій сторінці — як додавати елементи й що в них спільного. Що робить кожен елемент і як його налаштувати — на сторінках груп наприкінці.

## Як додати елемент

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

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

![Меню «Додати елемент»: елементи за групами](https://support.jetbot24.ru/_media/uk/02-mini-apps/_images/add-element.webp?v=1791786051)

## Спільне для всіх елементів

- **Згорнутий список.** У налаштуваннях області кожен елемент — це рядок із назвою на зразок «Кнопка #2». Клік по рядку розгортає налаштування елемента. Клік по елементу на телефоні відкриває саме його.
- **Копіювання.** Кнопка «Копіювати» на елементі кладе його до буфера. Вставити його можна на будь-якому екрані: першим пунктом меню «Додати елемент» з'явиться «Вставити: …». У тій самій версії копія зберігає зв'язки з виходів.
- **Вирівнювання й колір.** Заголовок, текст, кнопка, зображення, оцінка й таймер мають «Вирівнювання»: «По лівому краю», «По центру», «По правому краю». Заголовок, текст, кнопка, роздільник, картка, перемикач, повзунок, оцінка й таймер мають «Колір» із палітри застосунку.

![Редактор екрана: клік по кнопці на телефоні відкрив її налаштування](https://support.jetbot24.ru/_media/uk/02-mini-apps/_images/element-settings.webp?v=1791786051)

### Умова показу

«Умова показу» — наприкінці налаштувань будь-якого елемента, зокрема вкладеного в картку. Елемент побачать лише ті, для кого умова виконується. Якщо умова перевіряє поле цього ж екрана, елемент з'являється й зникає одразу, поки людина заповнює поле. У конструкторі такий елемент обведено пунктиром. Як задаються умови — на сторінці [Дані застосунку](https://support.jetbot24.ru/uk/mini-apps/data#умови).

![Поле «Адреса доставки» з умовою показу: його видно, лише якщо ввімкнено перемикач «Потрібна доставка»](https://support.jetbot24.ru/_media/uk/02-mini-apps/15-elements/_images/visibility.webp?v=1791786051)

## Виходи елементів

Деякі елементи додають екрану виходи — від них ведуть зв'язки до наступного блоку. Вихід з'являється сам, коли елемент додано або ввімкнено потрібне налаштування:

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

В елементів магазину виходи свої: «Категорії магазину» і «Кошик» дають вихід завжди, «Оформлення замовлення» — теж, «Товари магазину» і «Мої замовлення» — із позначкою відкривати після натискання. Докладно — на сторінці [Магазин](https://support.jetbot24.ru/uk/mini-apps/elements/shop).

Виходи елементів запису на прийом описано на сторінці [Запис на прийом](https://support.jetbot24.ru/uk/mini-apps/elements/booking).

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

## Групи елементів

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