1. 概述编辑
1.1 版本
| 报表服务器版本 | JAR | App版本 | HTML5 移动端展现插件 |
|---|---|---|---|
| 10.0 | 2019-01-09 | 10.1 | V6.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 组件样式进行自定义设置 。如下图所示：
2.2 默认
2.2.1 界面介绍
「样式模板」选择默认，如下图所示：
2.2.2 移动端效果
1）APP
2）HTML5
注：「样式模板」为默认时，Tab 块标题可能会显示不全。
2.3 上菜单式
2.3.1 界面介绍
「样式模板」选择 上菜单式，Tab 样式为自定义，设置选中背景，初始字符和选中字符的颜色（用户可自定义设置），如下图所示：
Tab 样式：包含标准和自定义两个选项，默认为标准。
显示间隔：包含间隔固定和标题宽度固定两个选项。
背景：可对初始背景和选中背景选择颜色。
字符：可对初始字符和选中字符进行自定义设置。
下边框：对 Tab 组件下边框的线型和颜色进行设置。
下划线：对选中 Tab 块的下划线的线型和颜色进行设置。
2.3.2 移动端效果
1）APP
2）HTML5
注：当 Tab 标题过长时，使用上菜单式标题不会被截断。
2.4 下菜单式
当 FineReport 设计器、APP 版本、HTML5 插件版本满足下表所示的要求时，下菜单式设置的图标更加清晰。
| 报表服务器版本 | JAR | APP 版本 | HTML5 移动端展现插件 | 支持功能 |
|---|---|---|---|---|
| 10.0 | 2019-12-04 | 10.4.45 | V10.4.45 | 下菜单式图标优化 |
2.4.1 界面介绍
「样式模板」选择下菜单式，Tab 样式为自定义，如下图所示：
Tab 样式：包含标准和自定义两个选项，默认为标准。
背景：可对初始背景和选中背景选择颜色。
字符：可对初始字符和选中字符进行自定义设置。
图标：支持自定义添加图标。
分割线：可设置相邻 Tab 块之间分割线的线型和颜色。
下菜单式支持自定义添加图标，选中要设置图标的 Tab 块对应的图标，点击编辑 ，在选择图标界面可选择图标，点击确定；
设置方法如下图所示：
用户可在「选择图标」界面中点击增加按钮，自定义上传图标图片，再进行选择。
注：自定义上传图标图片时，建议使用 48×48 规格的 PNG 图片。
2.4.2 移动端效果
1）APP
2）HTML5
2.5 滑动式
2.5.1 界面介绍
「样式模板」选择 滑动式，Tab 样式为自定义，如下图所示：
Tab 样式：包含标准和自定义两个选项，默认为标准。
背景：可填充背景颜色。
字符：可对初始字符进行自定义设置。
圆点指示器：可填充初始圆点和选中圆点的颜色。
2.5.2 移动端效果
1）APP
2）HTML5
3. 注意事项编辑
1）Tab 标题冻结，只在手机重布局且采用上菜单式 &；默认样式时生效，仅竖屏生效。
2）手机重布局下绝对画布块中不支持 Tab 标题冻结。
3）非手机重布局下不支持 Tab 标题冻结，包括竖屏和横屏。