Tab块

编辑
  • 文档创建者:文档助手1
  • 浏览次数:20710次
  • 编辑次数:32次
  • 最近更新:Kevin-s 于 2019-06-04
  • 1. 描述

    Tab 块是一个决策报表的组件,每一个 Tab 选项卡下对应的是一个自适应布局。

    点击文件>新建决策报表,我们从决策报表工具栏中选择,将 Tab 块组件拖拽至决策报表主体中,如下图:


    2. Tab 布局的使用

    2.1 新增 Tab

    点击右侧的按钮可以新增 Tab,如下图:


    2.2 切换 Tab

    默认提供一个显示在上方的 Tab 切换样式,点击 Tab 标题按钮,显示对应 Tab 主体,设计器中正在编辑的按钮,默认显示是灰色,如下图:


    2.3 删除 Tab

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


    2.4 移动 Tab

    有时,我们在制作一张决策报表后,发现少了部分内容,需要重新插入 Tab 块加以补充完整。但 Tab 块默认是自动添加在最后面的。

    右击所要移动的 Tab 页,会弹出四个选项:移动到首页,往前移动,往后移动和移动到末尾。

    点击往前移动,即可将最后的 Tab 页向前移动,如下图所示:


    3. Tab 布局的属性

    Tab 布局属性界面,如下图:


    tablayout 作为 Tab 布局的整体,tabpane 作为容纳 Tab 标签的面板,Tab 是每个 Tab 标签页(包括 Tab 按钮、Tab 标签页所在的空白设计区域)。

    3.1 控件名

    Tab 布局的控件名。

    3.2 样式

    可以设置 Tab 布局的框架样式,包括背景、边框等,点击后面的自定义按钮,弹出如下界面:


    3.3 Tab 轮播


    勾选开启轮播后,tablayout0 中的 tab 会开启轮播,可以设置轮播间隔,默认为 1.8s。

    注:也可以通过添加初始化后事件来实现 Tab 轮播,详细点击 JS 实现决策报表 Tab 块轮播

    3.4 Tab 样式

    除了默认样式外,还提供下面六种样式风格:


    设置了样式模板之后,可以调整 Tab 标题的显示位置、背景颜色、字体大小及风格和文本方向,如下:


    3.5 Tab 标题高度

    通过修改控件大小,可以调整 Tab 标题块的高度,如下:


    也可以通过拖拽来调整Tab标题块的高度,如下图:

    注:Tab 标题块纵向排列时设置也是如此,只不过设置高度变成了设置宽度。

    注:控件大小不可以超出 tablayout 的高度范围


    3.6 Tab 标题块隐藏

    1)隐藏整个 Tab 块标题

    选择 tabpane0,设置控件大小为 0 或者拖动标题组件到上下线重合,即可隐藏 Tab 标题,如下所示:


    2)隐藏单个Tab 块标题

    初始状态下,Tab 的可见属性处于被勾选状态;

    取消勾选后,预览时该 Tab 不可见(包括 Tab 内的内容)。


    预览模板,可见“标题 1”Tab 块被隐藏掉了,效果如下图所示:


    注:模板导出时,被隐藏的 Tab 不会被导出!例如:排在首位的 Tab 被隐藏,则导出时导出排在第二位的 Tab。

    3.7 当前编辑 Tab 的属性

    当前编辑 Tab 属性界面如下:


    1)控件名称

    Tab 的控件名,默认为 Tab0,后面序号依次增长。

    2)内边距

    Tab 主体部分,默认都是自适应布局,可以设置内边距,默认上下左右都为 1;每个 Tab 可以设置不同的内边距。

    3)样式-自定义

    可以修改 Tab 初始、鼠标悬浮、鼠标点击的背景颜色

    4)组件间隔

    和内边距一样,每个 Tab 主体部分可以设置各自的内部组件间隔。

    5)标题

    当前编辑的 Tab 的标题,可以修改当前编辑 Tab 的标题名,修改后设计区域会及时体现。

    4. Tab 布局提供的方法接口

    1)Tab 组件显示

    可以通过 JavaScript 控制 Tab 布局显示哪个 Tab,当前控件选择 Tab 组件,添加一个初始化后事件:

    this.options.form.getWidgetByName('cardlayoutname').showCardByIndex(index)

    注:cardlayoutname 为 Tab 块名称,默认为 tabpane0;index 为标题索引;

    JS 示例可参见:超链切换 Tab 标签

    2)Tab 标题隐藏

    可以通过 JavaScript 控制部分 Tab 标题块隐藏,当前控件选择 Tab 组件,添加一个初始化后事件:

    this.options.form.getWidgetByName("tabpane0").setTabVisible("tab1", false)

    注:“Tab1”在模板中不能重命!当模板导出时,被隐藏的 Tab 不会被导出!

    JS 示例可参见:JavaScript 实现隐藏 Tab 块标题

    5. Tab 布局提供的事件

    1)初始化事件;

    2)Tab 切换事件:切换 Tab 的时候触发。

    6. Tab 布局在 PC 浏览器中的效果



    7. 移动端

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



    附件列表


    主题: 决策报表应用
    标签: 暂无标签 编辑/添加标签
    如果您认为本文档还有待完善,请编辑

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

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