1. 概述编辑
1.1 版本
报表服务器版本 | JAR | App版本 | HTML5 移动端展现插件 |
---|---|---|---|
10.0 | 2019-01-09 | 10.1 | V6.1 |
用户在实现不同 Tab 系列下不同维度的数据分析时,多样化的 Tab 组件可供用户自定义设置及选择 ,使多维度模板更加清晰和简洁。
1.3 功能简介
移动端提供更为丰富的 Tab 效果,推出 4 类移动端专属 Tab 样式:默认、上菜单式、下菜单式、滑动式。
2. 操作步骤编辑
2.1 模板准备
在 FineReport 设计器中,打开 %FR_HOME%\webapps\webroot\WEB-INF\reportlets\demo\Phone\analytics\financial\021-妙用Tab底部样式.frm 模板。
模板下载:化工集团月报_资本-phone.frm
注1:样式模板为「默认」时,属性面板右侧控件设置中选中 tabpane ,「属性」 Tab 下的设置有效。
注2:该模板的 Tab 组件已设置为下菜单式,用户可重新自定义设置。
1)因此,在右侧属性面板「控件设置」中选中 tabpane0,在「属性」 Tab 下样式模板中,将「锦旗」修改为「默认」。如下图所示:
2)在右侧属性面板「控件设置」中选中 tabpane0,点击移动端>样式模板,可对 Tab 组件样式进行自定义设置 。如下图所示:
2.1 默认
2.1.1 界面介绍
「样式模板」选择默认,如下图所示:
2.1.2 移动端效果
1)APP
2)HTML5
注:由此可见,「样式模板」为默认时,Tab 块标题可能会显示不全
2.2 上菜单式
2.2.1 界面介绍
「样式模板」选择 上菜单式,Tab 样式为自定义,如下图所示:
Tab 样式:包含标准和自定义两个选项,默认为标准。
显示间隔:包含间隔固定和标题宽度固定两个选项。
背景:可对初始背景和选中背景选择颜色。
字符:可对初始字符和选中字符进行自定义设置。
下边框:对 Tab 组件下边框的线型和颜色进行设置。
下划线:对选中 Tab 块的下划线的线型和颜色进行设置。
2.2.2 移动端效果
1)APP
2)HTML5
注:当 Tab 标题过长时,使用上菜单式标题不会被截断。
2.3 下菜单式
2.3.1 界面介绍
「样式模板」选择下菜单式,Tab 样式为自定义,如下图所示:
Tab 样式:包含标准和自定义两个选项,默认为标准。
背景:可对初始背景和选中背景选择颜色。
字符:可对初始字符和选中字符进行自定义设置。
图标:支持自定义添加图标。
分割线:可设置相邻 Tab 块之间分割线的线型和颜色。
下菜单式支持自定义添加图标,选中要设置图标的 Tab 块对应的图标,点击编辑 ,在选择图标界面可选择图标;
用户可以在 选择图标 界面中点击增加按钮,自定义上传图标图片,再进行选择。
下图以为线索 Tab 块设置「初始图标」的步骤,「选中图标」设置方法与此相同。
设置方法如下图所示:
注:自定义上传图标图片时,建议使用 48×48 规格的 PNG 图片。
2.3.2 移动端效果
注1:由于「021-妙用Tab底部样式.frm」模板中样式模板已设置了下菜单式,用户可直接使用查看下菜单式效果;
此处移动端效果是取消模板本身下菜单式设置,恢复设计器默认下菜单式设置的效果。
1)APP
2)HTML5
2.4 滑动式
2.4.1 界面介绍
「样式模板」选择 滑动式,Tab 样式为自定义,如下图所示:
Tab 样式:包含标准和自定义两个选项,默认为标准。
背景:可填充背景颜色。
字符:可对初始字符进行自定义设置。
圆点指示器:可填充初始圆点和选中圆点的颜色。
2.4.2 移动端效果
1)APP
2)HTML5
5. 注意事项编辑
1)Tab 标题冻结,只在手机重布局且采用上菜单式 &;默认样式时生效,仅竖屏生效。
2)手机重布局下绝对画布块中不支持 Tab 标题冻结。
3)非手机重布局下不支持 Tab 标题冻结,包括竖屏和横屏。