1. 概述
1.1 应用场景
Tab 组件用于在同一块仪表板区域内切换展示多组内容，适合需要按主题、维度或业务场景拆分展示的报表页面。
常见场景包括：
信息整合：将多个相关图表集中放在一个区域内，减少页面纵向长度。
布局优化：把同类内容分组展示，让仪表板结构更清晰。
多维分析：通过不同标签页切换不同分析视角，例如按区域、产品、时间或业务模块查看数据。
1.2 功能简介
用户可以在一个 Tab 组件内添加多个标签页，一个标签内可添加多个组件，点击可切换不同标签页；
Tab 组件支持编辑标题、删除、自身样式设置等；
Tab 标签页中支持再次拖入 Tab 组件，但最多支持 3 层 Tab 嵌套。
2. 添加Tab组件
1）点击「+>仪表板」，创建一张新仪表板。如下图所示：
2）点击组件区「其他>Tab」，将其添加到页面中。如下图所示：
3. 在 Tab 中管理组件
3.1 组件移入Tab
可以将分析表中已制作好的图表，或当前页面中的其他组件、组合，直接拖拽到 Tab 标签页区域内。
拖入后，标签页内的布局规则与绝对画布一致，可继续调整组件位置和大小。详情请参见： 绝对画布
3.2 组件移出Tab
如需将组件从 Tab 中移出，直接拖拽该组件到 Tab 组件外部即可。
4.管理标签页
4.1 新增标签页
在 Tab 栏中点击新增入口，可添加新的标签页。
新增后，可继续向该标签页中拖入图表、组件或组合。
4.2 删除标签页
在 Tab 栏中选择需要删除的标签页，执行删除操作即可。
删除标签页会同时移除该标签页中的内容。删除前请确认其中组件是否仍需保留。
4.3 设置标签内容与标签页标题
点击标签页，在右侧修改标签内容
在上方的标签列表中，可以双击后修改 Tab 组件的名字，和标签页的名字。
4.4 调整标签页顺序
可在 Tab 列表中拖拽调整标签页顺序。
不支持从上向下拖拽标签页，可使用调整层级>下移一层。
5. Tab 列表
在 Tab 列表中，可对标签页执行以下操作：
重命名。
隐藏或显示对象。
调整标签页顺序。
选择指定标签页进行编辑。
Tab 列表适合用于管理标签页较多、嵌套层级较深的仪表板。
6. 属性设置
选中 Tab 组件整体后，在右侧配置面板进入「属性」页签，可设置 Tab 的功能开关、切页按钮和标签样式。
6.1 功能设置
| 设置项 | 说明 |
|---|---|
| 调整锁定 | 开启后，调整 Tab 组件大小时，内部组件会随 Tab 大小变化等比同步调整 |
| 切页按钮 | 勾选「显示」后，预览时显示切换标签页的按钮 |
| 按钮类型 | 支持「Tab 栏」和「导航器」两种类型
|
| 显示策略 | 设置切页按钮的展示方式：固定显示或悬浮展示 |
| 自适应 | 移动端功能，进入「移动端预览」可调整 支持设置预览高度自适应 若当前组件与其他组件并列，或处于组合/未开启重布局的绝对画布内，高度自适应不会生效 |
6.2 样式设置
在「样式」区域，可设置标签页内边距、组件间隙、标签风格、标签宽度、Tab 栏样式和标签样式。
6.2.1 常用样式
| 设置项 | 说明 |
|---|---|
| 内边距 | 设置标签页内容与 Tab 边界之间的距离，支持分别设置上、下、左、右
|
| 组件间隙 | 设置标签页内组件之间的间距 |
| 标签风格 | 设置 Tab 标签的展示风格，例如下划线式 |
| 标签宽度 | 设置标签宽度为「自适应」或「等宽」 |
6.2.2 Tab 栏样式
展开「Tab 栏样式」后，可进一步设置标签间距、标签位置和对齐方式。
| 设置项 | 说明 |
|---|---|
| 标签间距 | 设置标签之间的距离 |
| 标签位置 | 设置标签栏位于 Tab 组件的上、下、左、右 |
| 对齐方式 | 设置标签在标签栏中的对齐方式 |
6.2.3 标签样式
展开「标签样式」后，可分别设置标签「未选中」和「选中」状态下的文本与下划线样式。
| 设置项 | 说明 |
|---|---|
| 文本样式 | 设置标签文字字体、字号、加粗、倾斜等 |
| 状态切换 | 可分别配置「未选中」和「选中」状态 |
| 字符颜色 | 设置当前状态下的标签文字颜色 |
| 下划线 | 设置下划线样式、粗细和颜色 |
6.2.4 导航器样式
当「按钮类型」选择「导航器」时，样式区域显示「导航器样式」。可配置导航器按钮的大小、颜色和不透明度。
7. Tab 交互属性
7.1 自动轮播
选中 Tab 整体，点击「交互」，支持设置「自动轮播」。如下图所示：
不开启自动轮播时，Tab 组件默认显示 Tab 列表中的第一个标签页内容。用户需要通过切页按钮查看其他标签页内容。
开启自动轮播时，可设置轮播间隔，默认为 6000 毫秒。Tab 组件按照 Tab列表中的顺序和轮播间隔时间，循环展示各标签页内容。
7.2 移动端滑动切页
当模板选择「移动端」模式时，支持「开启切换动画」。开启后，移动端预览时，切换 Tab 页有左右滑动的动画效果。如下图所示：
上一篇：网页框
