[通用]TAB 标签面板样式

  • 文档创建者:susie
  • 编辑次数:24次
  • 最近更新:Carly 于 2020-07-08
  • 1. 概述

    1.1 版本

    报表服务器版本JAR 包版本App 版本HTML5 移动端展现插件新增功能
    10.02019-12-0510.4.49V10.4.49

    上菜单式支持设置「Tab 最小宽度」

    下菜单式支持自定义图标

    ----V10.4.66
    上菜单式支持 HTML5 端冻结标签面板
    2020-04-26
    10.4.69V10.4.69新增 Tab 样式:联排式 
    2020-07-08
    10.4.80V10.4.80联排式 Tab 支持上下边距调整

    1.2 应用场景

    在实现不同 Tab 系列下不同维度的数据分析时,用户可选择并设置多样化的 Tab 标签面板样式,使多维度模板更加清晰和简洁。

    1.3 功能简介

    移动端提供更为丰富的 Tab 效果,共有 5 类移动端 Tab 样式:默认上菜单式下菜单式滑动式联排式

    2. 设置方式

    打开决策报表,添加 Tab 块,点击控件设置>tabpane0>移动端>样式模板,可对 Tab 组件样式进行自定义设置 。如下图所示:

    2020-06-29_11-10-15.png

    3. 样式简介

    3.1 默认

    「样式模板」选择默认,移动端预览效果如下图所示:

    注:「样式模板」为默认时,若 Tab 块标题较长,可能会显示不全。

    2020-06-29_11-17-11.png

    3.2 上菜单式

    3.2.1 属性设置

    「样式模板」选择上菜单式,Tab 样式为自定义,可设置选中背景,初始字符和选中字符的颜色等,如下图所示:

    2020-06-29_11-21-15.png

    上菜单式「设置」项各属性值介绍如下表所示:

    属性备注
    Tab 样式包含标准自定义两个选项,默认为标准
    显示间隔包含间隔固定标题宽度固定两个选项,当选择标题宽度固定时,可设置 Tab 最小宽度;Tab 最小宽度默认为 92 ,不可小于 0 
    背景可对「初始背景」和「选中背景」选择颜色
    字符可对「初始字符」和「选中字符」进行自定义设置
    下边框对 Tab 组件下边框的「线型」和「颜色」进行设置
    下划线对选中 Tab 块的下划线的「线型」和「颜色」进行设置

    3.2.2 移动端效果

    Tab 样式选择标准时,移动端预览效果如下图所示:

    注:当 Tab 标题过长时,使用上菜单式标题不会被截断。

    4.gif

    3.3 下菜单式

    3.3.1 界面介绍

    「样式模板」选择下菜单式,Tab 样式为自定义,如下图所示:

    image.png

    下菜单式「设置」项各属性值介绍如下表所示:

    属性备注
    Tab 样式包含标准自定义两个选项,默认为标准
    背景可对「初始背景」和「选中背景」选择颜色
    字符可对「初始字符」和「选中字符」进行自定义设置
    图标支持自定义添加图标
    分割线可设置相邻 Tab 块之间分割线的「线型」和「颜色」

    下菜单式支持自定义添加图标,选中要设置图标的 Tab 块位置,点击编辑

    用户可选择设计器自带的图标,或上传自定义图标图片。如下图所示:

    注:自定义上传图标图片时,建议使用 48×48 规格的 PNG 图片。

    2020-06-29_11-27-30.png

    3.3.2 移动端效果

    Tab 样式选择为标准时,移动端预览效果如下图所示:

    12.gif

    3.4 滑动式

    3.4.1 界面介绍

    「样式模板」选择滑动式,Tab 样式为自定义,如下图所示:

    1587623370109785.png

    滑动式「设置」项各属性值介绍如下表所示:

    属性备注
    Tab 样式包含标准自定义两个选项,默认为标准
    背景可填充「背景颜色」
    字符可对「初始字符」进行自定义设置
    圆点指示器可填充「初始圆点」和「选中圆点」的颜色

    3.4.2 移动端效果

    Tab 样式选择为标准时,移动端预览效果如下图所示:

    注1:「滑动式」下,不支持 Tab 内图表块、报表块组件内部上下左右滑动,需要放大后触发组件内部滑动

    注2:「滑动式」下,Tab 内部的图表组件不支持激活

    02.gif

    3.5 联排式

    3.5.1 界面介绍

    「样式模板」选择联排式,Tab 样式为自定义,如下图所示:

    image.png

    联排式「设置」项各属性值介绍如下表所示:

    属性备注
    Tab 样式包含标准自定义两个选项,默认为标准
    按钮边距

    可自定义设置按钮左右边距

    JAR 包在 2020-07-08 之后的设计器,支持自定义设置按钮上下边距

    按钮背景自定义选择按钮的「初始背景」和「选中背景」
    边框可对按钮边框的线型、颜色、圆角进行设置
    字符可对「初始字符」和「选中字符」进行自定义设置

    3.5.2 移动端效果

    Tab 样式选择为标准时,移动端预览效果如下图所示:

    04.gif

    4. Tab 标签面板冻结

    在使用多 Tab 时,单个 Tab 内容过多,下拉后无法快速切换 Tab标题。为了方便用户切换 Tab 页,移动端 Tab 标签面板支持冻结。

    移动端属性选择重布局竖屏显示模板时,上下滑动 Tab 页:

    • Tab 样式为上菜单式默认样式联排式时,Tab 标签面板始终固定在页面顶端

    • Tab 样式为滑动式时,无需显示Tab 标签面板即可切换标签页

    • Tab 样式为下菜单式时,Tab 标签面板始终固定在页面底端

    附件列表


    主题: 移动端应用
    • 有帮助
    • 没帮助
    • 只是浏览
    • 评价文档,奖励 1 ~ 100 随机 F 豆!