---
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)。