跳到主要内容

Tab 控件介绍

Tab 用于在同一业务对象或同一工作流程中组织并列内容。用户不离开当前页面，就可以在多个内容区之间切换。它适合资料维护、分步配置、详情分组和“编辑—审核”类工作区。

阅读本手册后，你可以完成以下配置：

  • 添加 Tab 容器和多个 Tab 页签
  • 配置 Line、Card 和 Editable Card 外观
  • 将页签放在顶部、右侧、底部或左侧
  • 配置居中、禁用和首次按需渲染
  • 在不同 Tab 中组合 Form、字段、按钮和其他容器
  • 为单个 Tab 或整个 Tab 容器配置 onClick

Tab 只用于同一对象内部的并列视图。不同业务模块或需要独立 URL、权限、菜单高亮的页面，应使用页面菜单，不要用大量 Tab 代替应用导航。

1. 示例：活动发布工作区​

Spark Sample 的 Tab 页面使用一个“活动发布工作区”说明常见组合方式：

页签内容展示重点
Overview活动名称、负责人、发布日期、预算和摘要普通表单与草稿操作
Delivery settings渠道、受众、审批开关、默认语言和投放说明Select、Switch 与配置校验
Review & publish只读汇总和发布按钮按需渲染、跨页签表单状态和交互
Audit log (coming soon)暂未开放禁用页签

这个示例不依赖后端 Sample API。字段值保存在当前页面运行态中，适合先理解 Tab 的结构、切换和交互；需要加载业务数据时，再在页签内部使用 Data Form、DataList、ProTable 或其他数据控件。

2. 添加 Tab 容器​

  1. 打开目标页面并进入 Page Designer。
  2. 在左侧组件面板展开 Containers。
  3. 将 Tab 拖入 Screen 或其他允许容器控件的区域。
  4. 选中 Tab 容器，在 Tabs 子元素区域添加页签。
  5. 分别选中每个子 Tab，填写 Tab Label。
  6. 将 Form、字段、按钮或其他容器拖入对应 Tab 的内容区。

Tab 容器和子 Tab 是两层结构：

Tab
├── Overview
│   └── Form
├── Delivery settings
│   └── Form
├── Review & publish
│   └── Form
└── Audit log (coming soon)

3. 配置 Tab 容器​

选中外层 Tab 容器，配置以下属性：

属性可选值说明
Tab Styleline、card、editable-cardLine 使用下划线强调；Card 使用卡片式页签；Editable Card 只使用可编辑卡片外观
Tab Positiontop、right、bottom、left控制页签标题位于内容区的哪个方向
Center Tabs开 / 关在顶部或底部位置将页签标题居中；左右位置仍按纵向排列

editable-card 在运行态不会允许最终用户直接新增或删除页面结构。Tab 数量和顺序仍由 Page Designer 管理，运行态会隐藏新增、关闭等结构编辑入口。

选择样式或位置后，设计画布会立即预览相同的方向和主要外观；保存页面后，运行态会按照已保存的配置显示。

4. 配置单个 Tab​

在 Tabs 子元素列表中选择一个 Tab，可配置：

属性说明
Tab Label页签中显示的名称，建议简短并能直接表达内容范围
Always Render开启后页面首次加载时就渲染该页签内容；关闭后第一次切换到该页签时再渲染
Disabled禁止选择该页签，适合“即将开放”或当前条件不满足的内容

4.1 Always Render 的选择​

  • 表单字段较少、页签间需要立即共享状态时，可以开启。
  • 图表、远程列表或重型组件较多时，可以关闭，减少首次加载工作量。
  • 关闭后只会延迟第一次渲染。用户打开过该页签后，普通切换不会自动清空已经输入的状态。

4.2 Disabled 的选择​

禁用页签仍会显示标题，但不会切换内容，也不会执行该 Tab 的 onClick。如果内容永远不应被访问，应直接删除或隐藏对应结构；Disabled 更适合表达暂时不可用。

5. 在 Tab 中组织内容​

