Tab块

编辑
文档创建者:文档助手1 (67727 )     浏览次数:13832次     编辑次数:30次     最近更新:susie 于 2018-11-19     

目录:

1. 描述编辑

Tab块是一个决策报表的组件,每一个tab选项卡下对应的是一个自适应布局。
点击文件>新建决策报表,我们从决策报表工具栏中选择,将tab块组件拖拽至决策报表主体中,如下图:
222

2. tab布局的使用编辑

2.1 新增tab
点击右侧的按钮可以新增tab,如下图:
222
2.2 切换tab
默认提供一个显示在上方的tab切换样式,点击tab标题按钮,显示对应tab主体,设计器中正在编辑的按钮,默认显示是灰色,如下图:

222

2.3 删除tab
点击对应tab标题上的X型按钮,可以删除该tab,如下图:
222

2.4 移动tab
有时,我们在制作一张决策报表后,发现少了部分内容,需要重新插入tab块加以补充完整。但tab块默认是自动添加在最后面的。
右击所要移动的tab页,会弹出四个选项:移动到首页,往前移动,往后移动和移动到末尾。
点击往前移动,即可将最后的tab页向前移动,如下图所示:
222

3. tab布局的属性编辑

tab布局属性界面,如下图:
222
tablayout作为tab布局的整体,tabpane作为容纳tab标签的面板,tab是每个tab标签页(包括tab按钮、tab标签页所在的空白设计区域)。
3.1 控件名
Tab布局的控件名。
3.2 样式
可以设置tab布局的框架样式,包括背景、边框等,点击后面的自定义按钮,弹出如下界面:
222
3.3 tab轮播
222
勾选开启轮播后,tablayout0中的tab会开启轮播,可以设置轮播间隔,默认为1.8s。
注:也可以通过添加初始化后事件来实现tab轮播,详细点击JS实现决策报表tab块轮播
3.4 tab样式
除了默认样式外,还提供下面六种样式风格:
222
设置了样式模板之后,可以调整tab标题的显示位置、背景颜色、字体大小及风格和文本方向,如下:
222
3.5 tab标题高度
通过修改控件大小,可以调整tab标题块的高度,如下:
222
也可以通过拖拽来调整tab标题块的高度,如下图:
222
注:tab标题块纵向排列时设置也是如此,只不过设置高度变成了设置宽度。
注:控件大小不可以超出tablayout的高度范围

3.6 tab标题块隐藏
1)隐藏整个tab块标题
选择tabpane0,设置控件大小为0或者拖动标题组件到上下线重合,即可隐藏tab标题,如下所示:
222
2)隐藏单个tab块标题
初始状态下,tab的可见属性处于被勾选状态;
取消勾选后,预览时该tab不可见(包括tab内的内容)。
222
预览模板,可见“标题1”tab块被隐藏掉了,效果如下图所示:
222
注:模板导出时,被隐藏的tab不会被导出!例如:排在首位的tab被隐藏,则导出时导出排在第二位的tab。
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标题隐藏
可以通过js控制部分tab标题块隐藏,当前控件选择tab组件,添加一个初始化后事件:
this.options.form.getWidgetByName("tabpane0").setTabVisible("tab1", false)
注:“tab1”在模板中不能重命!当模板导出时,被隐藏的tab不会被导出!
JS示例可参见:js实现隐藏tab块标题

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

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

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

222

7. 移动端编辑

移动端支持部分tab功能,详细点击[通用]移动端tab布局


附件列表


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

文档内容仅供参考,如果你需要获取更多帮助,付费/准付费客户请咨询帆软技术支持
关于技术问题,您还可以前往帆软社区,点击顶部搜索框旁边的提问按钮
若您还有其他非技术类问题,可以联系帆软传说哥(qq:1745114201

此页面有帮助吗?只是浏览 [ 去社区提问 ]