目录:
1. 概述编辑
1.1 版本
报表服务器版本 | JAR 包版本 | App 版本 | HTML5 移动端展现插件 | 支持功能 |
---|---|---|---|---|
10.0 | 2019-01-09 | 10.1 | V6.1 | -- |
2019-12-05 | 10.4.49 | V10.4.49 | 上菜单式可设置「Tab 最小宽度」、下菜单式图标优化 |
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 组件样式进行自定义设置 。如下图所示:
2.2 默认
2.2.1 界面介绍
「样式模板」选择默认,如下图所示:
2.2.2 移动端效果
1)App
2)HTML5
注:「样式模板」为默认时,Tab 块标题可能会显示不全。
2.3 上菜单式
2.3.1 界面介绍
「样式模板」选择 上菜单式,Tab 样式为自定义,设置选中背景,初始字符和选中字符的颜色(用户可自定义设置),如下图所示:
上菜单式「设置」项各属性值介绍如下表所示:
属性 | 备注 |
---|---|
Tab 样式 | 包含标准和自定义两个选项,默认为标准 |
显示间隔 | 包含间隔固定和标题宽度固定两个选项,当选择标题宽度固定时,可设置 Tab 最小宽度;Tab 最小宽度默认为 92 ,不可小于 0 。 |
背景 | 可对「初始背景」和「选中背景」选择颜色 |
字符 | 可对「初始字符」和「选中字符」进行自定义设置 |
下边框 | 对 Tab 组件下边框的「线型」和「颜色」进行设置 |
下划线 | 对选中 Tab 块的下划线的「线型」和「颜色」进行设置 |
2.3.2 移动端效果
Tab 样式选择为标准时,上菜单式移动端效果如下所示:
1)App
2)HTML5
注:当 Tab 标题过长时,使用上菜单式标题不会被截断。
2.4 下菜单式
2.4.1 界面介绍
「样式模板」选择下菜单式,Tab 样式为自定义,如下图所示:
下菜单式「设置」项各属性值介绍如下表所示:
属性 | 备注 |
---|---|
Tab 样式 | 包含标准和自定义两个选项,默认为标准 |
背景 | 可对「初始背景」和「选中背景」选择颜色 |
字符 | 可对「初始字符」和「选中字符」进行自定义设置 |
图标 | 支持自定义添加图标 |
分割线 | 可设置相邻 Tab 块之间分割线的「线型」和「颜色」 |
下菜单式支持自定义添加图标,选中要设置图标的 Tab 块对应的图标,点击编辑 ,在选择图标界面可选择图标,点击确定;
设置方法如下图所示:
用户可在「选择图标」界面中点击增加按钮,自定义上传图标图片,再进行选择。
注:自定义上传图标图片时,建议使用 48×48 规格的 PNG 图片。
2.4.2 移动端效果
Tab 样式选择为标准时,下菜单式移动端效果如下所示:
1)App
2)HTML5
2.5 滑动式
2.5.1 界面介绍
「样式模板」选择 滑动式,Tab 样式为自定义,如下图所示:
滑动式「设置」项各属性值介绍如下表所示:
属性 | 备注 |
---|---|
Tab 样式 | 包含标准和自定义两个选项,默认为标准 |
背景 | 可填充「背景颜色」 |
字符 | 可对「初始字符」进行自定义设置 |
圆点指示器 | 可填充「初始圆点」和「选中圆点」的颜色 |
2.5.2 移动端效果
Tab 样式选择为标准时,滑动式移动端效果如下所示:
1)App
2)HTML5
3. Tab 标题冻结编辑
当 Tab 页内容超过一屏(一屏的高度是扣除掉底部工具栏的高度)时, 默认样式和上菜单式支持标题位置冻结。
Tab 标题冻结,只在手机重布局且采用上菜单式或默认样式时生效,仅竖屏生效。
手机重布局下绝对画布块中不支持 Tab 标题冻结。
非手机重布局下不支持 Tab 标题冻结,包括竖屏和横屏。