1.1 版本

1.2 应用场景

• 模板维度、数据较多，又不希望模板页面过长时，可使用 Tab 块，手动切换维度，且可以展示每个维度的标题。

• 同一个页面有多个明细数据表，不希望每一个都平铺展示出来，可使用 Tab 块，根据实际需要展示数据。
  

1.3 功能简介

针对您想要分析的某组数据，可以从使用 Tab 设置多个 Tab，分别从多个维度来分析这组数据，查看时切换 Tab 即可，非常方便。

例如：想要分析某工厂的生产情况，可以从产品产量维度、生产线产量维度、库存维度来分析，如下图所示：

首先我们点击设计器左上角「新建决策报表」，新建一个空白模板。将 body 的布局方式改为「绝对布局」，将 Tab 块拖入 body 中。

注：11.0.3 版本及之后的设计器中，body 布局 中自适应相关设置由右侧属性面板移至菜单栏「模板>PC端自适应属性」中。

如下图所示：

添加 Tab 块后，在组件设置列表可以看到一个 Tab 块包含 3 个层级：

• tablayout ： Tab 块的整体

• tabpane ：容纳所有 Tab 页标题的面板

• Tab ：一个 Tab 页的设计区域，支持添加组件

选中 Tab 块后，点击组件右上角的编辑按钮，进入编辑状态，可进行添加、删除、移动 Tab 页等操作。

1）新增：点击 Tab 页标题面板右侧的  按钮可以新增 Tab 页，默认自动添加在最后面。

2）移动：使用鼠标右键单击需要移动的 Tab 页，弹出四个选项：移动到首位，往前移动，往后移动和移动到末尾。

3）删除：点击 Tab 标题右上角的 × 按钮，可删除 Tab 页，也可在组件设置列表中选中后直接删除。

3.1 Tab 块整体属性

选中 tablayout 即 Tab 块整体，可在下方属性面板设置其属性。如下图所示：

具体属性介绍如下表所示：

3.2 Tab 页标题面板

选中 tabpane 即 Tab 页标题面板。如下图所示：

3.2.1 PC 端

tabpane PC 端属性如下表所示：

属性		简介
组件名称		组件名称默认为 tabpane+数字后缀，从 0 依次累加，支持修改，但不支持为空或重复
坐标·尺寸		可通过修改数值或拖拽标题面板，调整 Tab 标题面板的高度，如下图所示： 注1：组件大小不可以超出 tablayout 的高度范围 注2：组件大小为 0 ，或拖动标题组件到上下线重合时，即可隐藏 Tab 标题
样式模板	默认
	卡片式
	锦旗
	书签式
	菜单式
	五边形
	梯形
显示位置		Tab 页标题面板的位置可选择：上、下、左、右
背景/字体		自定义 Tab 标题背景、Tab 标题字号、字体等
文本方向	横排
	纵排

3.2.2 移动端

tabpane 移动端属性如下图所示：

样式模板详情参见：[通用]决策报表TAB标签面板样式

内边距详情参见：[通用]决策报表移动端设置内边距及组件间隔

显示该在组件下的层级导航详情参见：[通用]组件导航快速定位

组件间隔详情参见：[通用]决策报表移动端设置内边距及组件间隔

1）显示标题

• 「显示标题」控制是否显示 Tab 标题栏。

• 默认勾选，即默认显示标题；取消勾选则不显示 Tab 标题栏，也就无法通过点击 Tab 标题来切换 Tab 块，效果如下图所示：

2）支持滑动切换

• 「支持滑动切换」控制预览时是否可以左右滑动 Tab 内容来切换 Tab 块。

• 默认不勾选，即不可通过滑动 Tab 内容切换 Tab 标签页；勾选后，可通过滑动 Tab 内容切换 Tab 标签页，效果如下图所示：

3）显示圆点指示器

• 「圆点指示器」即提示有几个 Tab 块，切换到哪个 Tab 块，对应的圆点会高亮。

• 默认不勾选，即默认不显示圆点指示器；勾选后会出现 3 个设置项，如下图所示：

• 各设置项及说明如下表所示：

注1：移动端样式模板选择「滑动式」时，圆点的初始填充色和选中填充色按照「滑动式>tab样式」的设置生效，此处的「初始填充」和「选中填充」设置不生效。

注2：不能使用圆点指示器来滑动切换 Tab 块，它只是作提示用。

• 不同样式模板下圆点指示器的显示位置如下表所示：

3.3 Tab 页

处于编辑状态下的 Tab 页，标题默认灰色，如下图「标题0」，Tab 属性界面如下图所示：

具体设置如下表所示：

注：在 Tab 页内嵌套 子Tab，子Tab 组件名称的数字后缀依次累加。如下图所示：