历史版本25 :Tab块 返回文档
编辑时间: 内容长度:图片数:目录数: 修改原因:

目录:

1. 问题描述编辑

Tab布局是8.0版本中新增的一个决策报表组件,每一个tab选项卡下对应的是一个自适应布局。
选择文件->新建决策报表,我们从决策报表工具栏中选择,将布局组件拖拽至决策报表主体中,会显示如下:
222

2. tab布局的使用编辑

2.1 新增tab
点击右侧的按钮可以新增tab
222
2.2 切换tab
默认提供一个显示在上方的tab切换样式,点击tab标题按钮,显示对应tab主体,设计器中正在编辑的按钮,默认显示是灰色
2.3 删除tab
点击对应tab标题上的X型按钮,可以删除该tab
注:可以新增无数个tab,当tab个数过多显示不下时,平均缩小每个tab的宽度,缩小时tab标题显示不下时用…显示,如果…也显示不下,则显示空的,即tab可以无限制的缩小。
2.4 移动tab
有时,我们在制作一张决策报表后,发现少了部分内容,需要重新插入tab块加以补充完整。但tab块默认是自动添加在最后面的。
右击所要移动的tab页,会弹出四个选项:移动到首页,往前移动,往后移动和移动到末尾。
点击往前移动,即可将最后的tab页向前移动,如下图所示:
222

3. tab布局的属性编辑

tab布局属性界面如下图:
222
3.1 控件名
Tab布局的控件名,默认为Tab0,后面序号依次增长。
3.2 样式
可以设置tab布局的框架样式,包括背景、内边距等,点击后面的自定义按钮,弹出如下界面:
222
3.3 tab轮播
222
勾选开启轮播后,tablayout0中的tab会开启轮播,可以设置轮播间隔,默认为1.8s,轮播效果如下:
222
注:也可以通过添加初始化后事件来实现tab轮播,可参考:决策报表示例之tab循环跳转
3.4 tab样式
模板新增tab样式模板,除了默认样式外,另外提供下面六种样式风格:
222
设置了样式模板之后,可以调整tab标题的显示位置、背景颜色、字体大小及风格和文本方向,如下:
222
3.5 tab标题高度
通过修改控件大小,可以调整tab标题块的高度,如下:
222
也可以通过拖拽来调整tab标题块的高度
222
注:tab标题块纵向排列时设置也是如此,只不过设置高度变成了设置宽度。
控件大小不可以超出tablayout的范围,否则弹出提示框,如下:
222
3.6 tab标题块隐藏
1)隐藏整个tab块标题
注:设计器9.0且jar包为2018-1-24及之后
选择tabpane0,设置控件大小为0或者拖动标题组件到上下线重合,即可隐藏tab标题,如下所示:
222
2)隐藏单个tab块标题
注:设计器9.0且jar包为2018-3-16及之后
初始状态下,tab的可见属性处于被勾选状态;
取消勾选后,预览时该tab不可见(包括tab内的内容)。
222
预览模板,可见“标题1”tab块被隐藏掉了,效果如下图所示:
222
注:此功能不支持移动端和h5方式预览。
3.7 当前编辑tab的属性
当前编辑tab属性界面如下:
222
1)控件名称
tab的控件名,默认为Tab0,后面序号依次增长。
2)内边距
tab主体部分,默认都是自适应布局,可以设置内边距,默认上下左右都为1;每个tab可以设置不同的内边距。
3)样式-自定义
可以修改tab初始、鼠标悬浮、鼠标点击的背景颜色
4)组件间隔
和内边距一样,每个tab主体部分可以设置各自的内部组件间隔。
5)标题
当前编辑的tab的标题,可以修改当前编辑tab的标题名,修改后设计区域会及时体现。

4. tab布局提供的方法接口编辑

1)tab组件显示
可以通过js控制tab布局显示哪个tab,当前控件选择tab组件,添加一个初始化后事件:
this.options.form.getWidgetByName('cardlayoutname').showCardByIndex(index)
注:cardlayoutname为tab块名称,默认为tabpane0;index为标题索引;
JS示例可参见:超链切换TAB标签
2)tab标题隐藏
注:设计器9.0、jar包为2018-3-16及之后
可以通过js控制部分tab标题块隐藏,当前控件选择tab组件,添加一个初始化后事件:
this.options.form.getWidgetByName("tabpane0").setTabVisible("tab1", false)
注:“tab1”在模板中不能重命!
JS示例可参见:js实现隐藏tab块标题

5. tab布局提供的事件编辑

初始化事件;Tab切换事件:切换tab的时候触发。

6. tab布局在PC浏览器中的效果编辑

222