Tab块是一个决策报表的组件，每一个Tab选项卡下对应的是一个自适应布局。

点击文件>新建决策报表，我们从决策报表工具栏中选择，将Tab块组件拖拽至决策报表主体中，如下图：

2.1 新增Tab

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

2.2 切换Tab

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

2.3 删除Tab

点击对应Tab标题上的X型按钮，可以删除该Tab，如下图：

2.4 移动Tab

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

右击所要移动的Tab页，会弹出四个选项：移动到首页，往前移动，往后移动和移动到末尾。

点击往前移动，即可将最后的Tab页向前移动，如下图所示：

Tab布局属性界面，如下图：

tablayout作为Tab布局的整体，tabpane作为容纳Tab标签的面板，Tab是每个Tab标签页（包括Tab按钮、Tab标签页所在的空白设计区域）。

3.1 控件名

Tab布局的控件名。

3.2 样式

可以设置Tab布局的框架样式，包括背景、边框等，点击后面的自定义按钮，弹出如下界面：

3.3 Tab轮播

勾选开启轮播后，tablayout0中的tab会开启轮播，可以设置轮播间隔，默认为1.8s。

注：也可以通过添加初始化后事件来实现Tab轮播，详细点击JS实现决策报表Tab块轮播

3.4 tab样式

除了默认样式外，还提供下面六种样式风格：

设置了样式模板之后，可以调整Tab标题的显示位置、背景颜色、字体大小及风格和文本方向，如下：

3.5 Tab标题高度

通过修改控件大小，可以调整Tab标题块的高度，如下：

也可以通过拖拽来调整Tab标题块的高度，如下图：

注：Tab标题块纵向排列时设置也是如此，只不过设置高度变成了设置宽度。

注：控件大小不可以超出tablayout的高度范围

3.6 Tab标题块隐藏

1）隐藏整个Tab块标题

选择tabpane0，设置控件大小为0或者拖动标题组件到上下线重合，即可隐藏Tab标题，如下所示：

2）隐藏单个Tab块标题

初始状态下，Tab的可见属性处于被勾选状态；

取消勾选后，预览时该Tab不可见（包括Tab内的内容）。

预览模板，可见“标题1”Tab块被隐藏掉了，效果如下图所示：

注：模板导出时，被隐藏的Tab不会被导出！例如：排在首位的Tab被隐藏，则导出时导出排在第二位的Tab。

3.7 当前编辑tab的属性

当前编辑tab属性界面如下：

1）控件名称

Tab的控件名，默认为Tab0，后面序号依次增长。

2）内边距

Tab主体部分，默认都是自适应布局，可以设置内边距，默认上下左右都为1；每个Tab可以设置不同的内边距。

3）样式-自定义

可以修改Tab初始、鼠标悬浮、鼠标点击的背景颜色

4）组件间隔

和内边距一样，每个Tab主体部分可以设置各自的内部组件间隔。

5）标题

当前编辑的Tab的标题，可以修改当前编辑Tab的标题名，修改后设计区域会及时体现。

1）Tab组件显示

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

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

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

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

2）Tab标题隐藏

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

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

注：“tab1”在模板中不能重命！当模板导出时，被隐藏的Tab不会被导出！

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

1）初始化事件；

2）Tab切换事件：切换Tab的时候触发。

移动端支持部分Tab功能，详细点击[通用]移动端Tab布局