---
title: "Создание пейвола с вкладками"
description: "Создайте экран пейвола с двумя вкладками, переключающимися между разными списками функций, группами продуктов и кнопками покупки."
---

Этот шаблон использует вкладки для переключения между двумя вариантами одного предложения на одном экране. Каждая вкладка содержит собственный список функций, список продуктов и кнопку покупки. Нажатие на вкладку меняет отображаемый контент без перехода на другой экран — удобно для разделения планов по уровню, периоду оплаты или сегменту аудитории.
## Прежде чем начать \{#before-you-start\}

- [Создайте продукты](create-product) в дашборде Adapty.
- [Подключите Adapty к App Store и Google Play](integrate-payments).
## 1. Настройте макет экрана \{#1-set-up-the-screen-layout\}

Экран служит контейнером для кнопки закрытия, заголовка, вкладок и содержимого вкладок. В этом примере фон — изображение, но сплошной цвет или градиент работают так же.

Полный список свойств экрана см. в разделе [Экраны и слои — Настройки экрана](paywall-layout-and-products#screen-settings).

Чтобы настроить экран:
1. Нажмите на пустую область холста, чтобы выделить экран.
2. В разделе **System UI** отключите **Safe area**, чтобы фон растянулся до краёв экрана.
3. В разделе **Fill** выберите тип фона и настройте его. В этом примере используется **Image** Image, но сплошной цвет или градиент настраиваются так же.
4. В разделе **Layout** задайте направление **Vertical** Vertical и настройте отступы и выравнивание, чтобы элементы располагались сверху вниз, а содержимое вкладки заполняло оставшееся пространство.

## 2. Добавьте кнопку закрытия \{#add-the-close-button\}

Кнопка закрытия скрывает пейвол. Пресет **Close** уже настроен — никаких дополнительных действий не требуется.

1. На холсте нажмите **+**.
2. Выберите **Buttons** > **Close**.

## 3. Добавьте заголовок и расположите его рядом с кнопкой закрытия \{#add-the-title-and-pair-it-with-the-close-button\}

Заголовок находится рядом с кнопкой закрытия в верхней части экрана. Чтобы выровнять их по горизонтали, оберните оба элемента в горизонтальный стек.

Чтобы добавить заголовок:

1. Нажмите **+** > **Text** > **H1**.
2. Выделив H1, откройте вкладку **Design** и отредактируйте текст в поле **Content**.

Чтобы сгруппировать заголовок с кнопкой закрытия:
1. На панели **Layers** нажмите меню из трёх точек Context menu на слое с кнопкой закрытия и выберите **Wrap** > **Wrap in Horizontal Stack**.

2. Перетащите слой H1 в новый горизонтальный стек.

Чтобы выровнять два элемента:
1. Отрегулируйте размер кнопки закрытия и размер шрифта H1, чтобы они комфортно располагались на одной строке.
2. Выделив горизонтальный стек, задайте выравнивание и распределение в правой панели, чтобы элементы встали корректно.

## 4. Добавьте вкладки и настройте их метки \{#4-add-the-tabs-and-configure-their-labels\}

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

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

Чтобы добавить вкладки:
1. Нажмите **+** > **Tabs** и выберите пресет — Segment control, Button Tabs или Underline.
2. Выделив название каждого таба на холсте или в панели **Layers**, отредактируйте поле **Content** на вкладке **Design**, чтобы изменить подпись — например, `Premium` и `Pro`.

## 5. Добавьте список функций на первую вкладку \{#5-add-a-feature-list-to-the-first-tab\}

Короткий компактный список функций внутри первой вкладки показывает пользователям, что входит в этот план.

Полный набор пресетов списков описан в разделе [Элементы — Список](builder-elements#list).

Чтобы добавить список функций:

1. Нажмите **+** > **List** и выберите пресет списка. Icon List — самый компактный вариант для пейволов. Элемент появится в конце дерева слоёв.
2. Выбрав каждую строку, отредактируйте заголовок в поле **Content**.

3. На панели **Layers** перетащите список в контейнер **Content** первой вкладки.

## 6. Добавьте список продуктов на первую вкладку \{#add-the-product-list-to-the-first-tab\}

Список продуктов отображает варианты подписки для первой вкладки. Элемент Products отрисовывает по одной карточке на каждый продукт, назначенный экрану, и создаёт собственную группу выбора.

Подробнее об управлении продуктами — в разделе [Настройка покупок](paywall-product-block).

Чтобы добавить и настроить продукты:

1. Нажмите **+** > **Products** и выберите пресет макета. Vertical List хорошо подходит для стопки тарифов. Элемент появится в конце дерева слоёв.
2. Выберите каждую карточку продукта на холсте и выберите продукт из выпадающего списка на вкладке **Design**.

3. На панели **Layers** перетащите слой Products в контейнер **Content** первого таба.

## 7. Добавьте кнопку покупки на первый таб \{#add-the-purchase-button-to-the-first-tab\}

Кнопка покупки запускает встроенную покупку выбранного пользователем продукта на первом табе. Её подпись использует цену выбранного продукта и автоматически синхронизируется с выбором пользователя.

Подробнее об экшне «Покупка» читайте в разделе [Действия — Покупка](onboarding-actions#purchase).

Чтобы добавить и настроить кнопку покупки:
1. Нажмите **+** > **Buttons** и выберите пресет кнопки. Элемент появится в конце дерева слоёв.
2. Выделив кнопку, откройте вкладку **Design** и поставьте курсор в поле **Content**. Нажмите на иконку переменной Variable icon, выберите `products.selectedProduct`, затем атрибут `prod_price` — полная переменная примет вид `products.selectedProduct.prod_price`. Добавьте остальной текст метки, например: `Subscribe for {prod_price}`.

3. Перейдите на вкладку **Interactions** и нажмите **Add trigger** > **On tap** > **Add action**.
4. Установите **Action** в значение **Purchase**, а **Product** — в `products.selectedProduct`.

5. На панели **Layers** перетащите кнопку в контейнер **Content** первой вкладки.

## 8. Скопируйте содержимое первой вкладки во вторую \{#copy-the-first-tabs-content-into-the-second-tab\}

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

Чтобы скопировать содержимое:
1. На панели **Layers** разверните контейнер **Content** первой вкладки.
2. Выделите каждый элемент внутри него (список функций, продукты, кнопку покупки), скопируйте с помощью ⌘C / Ctrl+C и вставьте с помощью ⌘V / Ctrl+V. Копии появятся в конце дерева слоёв.
3. Перетащите каждый скопированный элемент в контейнер **Content** второй вкладки.

## 9. Обновите содержимое второй вкладки \{#update-the-second-tabs-content\}

Вторая вкладка пока повторяет первую. Обновите каждый элемент, чтобы он отражал второй тарифный план.

Чтобы обновить вторую вкладку:
1. Отредактируйте список функций внутри второй вкладки так, чтобы строки соответствовали функциям второго плана.
2. Выберите каждую карточку продукта в элементе Products второй вкладки и назначьте продукты второго плана из выпадающего списка. Этот элемент Products автоматически становится отдельной выбираемой группой (`products2`).
3. Выберите кнопку покупки во второй вкладке. В поле **Content** на вкладке **Design** измените переменную цены с `products.selectedProduct.prod_price` на `products2.selectedProduct.prod_price`.
4. Перейдите на вкладку **Interactions** и обновите **Product** в действии **Purchase** с `products.selectedProduct` на `products2.selectedProduct`.

## 10. Добавьте общие ссылки в подвале \{#add-the-shared-footer-links\}

Ссылки на условия использования, политику конфиденциальности и восстановление покупок должны отображаться вне зависимости от активной вкладки. Добавьте их на уровне экрана — за пределами обоих контейнеров с содержимым вкладок — чтобы они были общими для обеих вкладок.

Чтобы добавить ссылки в подвале:
1. Нажмите **+** > **Buttons** > **Links**. В дерево слоёв добавится строка с Restore Purchases, Terms of Use и Privacy Policy — в самом конце, на уровне корня экрана, а не внутри вкладки.
2. Выберите ссылку **Terms of Use**, откройте вкладку **Interactions** и вставьте URL условий использования в поле **Open URL**.
3. Повторите то же самое для ссылки **Privacy Policy**, указав URL политики конфиденциальности.
4. Ссылку **Restore Purchases** оставьте без изменений — её действие уже настроено заранее.

## Следующие шаги \{#next-steps\}

- [Сохраните и опубликуйте флоу](builder-save-publish).
- [Добавьте флоу в плейсмент](create-placement), чтобы начать показывать его пользователям.