最新历史版本 :Tab组件 返回文档
编辑时间: 内容长度:图片数:目录数: 修改原因:

目录:

1. 概述编辑

1.1 应用场景

Tab组件可实现信息整合、布局优化、多维分析等多种场景,满足用户不同的数据分析需求。

用户在制作仪表板时,将一个仪表板中的内容分多个主题去展示,缩短仪表板篇幅,实现灵活布局,并且可以同时查看,效果如下图所示:

ScreenRecorderProject31.gif

1.2 功能简介

  • 用户可以在一个 Tab 组件内添加多个标签页,一个标签内可添加多个组件,点击可切换不同标签页;

  • Tab 组件支持编辑标题、删除、自身样式设置等;

  • Tab 标签页中支持再次拖入 Tab 组件,但最多支持 3 层 Tab 嵌套。

2. 添加Tab组件编辑

点击「+>仪表板」,创建一张新仪表板。如下图所示:

2)点击组件区「其他>Tab」,将其添加到页面中。如下图所示:

3. 组件移入/移出Tab编辑

3.1 组件移入Tab

直接拖拽分析表中制作好的图表或本页面中其他组件/组合到 Tab 标签页上方。Tab 标签页内布局规则和  绝对画布 一致。

Tab组件.gif

3.2 组件移出Tab

直接拖拽组件到 Tab 外,如下图所示:

2025-10-27_10-57-18 (1).gif


4.Tab 标签页编辑

添加 Tab 组件时,自带一个标签页,支持添加多个标签页。右侧 Tab 列表中展示所有 Tab 标签页和标签页内的组件。

标签页支持单独设置「标题内容」、「背景」、「边框线」及「圆角半径」。

注1:Tab 组件名称、Tab 标签页名称及 Tab 内组件的名称均不支持重名。Tab 标题内容支持重复。

注2:「标题内容」仅体现在画布的 Tab 页签中,Tab 列表、组件图层、画布中页签选中、交互事件设置的调用对象等场景仍使用「名称」。

2025-10-24_17-38-48.jpg

5. Tab 列表编辑

1)在 Tab 列表中,支持重命名、隐藏对象等操作。

2025-10-27_10-52-06.jpg

2)支持从下向上拖拽标签页,改变标签页顺序。不支持从上向下拖拽标签页,可使用调整层级>下移一层。

6. Tab 属性设置编辑

选中 Tab 整体,在 Tab 列表下方「属性」配置面板中,可对标签页和切页按钮进行设置。如下图所示:

2025-10-24_17-42-23.jpg

6.1 标签页

调整锁定:勾选「开启调整锁定」时,调整 Tab 大小,内部组件大小也会等比例变化。如下图所示:

2025-10-24_17-46-04.jpg

效果如下图所示:

Tab组件3.gif

内边距:当开启移动端布局,Tab 组件支持设置标签页内边距、组件间隙及预览高度自适应。如下图所示:

2025-10-24_17-49-30.jpg

6.2 切页按钮

1)勾选「显示切页按钮」,可选择使用「Tab栏按钮」或「导航器按钮」。

2025-10-24_17-50-54.jpg

按钮类型:

  • Tab栏按钮:以 Tab 栏样式展示。

  • 导航器按钮:以导航器切换样式展示。

2)Tab 栏按钮各设置项的具体说明如下表所示:

设置
说明
显示策略

Tab栏按钮:

  • 固定显示:Tab栏按钮默认显示在组件上

  • 悬浮显示:Tab栏按钮默认不显示,当鼠标悬浮在 Tab 组件上时,Tab栏按钮出现

按钮风格支持三种样式:科技样式、联排样式或下划线式。

样式模板为「科技样式」时,可设置项如下:

  • 文本样式:可设置按钮文字对应的字体和大小

  • 字符颜色:可分别设置按钮未选中和选中时,按钮文字颜色

  • 按钮底图:内置了五种底图样式可供选择,可改变底图色相

  • 翻页箭头:仅当布局方式为「自然布局」且 Tab栏按钮超出 Tab 尺寸时,支持设置翻页箭头。内置了四种箭头样式可供选择,可改变箭头色相

2025-10-27_10-33-46.jpg

样式模板为「联排样式」时,可设置项如下:

  • 文本样式:可设置按钮文字对应的字体和大小

  • 字符颜色:可分别设置按钮未选中和选中时,按钮文字颜色

  • 填充颜色:可分别设置按钮未选中和选中时,按钮背景的填充颜色

  • 边框线:可分别设置按钮未选中和选中时,按钮的边框线样式

  • 圆角:可对 Tab栏按钮整体设置圆角效果

注:联排样式下,当布局方式为「自然布局」且 Tab栏按钮超出 Tab 尺寸时,默认存在翻页箭头,不支持设置

2025-10-27_10-35-13.jpg

样式模板为「下划线式」时,可设置项如下:

  • 文本样式:可设置按钮文字对应的字体和大小

  • 字符颜色:可分别设置按钮未选中和选中时,按钮文字颜色

  • 边框线:可分别设置按钮未选中和选中时,按钮的边框线样式

注:下划线式下,当布局方式为「自然布局」且 Tab栏按钮超出 Tab 尺寸时,默认存在翻页箭头,不支持设置

2025-10-27_10-36-33.jpg

布局方式
  • 自然布局:根据标签页名称的长度和按钮字号,按照合适的长度自适应显示 Tab栏,超出 Tab 组件尺寸时,出现翻页箭头

  • 等分布局:根据 Tab 组件的长度/高度,以及标签页个数,等分 Tab栏,每个 Tab按钮的长度一致

文字位置仅当布局方式选择「等分布局」时,可设置 Tab栏按钮中的文字位置,支持居左、居中、居右
按钮位置可调整 Tab栏按钮的位置,支持上、下、左、右四种

3)导航器按钮各设置项的具体说明如下表所示:

设置
说明
显示导航点控制底部导航点是否出
显示策略
  • 固定显示:预览时,导航器按钮默认显示在组件左右两侧

  • 悬浮显示:预览时,导航器按钮默认不显示,当鼠标悬于 Tab 时,导航器按钮出现

大小用于调整导航器按钮的尺寸大小
颜色用于调整导航器按钮以及导航点的颜色
不透明度用于调整导航器按钮的透明度

导航器和导航点的位置如下图所示:

2025-10-27_10-44-06.jpg

7. Tab 交互属性编辑

7.1 自动轮播

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

2025-10-27_10-48-14.jpg

  • 不开启自动轮播时,Tab 组件默认显示 Tab 列表中的第一个标签页内容。用户需要通过切页按钮查看其他标签页内容。

  • 开启自动轮播时,可设置轮播间隔,默认为 6000 毫秒。Tab 组件按照 Tab列表中的顺序和轮播间隔时间,循环展示各标签页内容。

7.2 移动端滑动切页

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

2025-10-27_10-49-32.jpg