1. 概述编辑
1.1 版本
报表服务器 | JAR 包 | App 版本 | 插件名称 | 插件版本 |
---|---|---|---|---|
10.0 | 2019-12-08 | 10.4.49 | HTML5移动端展现插件 | V10.4.49 |
单选按钮组移动端按钮组样式插件 | V10.4.49 |
1.2 功能简介
移动端模板中,单选按钮组可以帮助用户展示多维度数据,但是样式过于单一。
通过安装「单选按钮组移动端按钮组样式」插件,设置单选按钮组移动专属样式,例如联排按钮、胶囊按钮、图文按钮等。
2. 插件介绍编辑
2.1 使用场景
该插件仅对决策报表中body内的单选按钮组组件生效。
该插件仅对移动端模板生效,支持 APP 和 HTML5 端。
2.2 插件安装
插件下载请点击:单选按钮组移动端按钮组样式插件
设计器插件安装方法请参见:设计器插件管理
服务器安装插件方法请参见:服务器插件管理
2.3 操作方法
在 FineReport 设计器中,点击文件>新建决策报表,在控件面板中拖动「单选按钮组控件」到模板中。
在右侧属性面板控件设置中,选中radioGroup0,点击移动端,可在「样式模板」处进行选择和设置。
如下图所示:
3. 操作步骤编辑
3.1 按钮样式
3.1.1 默认
选中默认,用户可设置组件背景,移动端效果(以 APP 效果为例)如下图所示:
3.1.2 联排按钮
选中联排按钮,可设置联排按钮各属性项。移动端效果(以 APP 效果为例)如下图所示:
联排按钮各设置项说明如下表所示:
属性 | 备注 | |
---|---|---|
组件背景 | 组件的背景,默认透明 | |
控件边距 | 控件边框到组件边框的距离,上下左右均可设置; 默认上下边距为 15px,左右边距为 0px 。 | |
按钮背景 | 可设置按钮初始背景和选中后的背景 | |
按钮边框 | 可设置按钮边框的线型、初始颜色、选中后的颜色、圆角大小 | |
按钮字符 | 可设置按钮中字符的字体大小、初始颜色和选中后的颜色 |
3.1.3 胶囊按钮
选中胶囊按钮,可设置胶囊按钮各属性项。移动端效果(以 APP 效果为例)如下图所示:
胶囊按钮各设置项说明如下表所示:
属性 | 备注 | |
---|---|---|
组件背景 | 组件的背景,默认透明 | |
控件边距 | 控件边框到组件边框的距离,上下左右均可设置 默认上下边距为 15px,左右边距为 0px 。 | |
按钮排布 | 左对齐 | 按钮组不横向充满,左端对齐 |
两端对齐 | 按钮组横向充满
| |
按钮背景 | 可设置按钮初始背景和选中后的背景 | |
按钮边框 | 可设置按钮边框的线型、初始颜色、选中后的颜色、圆角大小 | |
按钮字符 | 可设置按钮中字符的字体大小、初始颜色和选中后的颜色 |
3.1.4 图文按钮
选中图文按钮,可设置图文按钮各属性项。移动端效果(以 APP 效果为例)如下图所示:
图文按钮各设置项说明如下表所示:
属性 | 备注 |
---|---|
组件背景 | 组件的背景,默认透明 |
控件边距 | 控件边框到组件边框的距离,上下左右均可设置 默认上下边距为 15px,左右边距为 0px 。 |
图标 | 可设置初始图标和选中后的图标 支持上传自定义图片 |
按钮字符 | 可设置按钮中字符的字体大小、初始颜色和选中后的颜色 |
3.2 手机重布局
手机重布局 对单选按钮组的显示效果有明显影响。如下图所示:
勾选手机重布局:控件自适应,占一行。
不勾选手机重布局:控件显示区域取决于模板中组件大小。若文字显示不下,则截断。
4. 模板体验编辑
「单选按钮组移动端按钮组样式」插件在模板中的具体使用及效果,请根据需求选择下载 移动端 Demo 中 1.1.2 章节中的模板体验。