历史版本16 :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布局的控件名,默认为tabpane0,后面序号依次增长。
3.2 样式
可以设置tab布局的框架样式,包括边框、背景,点击后面的编辑按钮,弹出如下界面:
222
3.3 tab轮播
222
勾选开启轮播后,tabpane0中的tab会开启轮播,可以设置轮播间隔,默认为1.8s,轮播效果如下:
注:也可以通过添加初始化后事件来实现tab轮播,可参考表单示例之tab循环跳转
3.4 宽度
tab布局的宽度;
3.5 高度
tab布局的高度;
3.6 当前编辑tab的属性
当前编辑tab属性界面如下:
222
1)控件名
tab的控件名,默认为tab0,后面序号依次增长。
2)内边距
tab主体部分,默认都是自适应布局,可以设置内边距,默认上下左右都为1;每个tab可以设置不同的内边距。
3)组件间隔
和内边距一样,每个tab主体部分可以设置各自的内部组件间隔。
4)标题
当前编辑的tab的标题,可以修改当前编辑tab的标题名,修改后设计区域会及时体现。

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

可以通过js控制tab布局显示哪个tab,当前控件选择tab组件,添加一个初始化后事件:
this.options.form.getWidgetByName('cardlayoutname').showCardByIndex(index)
注:cardlayoutname为tab块名称,默认为tabpane0;index为标题索引

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

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

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

222