Tab

通过添加Tab控件，您可以在仪表板中以标签页的形式展示多张图表，帮助您：

• 优化布局：在单一视图内承载更多信息，避免页面过长或过于拥挤。

• 提升组织性：将相关联的图表和控件归类到同一个Tab下，使信息结构更清晰。

• 引导分析：按照特定的顺序组织Tabs，可以引导用户按步骤进行数据探索。

本文将为您介绍如何创建并设置Tab控件。

应用场景

适用于需要将仪表板内容按照逻辑类别、分析主题或业务流程步骤进行划分，以实现用户可以通过点击不同的Tab标签来切换查看相应内容的场景。例如：在一个销售仪表板中，您可以使用Tab控件创建销售概览、区域表现、产品分析等多个标签页，并在每个标签页下放置对应的图表和数据。

使用限制

• 前提条件：已创建好仪表板。请参见新建仪表板和可视化图表概述。

• 在使用Tab控件时，请注意以下几点：

  • 内容独立性：每个Tab标签页内的内容是相对独立的。如果一个Tab页内放置了查询控件，在对该Tab页进行筛选操作时，默认仅影响当前Tab页内的关联图表，不会自动影响其他Tab页的内容。

  • 置顶功能依赖：若希望在页面滚动时，Tab内的查询控件能固定在顶部（即开启Tab内条件跟随置顶），前提是必须先开启Tab标题置顶功能。

操作步骤

在仪表板编辑模式下，您可以按照以下步骤添加和配置Tab控件。

1. 添加Tab控件：在顶部菜单栏单击图标，添加Tab控件。

   

2. 添加内容到Tab页：将仪表板画布上已有的图表、查询控件或其他组件，以拖拽方式放入当前选中的Tab标签页下。同样地，也可以将Tab内的组件拖拽出来。

3. 编辑Tab页：您可以进行以下Tab页的编辑操作。/

   操作类型	操作说明
   自定义Tab页名称	在画布上单击Tab页标题，输入标题名称。
   新增Tab页	点击图标，即可添加一个新的空白Tab页。
   调整Tab页位置	鼠标悬浮至目标Tab标签页，当标签页左侧出现图标时，拖拽调整标签页的位置。
   复制当前Tab页	鼠标悬浮至目标Tab标签页，单击标签页右侧图标选择复制，复制标签页。
   删除当前Tab页	鼠标悬浮至目标Tab标签页，单击标签页右侧图标选择删除，删除标签页。

4. 配置Tab控件样式：在仪表板右侧的样式配置面板中进行以下样式配置操作。

   • 在标题与卡片中，配置标题、Tab样式、备注和尾注等信息。

     样式内容	描述说明
     标题	设置是否显示主标题，配置标题内容、文本样式、分割线。 说明 标题最长允许输入100字符。
     Tab样式
     自定义Tab样式	支持自定义Tab样式为下划线、分割线、选中块和胶囊滑块。
     Tab内文字	当自定义Tab样式选择下划线、分割线、选中块时，支持设置选中字体样式以及未选中字体样式。
     文本	当自定义Tab样式选择胶囊滑块时，支持设置文本字号、未选中以及选中字体的样式。
     滑块	当自定义Tab样式选择胶囊滑块时，支持设置滑块的填充颜色和边框颜色。
     背景	当自定义Tab样式选择胶囊滑块时，支持设置背景的填充颜色和边框颜色。
     高度	当自定义Tab样式选择胶囊滑块时，支持设置Tab的高度为根据文本字号自适应或固定值。
     圆角	当自定义Tab样式选择胶囊滑块时，支持设置Tab的圆角大小。
     Tab底部分割线
     Tab位置	支持居左、居中和居右显示。
     Tab标题置顶	支持Tab标题置顶。 当Tab内容超过一屏需要滚动查看时，选中该选项后，标题区固定在屏幕最上方。
     Tab内条件跟随置顶	支持Tab内的查询控件置顶。 说明 仅当选中Tab标题置顶时，才支持选择Tab内条件跟随置顶。
     备注与尾注
     备注	选择是否在Tab标题旁设置备注，以及备注的具体内容。 说明 您需要在标题 > 样式中选中显示主题标题，备注内容才能正常显示。
     组件容器
     自定义背景填充	设置Tab组件容器的背景填充颜色，以及图片样式。 卡片颜色：支持纯色、渐变。 背景图片：支持使用系统素材，或自定义图片。
     圆角	设置Tab组件容器的圆角值。
     Tab高度	设置Tab组件容器的高度，支持以下两种方式。 自适应高度：Tab组件高度将根据仪表板页面布局进行自动调整。 手动设定：通过拖拽的形式调整Tab组件高度，且组件高度固定。
     自定义tab内边距	设置Tab组件中的内容与外边框之间的边距。
     自定义tab内组件边框	设置Tab组件内图表的边框颜色。

   • 在标签中，设置Tab标签页。

     

     • 新增Tab标签（①）：单击按钮，新增Tab标签。

     • 插入查询条件（②）：单击图标，弹窗Tab内查询条件设置页面进行查询条件的配置，具体操作请参见Tab内创建查询控件。

     • 复制（③）：单击图标，支持复制当前Tab标签页面。

     • 隐藏（④）：单击图标，支持隐藏当前Tab标签页面。

     • 删除（⑤）：单击图标，支持删除当前Tab标签页面。

     • 调整Tab标签顺序（⑥）：拖拽标签左侧图标，可调整当前列表内标签的排列顺序。

     • 标签宽度（⑦）：设置标签宽度为自适应或固定宽度。

     • 备注（⑧）：支持设置标签备注。

5. 管理Tab控件：单击Tab控件右上方图标，您可以进行复制、粘贴等操作。

   

   你也可以使用快捷快速操作Tab控件。不同操作系统下，快捷键有所差异。

   功能	快捷键（Windows系统）	快捷键（Mac系统）
   复制	Ctrl+C	Command（⌘）+C
   粘贴	Ctrl+V	Command（⌘）+V
   删除	Backspace（←）、Delete	Delete（⌫）