Tab组件

1. 概述

1.1 应用场景

Tab 组件用于在同一块仪表板区域内切换展示多组内容，适合需要按主题、维度或业务场景拆分展示的报表页面。

常见场景包括：

1.2 功能简介

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 功能设置

6.2 样式设置

在「样式」区域，可设置标签页内边距、组件间隙、标签风格、标签宽度、Tab 栏样式和标签样式。

6.2.1 常用样式

6.2.2 Tab 栏样式

展开「Tab 栏样式」后，可进一步设置标签间距、标签位置和对齐方式。

6.2.3 标签样式

展开「标签样式」后，可分别设置标签「未选中」和「选中」状态下的文本与下划线样式。

6.2.4 导航器样式

当「按钮类型」选择「导航器」时，样式区域显示「导航器样式」。可配置导航器按钮的大小、颜色和不透明度。

7. Tab 交互属性

7.1 自动轮播

选中 Tab 整体，点击「交互」，支持设置「自动轮播」。如下图所示：

7.2 移动端滑动切页

当模板选择「移动端」模式时，支持「开启切换动画」。开启后，移动端预览时，切换 Tab 页有左右滑动的动画效果。如下图所示：