1. 概述
1.1 版本
| Finereport 版本 | App 版本 | HTML5移动端展现插件版本 |
|---|---|---|
| 11.0 | 11.0 | V11.0 |
1.2 功能简介
移动端模板中，单选按钮组可以帮助用户展示多维度数据，但是样式过于单一。
通过设置「单选按钮组控件」移动专属样式，例如联排按钮、胶囊按钮、图文按钮等。
2. 控件介绍
2.1 使用场景
该样式设置仅对移动端模板生效，支持 APP 和 HTML5 端。
2.2 操作方法
1）在 FineReport 设计器中，点击文件>新建决策报表，在控件面板中拖动「单选按钮组控件」到模板中。
2）在右侧属性面板控件设置中，若选中radioGroup0，在「校验」下不勾选允许为空按钮，移动端预览时重复点击同一个 Tab ，效果不变。如下图所示：
3）在右侧属性面板控件设置中，选中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 手机重布局
手机重布局 对单选按钮组的显示效果有明显影响。如下图所示：
勾选手机重布局：控件自适应，占一行。
不勾选手机重布局：控件显示区域取决于模板中组件大小。若文字显示不下，则截断。
