目录:
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 标题冻结，包括竖屏和横屏。