tab布局

编辑
文档创建者:文档助手1 (67727 )     浏览次数:9489次     编辑次数:22次     最近更新:jiangsr 于 2018-02-01     

目录:

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
通过修改控件大小,可以调整tab标题块的高度,如下:
222
也可以通过拖拽来调整tab标题块的高度
222
注:tab标题块纵向排列时设置也是如此,只不过设置高度变成了设置宽度。
若此处设置控件大小为0或者拖动到上下线重合,可以隐藏tab标题;且控件大小不可以超出tablayout的范围,否则弹出提示框,如下:
222
3.5 当前编辑tab的属性
当前编辑tab属性界面如下:
222
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的时候触发。

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

222

附件列表


主题: 决策报表设计
如果您认为本文档还有待完善,请编辑

文档内容仅供参考,如果你需要获取更多帮助,请咨询帆软技术支持
关于技术问题,您还可以通过帆软论坛获取帮助,论坛上有非常多的大神,有些水平比帆软工程师还要高哦。
若您还有其他非技术类问题,可以联系帆软传说哥(qq:1745114201

本文档是否有用?
谢谢! 我们非常感谢您的反馈。
提交反馈: