1. 概述
1.1 版本
| 报表服务器版本 | App 版本 | HTML5移动端展现插件版本 | 功能变动 |
|---|---|---|---|
| 11.0 | V11.0 | V11.0 | - |
| 11.0.25 | V11.0.90 | V11.0.90 |
|
1.2 应用场景
移动端模板中，单选按钮组可以帮助用户展示多维度数据，但是样式过于单一，用户希望调整移动端单选按钮组的样式。
1.3 功能简介
本文以 单选按钮组 为例进行介绍，复选按钮组 同 单选按钮组 。
「单选按钮组控件」移动端样式模板有四种：「默认」、「胶囊按钮」、「联排按钮」、「图文按钮」，效果如下图所示：
2. 功能入口
1）点击下载模板：单选按钮组移动端样式模板.frm ，在 FineReport 设计器中打开该模板。
2）选中右侧属性面板中的「组件设置>body>radioGroup0」。
3）点击「移动端」，点击「样式模板」旁的「...」按钮，可以看到 样式模板 有四种样式：「默认」、「胶囊按钮」、「联排按钮」、「图文按钮」，如下图所示：
4）「移动端>高级>最大显示行数」控制按钮显示行数，若有 3 行按钮，设置了「最大显示行数」为 2 ，则只显示前两行按钮。
最大显示行数 默认为「5」，如下图所示：
3. 默认
3.1 设置
「默认」样式模板只可设置「通用属性」，详情参见：默认样式模板 。
3.2 示例
1）样式模板选择「默认」。
2）「通用属性> 属性设置」 选择「自定义」。
3）配置具体设置项，点击「确定」，如下图所示：
4）App 及 HTML5 端效果预览如下图所示：
4. 胶囊按钮
4.1 设置
「胶囊按钮」样式模板可设置「通用属性」和「设定」。
4.1.1 通用属性
「通用属性」的设置与「默认」样式模板相同，详情参见：默认样式模板 。
4.1.2 设定
「设定」的「按钮样式」分为「标准」和「自定义」。
1）「按钮样式」为「标准」时，不可自定义设置 按钮样式 。
2）「按钮样式」为「自定义」时，可自定义设置 按钮样式 。
具体设置项说明如下表所示：
| 设置项 | 说明 | |
|---|---|---|
| 按钮布局 | 控件边距 |
|
| 布局方式 | 1）单行展示 选择「单行展示」时，出现「按钮排布」设置项，分为「自然布局」和「两端对齐」
2）自动填充 按钮宽度随文字长度自适应
3）固定列数
| |
| 按钮背景 | 初始填充 | 支持设置按钮初始填充背景色 |
| 选中填充 | 支持设置按钮选中填充背景色 | |
| 边框 | 线型 | 支持设置按钮边框线型 |
| 初始颜色 | 支持设置按钮边框初始颜色 | |
| 选中颜色 | 支持设置按钮边框选中颜色 | |
| 圆角 | 支持设置按钮边框圆角，默认为20 | |
| 字符 | 初始字符 | 支持设置按钮初始字符的字体、字号（范围为1-99之间的整数，默认为15）、字体颜色、加粗、倾斜 |
| 选中字符 | 支持设置选中字符的字体颜色 | |
4.2 示例
1）样式模板选择「胶囊按钮」。
2）「通用属性>属性设置」选择「默认」。
3）「设定」的「按钮样式」选择「自定义」，配置具体设置项，点击「确定」，如下图所示：
4）App 及 HTML5 端效果预览如下图所示：
5. 联排按钮
5.1 设置
「联排按钮」样式模板可设置「通用属性」和「设定」。
5.1.1 通用属性
「通用属性」的设置与「默认」样式模板相同，详情参见：默认样式模板 。
5.1.2 设定
「设定」的「按钮样式」分为「标准」和「自定义」。
1）「按钮样式」为「标准」时，不可自定义设置 按钮样式 。
2）「按钮样式」为「自定义」时，可自定义设置 按钮样式 。
具体设置项说明如下表所示：
| 设置项 | 说明 | |
|---|---|---|
| 按钮布局 | 控件边距 |
|
| 按钮排布 |
| |
| 控件背景 | 初始填充 | 支持设置按钮初始填充背景色 |
| 选中填充 | 支持设置按钮选中填充背景色 | |
| 边框 | 线型 | 支持设置按钮边框线型 |
| 颜色 | 支持设置按钮边框颜色 | |
| 圆角 | 支持设置按钮边框圆角，默认为2 | |
| 字符 | 初始字符 | 支持设置按钮初始字符的字体、字号（范围为1-99之间的整数，默认为15）、字体颜色、加粗、倾斜 |
| 选中字符 | 支持设置选中字符的字体颜色 | |
5.2 示例
1）样式模板选择「联排按钮」。
2）「通用属性>属性设置」选择「默认」。
3）「设定」的「按钮样式」选择「自定义」，配置具体设置项，点击「确定」，如下图所示：
4）App 及 HTML5 端效果预览如下图所示：
6. 图文按钮
6.1 设置
「图文按钮」样式模板可设置「通用属性」和「设定」。
6.1.1 通用属性
「通用属性」的设置与「默认」样式模板相同，详情参见：默认样式模板 。
6.1.2 设定
「设定」的「按钮样式」分为「标准」和「自定义」。
1）「按钮样式」为「标准」时，不可自定义设置 按钮样式 。
2）「按钮样式」为「自定义」时，可自定义设置 按钮样式 。
具体设置项说明如下表所示：
| 设置项 | 说明 | |
|---|---|---|
| 按钮布局 | 控件边距 |
|
| 布局方式 | 1）单行展示 选择「单行展示」时，出现「按钮排布」设置项，分为「自然布局」和「等分布局」
2）自动填充 按钮宽度随文字长度自适应，若按钮过多显示不下，支持换行 3）固定列数
| |
| 图标 | 初始图标 | 支持设置按钮初始图标 |
| 选中图标 | 支持设置按钮选中图标 | |
| 字符 | 初始字符 | 支持设置按钮初始字符的字体、字号（范围为1-99之间的整数，默认为15）、字体颜色、加粗、倾斜 |
| 选中字符 | 支持设置选中字符的字体颜色 | |
6.2 示例
1）样式模板选择「图文按钮」。
2）「通用属性>属性设置」选择「默认」。
3）「设定」的「按钮样式」选择「自定义」，配置具体设置项，点击「确定」，如下图所示：
4）App 及 HTML5 端效果预览如下图所示：
7. 注意事项
[通用]手机重布局 对单选按钮组的显示效果有明显影响。如下图所示：
勾选「手机重布局」：控件自适应，一行一个控件，并可设置控件的布局和显示顺序。
取消勾选「手机重布局」：控件显示区域取决于模板中组件大小。若控件中的文字显示不下，则截断。
