---
title: "Вкладки"
description: "Добавьте навигацию по вкладкам, переключающую панели контента в флоу."
---

**Вкладки** делят раздел экрана на переключаемые панели контента — пользователь нажимает на заголовок вкладки, и панель ниже обновляется соответственно.

{/* TODO: on-device GIF */}
## Добавление, удаление и выбор вкладок \{#add-remove-and-select-tabs\}

Каждая вкладка состоит из двух частей:

- **Заголовок вкладки** — кликабельная метка (Tab 1, Tab 2 и т. д.).
- **Содержимое вкладки** — один контейнер на каждую вкладку. Всё, что вы помещаете в контейнер, отображается при выборе соответствующей вкладки.

Нажмите **Add tab**, чтобы добавить новую вкладку. Для каждой новой вкладки автоматически создаётся соответствующий контейнер содержимого.

Чтобы определённая вкладка была активной при первом открытии экрана, включите переключатель **Selected by default**.
## Стилизация вкладок \{#style-the-tabs\}
### Шаблоны \{#templates\}

Flow Builder предлагает три готовых шаблона для вкладок:

- **Segment control** — переключатель в виде «пилюли» с закруглёнными углами вокруг активной вкладки.
- **Button Tabs** — отдельные вкладки в виде кнопок.
- **Underline** — текстовые метки с подчёркиванием активной вкладки.
### Состояния вкладок \{#tab-states\}

У каждой вкладки есть переключатель состояний (**Default / Selected**), позволяющий отдельно настроить стили активного и неактивного состояния — типографику, цвета, заливку и рамку для каждого из них.
## Выбираемая группа \{#selectable-group\}

Вкладки — это **одиночная выбираемая группа**: в каждый момент активна ровно одна вкладка. Управлять группой можно в панели **Screen settings** в разделе [Selectable groups](paywall-layout-and-products#selectable-groups).

Группа предоставляет две переменные:

- `tabs.selectedOptionId` — ID выбранной вкладки. Используйте в условиях.
- `tabs.selectedOptionTitle` — метка выбранной вкладки. Используйте в динамическом тексте.

Замените `tabs` на свой **Group ID**, если переименовали группу.

Подробнее см. в разделе [Выбираемые элементы и группы](flow-selectable-elements).