1. 概述
1.1 版本
报表服务器版本 | App 版本 | HTML5 移动端展现插件版本 | 功能变动 |
---|
11.0 | V11.0 | V11.0 | - |
1.2 应用场景
用户遇到下面场景时,需要调整控件样式:
1.3 生效范围
报表类型 | 控件类型 | 控件位置 |
---|
决策报表
| 所有控件
| 参数面板、body |
|
|
1.4 类型
1)控件 的 移动端样式模板 分为「默认」和「扩展样式」。所有控件的移动端样式模板都支持「默认」样式,个别控件支持扩展样式,具体如下表所示:
注:「扩展样式」指除「默认」外的其他样式。
样式模板 | 控件类型
|
---|
默认 | 所有控件 |
简约日历、导航日历、简约日期样式 | 日期控件 |
简约下拉样式 | 下拉框控件、下拉复选框控件 |
胶囊按钮、联排按钮、图文按钮 | 单选按钮组控件、复选按钮组控件 |
2)开启「控件显示增强」后,选中控件,「移动端>样式模板」选择「默认」,「通用属性>属性设置」选择「默认」时,「模板主题>控件样式>移动端」的设置才会生效;否则,移动端控件的样式按照「移动端>样式模板」的设置生效。
3)开启「控件显示增强」后,「移动端>样式模板」中的「默认」和「扩展样式」的「通用属性>属性设置」选择 自定义 时,多了「主题色」设置项。
4)「移动端>样式模板>通用属性>属性设置 」选择「自定义」时:
2. 默认样式模板
2.1 功能简介
2.1.1 准备模板
1)打开 FineReport 设计器,点击菜单栏「文件>新建其他模板>新建决策报表」。
2)选择「新建空白模板」,点击「确定」,如下图所示:
3)将控件中的「文本控件」拖入空白画布中,如下图所示:
2.1.2 功能说明
1)在组件设置界面选中 「文本控件」,在属性界面中点击「移动端>样式模板」旁的「...」按钮,如下图所示:
2)「默认」样式模板分为 通用属性 和 设定 两部分,如下图所示:
3)通用属性 的 属性设置 可设置为「默认」或「自定义」。
各设置项说明如下表所示:
设置项
| 说明 |
---|
组件背景 | 支持设置组件背景的颜色 |
边框线型 | 支持设置边框线型 |
边框颜色 | 支持设置边框颜色 |
圆角边框 | 支持设置边框圆角的大小 |
图标颜色 | 支持设置图标颜色 |
字体 | 支持设置字号、字体颜色、倾斜、加粗 |
4)设定 不支持设置。
2.2 示例
2.2.1 准备模板
准备模板同2.1.1,此处不再赘述。
2.2.2 属性设置为自定义
1)在组件设置界面选中 「文本控件」,在属性界面中点击「移动端>样式模板」旁的「...」按钮,如下图所示:
2)属性设置选择「自定义」,设置 组件背景 、边框线型 、边框颜色 、圆角边框 、图标颜色 ,如下图所示:
2.2.3 效果预览
App 及 HTML5 端预览效果如下图所示:
3. 扩展样式模板
注:「移动端>样式模板」选择「扩展样式」,「通用属性>属性设置」选择「自定义」时,「通用属性」中只有「组件背景」对「扩展样式」生效,其余「通用属性」设置项均不生效。
1)日期控件的扩展样式,详情参见:[通用]日期移动端日历样式
2)下拉框控件、下拉复选框控件的扩展样式,详情参见:[通用]移动端简约下拉样式
3)单选按钮组控件、复选按钮组控件的扩展样式,详情参见:[通用]单选按钮组移动端按钮组样式
4. 控件显示增强
4.1 所有控件通用
1)HTML5 移动端展现插件 V11.0.82 版本之后适配「控件显示增强」,详情参见:控件显示增强 。
2)点击菜单栏「模板>控件显示增强」,勾选「开启控件显示增强」,点击「确定」,即可开启功能。
3)开启「控件显示增强」后,选中控件,「移动端>样式模板」选择「默认」,「通用属性>属性设置」选择「默认」时,「模板主题>控件样式>移动端」的设置才会生效;否则,移动端控件的样式按照「移动端>样式模板」的设置生效。
4)开启「控件显示增强」后,「移动端>样式模板」中的「默认」和「扩展样式」的「通用属性>属性设置」选择 自定义 时,多了「主题色」设置项。
4)「通用属性>属性设置 」选择「自定义」时:
具体如下表所示:
| 未开启控件显示增强 | 开启控件显示增强 |
---|
样式\通用属性设置项 | 组件背景 | 其他设置 | 主题色 | 组件背景 | 其他设置 |
默认 | √ | √ | √ | √ | √ |
扩展样式 | √ | × | × | × | × |
4.2 下拉类控件
1)下拉类控件点击后从侧边展开,更改为从底部展开,更符合用户的操作习惯。如下图所示:
2)下拉框/单选下拉树控件,界面和交互优化,简化用户过滤步骤。
用户展开控件面板时,删除「确定」按钮。用户选择选项,或点击「清空」后点击「查询」可直接进行过滤,如下图所示:
3)搜索显示全屏,能够展示更多搜索内容。
4.3 文件控件
上传图片的交互和操作流程优化。
1)未添加图片时的界面优化,点击「+」添加图片。
2)查看图片支持放大。
3)缩略图支持点击右上角直接删除。
4)如果未显示的图片超过 6 张,点击折叠的图片「+N」,即可批量查看缩略图,并支持查看大图、删除图片等操作。