1. 概述
1.1 应用场景
Tab组件可实现信息整合、布局优化、多维分析等多种场景，满足用户不同的数据分析需求。
用户在制作仪表板时，将一个仪表板中的内容分多个主题去展示，缩短仪表板篇幅，实现灵活布局，并且可以同时查看，效果如下图所示：
1.2 功能简介
用户可以在一个 Tab 组件内添加多个标签页，一个标签内可添加多个组件，点击可切换不同标签页；
Tab 组件支持编辑标题、删除、自身样式设置等；
Tab 标签页中支持再次拖入 Tab 组件，但最多支持 3 层 Tab 嵌套。
2. 添加Tab组件
点击「+>仪表板」，创建一张新仪表板。如下图所示：
2）点击组件区「其他>Tab」，将其添加到页面中。如下图所示：
3. 组件移入/移出Tab
3.1 组件移入Tab
直接拖拽分析表中制作好的图表或本页面中其他组件/组合到 Tab 标签页上方。Tab 标签页内布局规则和 绝对画布 一致。
3.2 组件移出Tab
直接拖拽组件到 Tab 外，如下图所示：
4.Tab 标签页
添加 Tab 组件时，自带一个标签页，支持添加多个标签页。右侧 Tab 列表中展示所有 Tab 标签页和标签页内的组件。
标签页支持单独设置「标题内容」、「背景」、「边框线」及「圆角半径」。
注1：Tab 组件名称、Tab 标签页名称及 Tab 内组件的名称均不支持重名。Tab 标题内容支持重复。
注2：「标题内容」仅体现在画布的 Tab 页签中，Tab 列表、组件图层、画布中页签选中、交互事件设置的调用对象等场景仍使用「名称」。
5. Tab 列表
1）在 Tab 列表中，支持重命名、隐藏对象等操作。
2）支持从下向上拖拽标签页，改变标签页顺序。不支持从上向下拖拽标签页，可使用调整层级>下移一层。
6. Tab 属性设置
选中 Tab 整体，在 Tab 列表下方「属性」配置面板中，可对标签页和切页按钮进行设置。如下图所示：
6.1 标签页
调整锁定：勾选「开启调整锁定」时，调整 Tab 大小，内部组件大小也会等比例变化。如下图所示：
效果如下图所示：
内边距：当开启移动端布局时，Tab 组件支持设置标签页内边距、组件间隙及预览高度自适应。如下图所示：
6.2 切页按钮
1）勾选「显示切页按钮」，可选择使用「Tab栏按钮」或「导航器按钮」。
按钮类型：
Tab栏按钮：以 Tab 栏样式展示。
导航器按钮：以导航器切换样式展示。
2）Tab 栏按钮各设置项的具体说明如下表所示：
| 设置 | 说明 |
|---|---|
| 显示策略 | Tab栏按钮：
|
| 按钮风格 | 支持三种样式：科技样式、联排样式或下划线式。 |
样式模板为「科技样式」时，可设置项如下：
| |
样式模板为「联排样式」时，可设置项如下：
注：联排样式下，当布局方式为「自然布局」且 Tab栏按钮超出 Tab 尺寸时，默认存在翻页箭头，不支持设置
| |
样式模板为「下划线式」时，可设置项如下：
注：下划线式下，当布局方式为「自然布局」且 Tab栏按钮超出 Tab 尺寸时，默认存在翻页箭头，不支持设置
| |
| 布局方式 |
|
| 文字位置 | 仅当布局方式选择「等分布局」时，可设置 Tab栏按钮中的文字位置，支持居左、居中、居右 |
| 按钮位置 | 可调整 Tab栏按钮的位置，支持上、下、左、右四种 |
3）导航器按钮各设置项的具体说明如下表所示：
| 设置 | 说明 |
|---|---|
| 显示导航点 | 控制底部导航点是否出现 |
| 显示策略 |
|
| 大小 | 用于调整导航器按钮的尺寸大小 |
| 颜色 | 用于调整导航器按钮以及导航点的颜色 |
| 不透明度 | 用于调整导航器按钮的透明度 |
导航器和导航点的位置如下图所示：
7. Tab 交互属性
7.1 自动轮播
选中 Tab 整体，点击「交互」，支持设置「自动轮播」。如下图所示：
不开启自动轮播时，Tab 组件默认显示 Tab 列表中的第一个标签页内容。用户需要通过切页按钮查看其他标签页内容。
开启自动轮播时，可设置轮播间隔，默认为 6000 毫秒。Tab 组件按照 Tab列表中的顺序和轮播间隔时间，循环展示各标签页内容。
7.2 移动端滑动切页
当模板选择「移动端」模式时，支持「开启切换动画」。开启后，移动端预览时，切换 Tab 页有左右滑动的动画效果。如下图所示：
上一篇：网页框
