历史版本19 :Tab块 返回文档
编辑时间:
内容长度:图片数:目录数:
修改原因:
1. 问题描述编辑
Tab布局是8.0版本中新增的一个表单组件,每一个tab选项卡下对应的是一个自适应布局。选择文件->新建决策报表,我们从表单工具栏中选择,将布局组件拖拽至表单主体中,会显示如下:
2. tab布局的使用编辑
2.1 新增tab
点击右侧的按钮可以新增tab
2.2 切换tab
默认提供一个显示在上方的tab切换样式,点击tab标题按钮,显示对应tab主体,设计器中正在编辑的按钮,默认显示是灰色
2.3 删除tab
点击对应tab标题上的X型按钮,可以删除该tab
注:可以新增无数个tab,当tab个数过多显示不下时,平均缩小每个tab的宽度,缩小时tab标题显示不下时用…显示,如果…也显示不下,则显示空的,即tab可以无限制的缩小。
2.4 移动tab
有时,我们在制作一张表单后,发现少了部分内容,需要重新插入tab块加以补充完整。但tab块默认是自动添加在最后面的。
右击所要移动的tab页,会弹出四个选项:移动到首页,往前移动,往后移动和移动到末尾。
点击往前移动,即可将最后的tab页向前移动,如下图所示:
3. tab布局的属性编辑
tab布局属性界面如下图:
3.1 控件名
Tab布局的控件名,默认为Tab0,后面序号依次增长。
3.2 样式
可以设置tab布局的框架样式,包括背景、内边距等,点击后面的自定义按钮,弹出如下界面:
3.3 tab轮播
注:也可以通过添加初始化后事件来实现tab轮播,可参考表单示例之tab循环跳转。
3.4 宽度
tab布局的宽度;
3.5 高度
tab布局的高度;
3.6 当前编辑tab的属性
当前编辑tab属性界面如下:1)控件名称
tab的控件名,默认为Tab0,后面序号依次增长。
2)内边距
tab主体部分,默认都是自适应布局,可以设置内边距,默认上下左右都为1;每个tab可以设置不同的内边距。
3)样式-自定义
可以修改tab初始、鼠标悬浮、鼠标点击的背景颜色
4)组件间隔
和内边距一样,每个tab主体部分可以设置各自的内部组件间隔。
5)标题
当前编辑的tab的标题,可以修改当前编辑tab的标题名,修改后设计区域会及时体现。
4. tab布局提供的方法接口编辑
可以通过js控制tab布局显示哪个tab,当前控件选择tab组件,添加一个初始化后事件:
this.options.form.getWidgetByName('cardlayoutname').showCardByIndex(index)
注:cardlayoutname为tab块名称,默认为tabpane0;index为标题索引
5. tab布局提供的事件编辑
初始化事件;Tab切换事件:切换tab的时候触发。