标签页

标签页将屏幕的某个区域拆分为可切换的内容面板——用户点击标签页标头后，下方面板会随之更新。

Tabs element selected on the canvas with the +Add tab control visible

添加、删除和选择标签页

每个标签页由两部分组成：

  • 标签页头部 — 可点击的标签名称（Tab 1、Tab 2 等）。
  • 标签页内容 — 每个标签页对应一个内容容器，在该容器中添加的内容会在相应标签页被选中时显示。

点击 Add tab 可添加新标签页，每个新标签页都会自动创建一个对应的内容容器。

若要设置某个标签页在页面首次显示时默认处于激活状态，请开启 Selected by default。

设置标签页样式

模板

Tab templates

Flow Builder 提供三种开箱即用的标签页模板：

  • Segment control — 胶囊形切换器，选中标签带有圆角边框。
  • Button Tabs — 独立的按钮式标签页。
  • Underline — 文字标签，选中标签下方带有下划线标记。

选项卡状态

每个选项卡都有一个状态切换器（Default / Selected），可以分别为激活和未激活状态设置样式——包括字体、颜色、填充色和边框。

可选组

标签页是一种单选可选组——同一时间只有一个标签处于激活状态。在 Screen settings 面板的 Selectable groups 部分管理该组。

该组提供两个变量：

  • tabs.selectedOptionId — 当前选中标签页的 ID，可用于条件判断。
  • tabs.selectedOptionTitle — 当前选中标签页的标签文本，可用于动态文本。

如果你重命名了该组，请将 tabs 替换为你自定义的 Group ID。

详细说明请参阅可选元素与组。