1.1 应用场景

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

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

1.2 功能简介

Tab 块可实现多维度切换，如下图所示：

2.1 新建 Tab 块

注：决策报表中才能使用 Tab 块。

1）在 FineReport 设计器中点击文件>新建决策报表。

2）将「空白块」中的 Tab 块拖入到决策报表中，如下图所示：

2.2 新增 Tab 页

点击右侧的按钮可以新增 Tab，如下图所示：

2.3 切换 Tab 页

默认提供一个显示在上方的 Tab 切换样式，点击 Tab 标题按钮，显示对应 Tab 主体。设计器中正在编辑的按钮，默认显示为灰色，如下图所示：

2.4 删除 Tab 页

如下图所示：

2.5 移动 Tab 页

有时在制作一张决策报表后，发现少了部分内容，需要重新插入 Tab 块加以补充完整。但 Tab 块默认是自动添加在最后面的。

右键点击需要移动的 Tab 页，会弹出四个选项：移动到首位，往前移动，往后移动和移动到末尾。如下图所示：

Tab 块分为3个层级，可以分别设置属性：

• tablayout 是 Tab 块的整体布局

• tabpane 是容纳 Tab 页标签的面板

• Tab 是每个 Tab 标签页，包括 Tab 按钮、Tab 标签页所在的空白设计区域

3.1 Tab 块

tablayout 属性如下图所示：

具体设置如下表所示：

3.2 Tab 标签面板

3.2.1 PC 端

tabpane PC 端属性如下图所示：

具体属性如下图所示：

属性		简介
组件名称		Tab 标签面板的名称，可自定义修改
样式模板	默认
	卡片式
	锦旗
	书签式
	菜单式
	五边形
	梯形
显示位置		Tab 标签面板的位置可选择：上、下、左、右
背景/字体		自定义 Tab 标题背景、Tab 标题字号、字体等
文本方向	横排
	纵排
坐标尺寸		通过修改控件大小，可自定义 Tab 标签面板的高度 也可以通过拖拽来调整Tab标题块的高度，如下图所示： 注1：Tab 标题块纵向排列时，可同理设置宽度 注2：控件大小不可以超出 tablayout 的高度范围 注3：控件大小为 0 ，或拖动标题组件到上下线重合时，即可隐藏 Tab 标题

3.2.2 移动端

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

移动端 Tab 组件样式包含上菜单式、下菜单式、滑动式、联排式，具体设置请参见：［通用］Tab 组件多样化

3.3 Tab 页

当前编辑 Tab 属性界面如下图所示：

具体设置如下表所示：

在决策报表中点击模板>表单报表块自适应属性， 如下图所示：

注：更多自适应属性内容请参见：自适应属性

选择不同的自适应属性时， Tab 页的加载逻辑不同，详情如下表所示：

5.1 Tab 组件显示

可以通过 JavaScript 控制 Tab 布局显示哪个 Tab，当前控件选择 Tab 组件，添加一个初始化后事件：

this.options.form.getWidgetByName('cardlayoutname').showCardByIndex(index)

注：cardlayoutname 为 Tab 块名称，默认为 tabpane0；index 为标题索引。

JS 示例请参见：超链切换 Tab 标签

5.2 Tab 标题隐藏

可以通过 JavaScript 控制部分 Tab 标题块隐藏，当前控件选择 Tab 组件，添加一个初始化后事件：

this.options.form.getWidgetByName("tabpane0").setTabVisible("tab1", false)

注：“Tab1”在模板中不能重名。当模板导出时，被隐藏的 Tab 不会被导出。

JS 示例可参见：JavaScript 实现隐藏 Tab 块标题