1. 概述
1.1 版本
| 报表服务器版本 |
|---|
| 11.0 |
1.2 应用场景
模板维度、数据较多，又不希望模板页面过长时，可使用 Tab 块，手动切换维度，且可以展示每个维度的标题。
同一个页面有多个明细数据表，不希望每一个都平铺展示出来，可使用 Tab 块，根据实际需要展示数据。
1.3 功能简介
针对您想要分析的某组数据，可以从使用 Tab 设置多个 Tab，分别从多个维度来分析这组数据，查看时切换 Tab 即可，非常方便。
例如：想要分析某工厂的生产情况，可以从产品产量维度、生产线产量维度、库存维度来分析，如下图所示：
2. 操作说明
首先我们点击设计器左上角「新建决策报表」，新建一个空白模板。将 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. Tab 属性
3.1 Tab 块整体属性
选中 tablayout 即 Tab 块整体，可在下方属性面板设置其属性。如下图所示：
具体属性介绍如下表所示：
| 属性 | 属性介绍 |
|---|---|
| 组件名称 | Tab 块名称默认为 tablayout+数字后缀，从 0 依次累加，支持修改，但不支持为空或重复 |
| 坐标·尺寸 |
|
| 主体填充 | 可设置 Tab 页背景填充为没有背景、颜色、图片或渐变色，如下图所示：
|
| 外沿样式 | 可设置 Tab 块整体的外沿样式：
|
| Tab 轮播 | 勾选开启轮播后，Tab 页会开启轮播，可以设置轮播间隔，默认为 1.8 s |
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 个设置项，如下图所示：
各设置项及说明如下表所示：
| 设置项 | 说明 |
|---|---|
| 显示方式 | 占位显示：圆点指示器则显示在 Tab 块内容外面 悬浮显示：圆点指示器则悬浮在 Tab 块内容上方
|
| 初始填充 | Tab 块对应圆点的初始填充色 |
| 选中填充 | Tab 块对应圆点的选中填充色，即高亮色 |
注1：移动端样式模板选择「滑动式」时，圆点的初始填充色和选中填充色按照「滑动式>tab样式」的设置生效，此处的「初始填充」和「选中填充」设置不生效。
注2：不能使用圆点指示器来滑动切换 Tab 块，它只是作提示用。
不同样式模板下圆点指示器的显示位置如下表所示：
| 样式模板 | 圆点指示器位置 |
|---|---|
| 默认 | 居中显示在下方 |
| 上菜单式 | 居中显示在下方 |
| 下菜单式 | 居中显示在上方 |
| 滑动式 | 显示在左上角 |
| 联排式 | 居中显示在下方 |
3.3 Tab 页
处于编辑状态下的 Tab 页，标题默认灰色，如下图「标题0」，Tab 属性界面如下图所示：
具体设置如下表所示：
| 属性 | 简介 |
|---|---|
| 组件名称 | 组件名称默认为 Tab + XY。
支持修改，但不支持为空或重复 |
| 可见 | 「可见」按钮默认勾选，取消勾选后，设计器界面按钮灰化，预览模板时该 Tab 及其内容不可见 注：模板导出时，被隐藏的 Tab 不会被导出 |
| 样式 | 可以自定义当前 Tab 页标题的初始、鼠标悬浮、选中的背景，均支持设置为颜色、图片或渐变色 注：移动端只支持设置「初始背景」和「鼠标点击背景」，且只支持显示颜色，若设置为图片，则显示为默认颜色 |
| 内边距 | Tab 设计区域部分，为自适应布局模式，组件添加时自动充满 Tab 页，可以设置内边距
|
| 组件间隔 | 和内边距一样，每个 Tab 页可以设置各自的内部组件间隔 |
| 标题 | 当前编辑的 Tab 的标题，可以修改当前编辑 Tab 的标题名，修改后设计区域会及时体现 |
注：在 Tab 页内嵌套 子Tab，子Tab 组件名称的数字后缀依次累加。如下图所示：
上一篇：组件复用
