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