[通用]TAB 组件多样化

编辑
  • 文档创建者:susie
  • 浏览次数:2036次
  • 编辑次数:11次
  • 最近更新:Wendy123456 于 2019-11-22
  • 1. 概述

    1.1 版本

    报表服务器版本JARApp版本HTML5 移动端展现插件
    10.02019-01-0910.1V6.1

    1.2 应用场景

    用户在实现不同 Tab 系列下不同维度的数据分析时,多样化的 Tab 组件可供用户自定义设置及选择 ,使多维度模板更加清晰和简洁。

    1.3 功能简介

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

    2. 操作步骤

    2.1 模板准备

    1)在 FineReport 设计器中,打开 %FR_HOME%\webapps\webroot\WEB-INF\reportlets\doc\frm\组件多样化.frm 模板。

    模板下载:组件多样化.frm

    2)在右侧属性面板「控件设置」中选中 tabpane0,点击移动端>样式模板,可对 Tab 组件样式进行自定义设置 。如下图所示:

    1574323966787802.png

    2.2 默认

    2.2.1 界面介绍

    「样式模板」选择默认,如下图所示:

    1574324489780088.png

    2.2.2 移动端效果

    1)APP

    1574324385752189.jpg


    2)HTML5

    1574324399992095.jpg

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

    2.3 上菜单式

    2.3.1 界面介绍

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

    1574325791854783.gif

    • Tab 样式:包含标准和自定义两个选项,默认为标准。

    • 显示间隔:包含间隔固定和标题宽度固定两个选项。

    • 背景:可对初始背景和选中背景选择颜色。

    • 字符:可对初始字符和选中字符进行自定义设置。

    • 下边框:对 Tab 组件下边框的线型和颜色进行设置。

    • 下划线:对选中 Tab 块的下划线的线型和颜色进行设置。

    2.3.2 移动端效果

    1)APP

    1574326391414524.gif

    2)HTML5

    1574326749624134.gif

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

    2.4 下菜单式

    当 FineReport 设计器、APP 版本、HTML5 插件版本满足下表所示的要求时,下菜单式设置的图标更加清晰

    报表服务器版本JARAPP 版本HTML5 移动端展现插件支持功能
    10.02019-12-0410.4.45V10.4.45
    下菜单式图标优化

    2.4.1 界面介绍

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

    1574409436151527.gif

    • Tab 样式:包含标准和自定义两个选项,默认为标准。

    • 背景:可对初始背景和选中背景选择颜色。

    • 字符:可对初始字符和选中字符进行自定义设置。

    • 图标:支持自定义添加图标。

    • 分割线:可设置相邻 Tab 块之间分割线的线型和颜色。

    下菜单式支持自定义添加图标,选中要设置图标的 Tab 块对应的图标,点击编辑 ,在选择图标界面可选择图标,点击确定

    设置方法如下图所示:

    1574400877438727.png

    用户可在「选择图标」界面中点击增加按钮,自定义上传图标图片,再进行选择。

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

    2.4.2 移动端效果

    1)APP

    1574410123820551.gif

    2)HTML5

    1574410148946664.gif

    2.5 滑动式

    2.5.1 界面介绍

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

    1574410231793738.png

    • Tab 样式:包含标准和自定义两个选项,默认为标准。

    • 背景:可填充背景颜色。

    • 字符:可对初始字符进行自定义设置。

    • 圆点指示器:可填充初始圆点和选中圆点的颜色。

    2.5.2 移动端效果

    1)APP


    1574410911481304.gif

    2)HTML5

    1574411292496764.gif

    3. Tab标题冻结

    当 Tab 页内容超过一屏(一屏的高度是扣除掉底部工具栏的高度)时, 默认样式上菜单式支持标题位置冻结。

    • Tab 标题冻结,只在手机重布局且采用上菜单式或默认样式时生效,仅竖屏生效。

    • 手机重布局下绝对画布块中不支持 Tab 标题冻结。

    • 非手机重布局下不支持 Tab 标题冻结,包括竖屏和横屏。

    附件列表


    主题: 移动端应用
    标签: 暂无标签
    如果您认为本文档还有待完善,请编辑

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

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