目录:
1. 概述编辑
1.1 版本
报表服务器版本 | JAR 包版本 | App 版本 | HTML5 移动端展现插件 | 新增功能 |
---|---|---|---|---|
10.0 | 2019-12-05 | 10.4.49 | V10.4.49 | 上菜单式可设置「Tab 最小宽度」、下菜单式图标优化 |
-- | -- | V10.4.66 | H5 端支持 Tab 标题位置冻结 | |
2020-04-26 | 10.4.69 | V10.4.69 | 样式模板新增联排式 |
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 移动端效果
以 App 效果为例,如下图所示:
注:「样式模板」为默认时,Tab 块标题可能会显示不全。
2.3 上菜单式
2.3.1 界面介绍
「样式模板」选择上菜单式,Tab 样式为自定义,设置选中背景,初始字符和选中字符的颜色(用户可自定义设置),如下图所示:
上菜单式「设置」项各属性值介绍如下表所示:
属性 | 备注 |
---|---|
Tab 样式 | 包含标准和自定义两个选项,默认为标准 |
显示间隔 | 包含间隔固定和标题宽度固定两个选项,当选择标题宽度固定时,可设置 Tab 最小宽度;Tab 最小宽度默认为 92 ,不可小于 0 |
背景 | 可对「初始背景」和「选中背景」选择颜色 |
字符 | 可对「初始字符」和「选中字符」进行自定义设置 |
下边框 | 对 Tab 组件下边框的「线型」和「颜色」进行设置 |
下划线 | 对选中 Tab 块的下划线的「线型」和「颜色」进行设置 |
2.3.2 移动端效果
Tab 样式选择标准时,以 App 效果为例,如下图所示:
注:当 Tab 标题过长时,使用上菜单式标题不会被截断。
2.4 下菜单式
2.4.1 界面介绍
「样式模板」选择下菜单式,Tab 样式为自定义,如下图所示:
下菜单式「设置」项各属性值介绍如下表所示:
属性 | 备注 |
---|---|
Tab 样式 | 包含标准和自定义两个选项,默认为标准 |
背景 | 可对「初始背景」和「选中背景」选择颜色 |
字符 | 可对「初始字符」和「选中字符」进行自定义设置 |
图标 | 支持自定义添加图标 |
分割线 | 可设置相邻 Tab 块之间分割线的「线型」和「颜色」 |
下菜单式支持自定义添加图标,选中要设置图标的 Tab 块对应的图标,点击编辑 ,在选择图标界面可选择图标,点击确定。设置方法如下图所示:
用户可在「选择图标」界面中点击增加按钮,自定义上传图标图片,再进行选择。
注:自定义上传图标图片时,建议使用 48×48 规格的 PNG 图片。
2.4.2 移动端效果
Tab 样式选择为标准时,以 App 效果为例,如下图所示:
2.5 滑动式
2.5.1 界面介绍
「样式模板」选择滑动式,Tab 样式为自定义,如下图所示:
滑动式「设置」项各属性值介绍如下表所示:
属性 | 备注 |
---|---|
Tab 样式 | 包含标准和自定义两个选项,默认为标准 |
背景 | 可填充「背景颜色」 |
字符 | 可对「初始字符」进行自定义设置 |
圆点指示器 | 可填充「初始圆点」和「选中圆点」的颜色 |
2.5.2 特殊场景说明
特殊场景下补充说明如下表所示:
场景 | 示例 | 备注 |
---|---|---|
Tab 内部图表、表格可上下或左右滑动 | 1)图表放大后左右滑动 2)图表数据点提示下按住滑动 3)表格左右滑动 | 「滑动式」下,不支持组件内部上下左右滑动,需要放大后触发组件内部滑动 注:「滑动式」下,Tab 内部的图表组件不支持激活 |
2.5.3 移动端效果
Tab 样式选择为标准时,以 App 效果为例,如下图所示:
2.6 联排式
2.6.1 界面介绍
「样式模板」选择联排式,Tab 样式为自定义,如下图所示:
联排式「设置」项各属性值介绍如下表所示:
属性 | 备注 |
---|---|
Tab 样式 | 包含标准和自定义两个选项,默认为标准 |
按钮边距 | 可自定义设置按钮边距 |
按钮背景 | 自定义选择按钮的「初始背景」和「选中背景」 |
边框 | 可对按钮边框的线型、颜色、圆角进行设置 |
字符 | 可对「初始字符」和「选中字符」进行自定义设置 |
2.6.2 移动端效果
Tab 样式选择为标准时,以 App 效果为例,如下图所示:
3. Tab 标题冻结编辑
移动端 Tab 标题位置冻结支持范围如下表所示:
生效范围 | 终端范围 | 模板类型 | 是否重布局 | Tab 要求 | Tab 样式 | 其他要求 |
---|---|---|---|---|---|---|
手机 Pad | App H5 | 表单(非绝对画布块) | 是 | 不在最外层,且 Tab 页内容超过一屏(一屏的高度是扣除掉底部工具栏的高度) | 上菜单式 默认样式 联排式 | 竖屏 |