Tab块

1.1 应用场景

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

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

1.2 功能简介

针对您想要分析的某组数据，可以从使用 Tab 设置多个 Tab，分别从多个维度来分析这组数据，查看时切换 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 组件，添加一个初始化后事件：

例如：决策报表中展示 tablayout0 对应的 Tab 块的第 2 个 Tab 页，代码如下：

setTimeout(function(){
	_g().getWidgetByName("tabpane0").showCardByIndex(1);
  }, 50)

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

5.2 隐藏某个 Tab 页

可以通过 JavaScript 隐藏掉某个 Tab 页，当前控件选择 Tab 组件，添加一个初始化后事件：

例如：决策报表中隐藏 tabpane0 中名为“Tab1”的 Tab 页：

setTimeout(function(){
	_g().getWidgetByName("tabpane0").setTabVisible("Tab1", false);
  }, 50)

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

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