Tab 可以承载多个 Panel、Form 和字段。推荐按以下方式组织：

  1. 每个页签只负责一个清晰主题。
  2. 表单内容先添加 Form，再将字段放入 Form，便于统一列数、标签比例、布局和校验。
  3. 页面级主要操作放在最后一个审核页签或固定区域，不要在每个页签重复同一主按钮。
  4. 数据列表较重时关闭该 Tab 的 Always Render。
  5. 页签超过 5～7 个时，重新审视信息架构；低频内容可合并到分组、抽屉或独立页面。

示例中的 Overview 与 Delivery settings 使用可编辑 Form，Review & publish 使用同名字段的只读 Form。用户修改前两个页签中的值后，审核页签可以读取同一页面状态并显示最新值。

6. 配置交互​

Tab 支持两层点击交互：

  1. 单个子 Tab 的 onClick。
  2. 外层 Tab 容器的 onClick。

配置单个页签交互时：

  1. 在画布或子元素列表中选择目标 Tab。
  2. 打开右侧 Interaction。
  3. 在 onClick 下添加 Toast、设置页面上下文、请求接口或其他动作。
  4. 保存页面并进入运行态验证。

用户选择一个可用页签时，系统先执行该子 Tab 的 onClick，再执行外层 Tab 容器的 onClick。禁用页签不会执行任何点击交互。示例为 Review & publish 配置了提示消息，并在页签内按钮上配置了发布提示。

7. 示例配置步骤​

可以按以下顺序复现 Spark Sample 页面：

  1. 添加 Tab，保留 line、top 和非居中设置。
  2. 添加 Overview、Delivery settings、Review & publish、Audit log (coming soon) 四个子 Tab。
  3. 为前三个 Tab 分别添加一个 Form，Form 使用两列 Horizontal 布局。
  4. 在 Overview 中添加 Input、DatePicker、TextArea 和 Save draft 按钮。
  5. 在 Delivery settings 中添加 Dropdown Select、Switch、Input、TextArea 和 Validate settings 按钮。
  6. 在 Review & publish 中添加只读字段和 Publish campaign 按钮，并关闭该 Tab 的 Always Render。
  7. 将 Audit log (coming soon) 设置为 Disabled，并关闭 Always Render。
  8. 为 Review & publish 的 onClick 添加 Info Toast。
  9. 为三个操作按钮分别添加 Toast，并在消息中使用组件值表达式，例如：
Campaign [[campaignName]] is ready for [[campaignChannel]].

8. 常见问题​

8.1 修改样式或位置后运行态没有变化​

确认已经保存页面，并使用包含当前设计版本 versionId 的运行态地址。设计画布会即时预览，但运行态只读取服务端已保存的 Page JSON。

8.2 点击页签没有执行交互​

依次检查：

  • Interaction 是否配置在真正的子 Tab，而不是页签内部 Form。
  • 事件是否为 onClick。
  • Tab 是否被 Disabled。
  • 页面是否已保存，运行态是否使用当前版本。

8.3 切换页签后字段值消失​

先确认字段使用稳定且唯一的 Name。需要跨页签显示同一个值时，编辑区和只读区应读取同一个字段 Name；如果每个页签使用不同 Name，它们就是互相独立的页面状态。

8.4 首次打开页面很慢​

对包含远程列表、图表或较多字段的非首屏 Tab 关闭 Always Render。首个页签保留必要内容，其他内容在用户第一次打开时再创建。

9. 设计建议​

  • 页签名称使用名词或简短动作短语，例如 Overview、Configuration、History。
  • 同一组页签保持相近的信息层级，不要把“详情”“系统设置”“退出登录”放在同一层。
  • 重要错误、未保存状态和发布结果不要只依赖页签颜色表达，应同时使用可读文案。
  • 移动端页签较多时优先精简数量；左右位置更适合桌面端局部工作区。
  • 需要独立链接、浏览器前进后退或菜单权限时，改用独立页面与菜单。
最后于 更新