1. 描述编辑
Tab 块是一个决策报表的组件,每一个 Tab 选项卡下对应的是一个自适应布局。
点击文件>新建决策报表,我们从决策报表工具栏中选择,将 Tab 块组件拖拽至决策报表主体中,如下图:
2. Tab 布局的使用编辑
2.1 新增 Tab
点击右侧的按钮可以新增 Tab,如下图:
2.2 切换 Tab
默认提供一个显示在上方的 Tab 切换样式,点击 Tab 标题按钮,显示对应 Tab 主体,设计器中正在编辑的按钮,默认显示是灰色,如下图:2.3 删除 Tab
点击对应 Tab 标题上的X型按钮,可以删除该 Tab,如下图:
2.4 移动 Tab
有时,我们在制作一张决策报表后,发现少了部分内容,需要重新插入 Tab 块加以补充完整。但 Tab 块默认是自动添加在最后面的。
右击所要移动的 Tab 页,会弹出四个选项:移动到首页,往前移动,往后移动和移动到末尾。
点击往前移动,即可将最后的 Tab 页向前移动,如下图所示:
3. 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 的标题名,修改后设计区域会及时体现。
4. 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 块标题。
5. Tab 布局提供的事件编辑
1)初始化事件;
2)Tab 切换事件:切换 Tab 的时候触发。