Tab

通过添加Tab控件,您可以在仪表板中以标签页的形式展示多张图表。本文为您介绍如何创建并设置Tab控件。

已创建好仪表板。请参见新建仪表板可视化图表概述

添加Tab控件

  1. 登录Quick BI控制台

  2. 进入仪表板编辑页面。

  3. 在顶部菜单栏单击image图标,添加Tab控件。

    image.png

  4. 在仪表板编辑页面,您可以进行以下操作:

编辑Tab控件

  • 自定义Tab标签页名称。

    在画布上单击Tab标题,输入标题名称。

    image

  • 新增Tab标签页。

    image

  • 调整标签页位置。

    鼠标悬浮至目标Tab标签页,当标签页左侧出现1图标时,拖拽调整标签页的位置。

    tab拖拽

  • 复制当前Tab标签页。

    鼠标悬浮至目标Tab标签页,单击标签页右侧1图标选择复制,复制标签页。

    image

  • 删除当前Tab标签页。

    鼠标悬浮至目标Tab标签页,单击标签页右侧1图标选择删除,删除标签页。

    image

设置Tab控件样式

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

    样式内容

    描述说明

    标题

    设置是否显示主标题,配置标题内容、文本样式、分割线

    image.png

    Tab样式

    自定义Tab样式

    支持自定义Tab样式下划线分割线选中块胶囊滑块。

    111

    Tab内文字

    自定义Tab样式选择下划线分割线选中块时,支持设置选中字体样式以及未选中字体样式

    image

    文本

    自定义Tab样式选择胶囊滑块时,支持设置文本字号未选中以及选中字体的样式image

    滑块

    自定义Tab样式选择胶囊滑块时,支持设置滑块的填充颜色和边框颜色。image.png

    背景

    自定义Tab样式选择胶囊滑块时,支持设置背景的填充颜色和边框颜色。image.png

    高度

    自定义Tab样式选择胶囊滑块时,支持设置Tab的高度为根据文本字号自适应或固定值。image.png

    圆角

    自定义Tab样式选择胶囊滑块时,支持设置Tab的圆角大小。image.png

    Tab底部分割线

    image.png

    Tab位置

    支持居左、居中居右显示。

    11.gif

    Tab标题置顶

    支持Tab标题置顶

    当Tab内容超过一屏需要滚动查看时,选中该选项后,标题区固定在屏幕最上方。

    12.gif

    Tab内条件跟随置顶

    支持Tab内的查询控件置顶。

    13.gif

    说明

    仅当选中Tab标题置顶时,才支持选择Tab内条件跟随置顶

    备注与尾注

    备注

    选择是否在Tab标题旁设置备注,以及备注的具体内容。

    111

    说明

    您需要在标题 > 样式中选中显示主题标题,备注内容才能正常显示。image

    组件容器

    自定义背景填充

    设置Tab组件容器的背景填充颜色,以及图片样式。

    • 卡片颜色:支持纯色、渐变。111

    • 背景图片:支持使用系统素材,或自定义图片。111

    圆角

    设置Tab组件容器的圆角值。image

    Tab高度

    设置Tab组件容器的高度,支持以下两种方式。

    • 自适应高度:Tab组件高度将根据仪表板页面布局进行自动调整。

    • 手动设定:通过拖拽的形式调整Tab组件高度,且组件高度固定。

    自定义tab内边距

    设置Tab组件中的内容与外边框之间的边距。image

    自定义tab内组件边框

    设置Tab组件内图表的边框颜色。111

  • 标签中,设置Tab标签页。

    image.png

    • 新增Tab标签(①):单击按钮,新增Tab标签。

    • 插入查询条件(②):单击image图标,弹窗Tab内查询条件设置页面进行查询条件的配置,具体操作请参见Tab内创建查询控件

    • 复制(③):单击image图标,支持复制当前Tab标签页面。

    • 隐藏(④):单击image图标,支持隐藏当前Tab标签页面。

    • 删除(⑤):单击image图标,支持删除当前Tab标签页面。

    • 调整Tab标签顺序(⑥):拖拽标签左侧image图标,可调整当前列表内标签的排列顺序。

    • 标签宽度(⑦):设置标签宽度为自适应或固定宽度。

    • 备注(⑧):支持设置标签备注。

管理Tab控件

单击Tab控件右上方更多图标,您可以进行复制、粘贴等操作。

image.png

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

功能

快捷键(Windows系统)

快捷键(Mac系统)

复制

Ctrl+C

Command(⌘)+C

粘贴

Ctrl+V

Command(⌘)+V

删除

Backspace(←)、Delete

Delete(⌫)