历史版本11 :[通用]单选按钮组移动端按钮组样式 返回文档
编辑时间: 内容长度:图片数:目录数: 修改原因:

目录:

1. 概述编辑

1.1 版本

报表服务器JAR 包App 版本插件名称插件版本
10.02019-12-0810.4.49HTML5移动端展现插件V10.4.49
单选按钮组移动端按钮组样式插件V10.4.49

1.2 功能简介

移动端模板中,单选按钮组可以帮助用户展示多维度数据,但是样式过于单一。

通过安装「单选按钮组移动端按钮组样式」插件,设置单选按钮组移动专属样式,例如联排按钮胶囊按钮图文按钮等。

image.png

2. 插件介绍编辑

2.1 使用场景

该插件仅对决策报表中body内的单选按钮组组件生效。

该插件仅对移动端模板生效,支持 APP 和 HTML5 端。

2.2 插件安装

插件下载请点击:单选按钮组移动端按钮组样式插件

设计器插件安装方法请参见:设计器插件管理

服务器安装插件方法请参见:服务器插件管理

2.3 操作方法

在 FineReport 设计器中,点击文件>新建决策报表,在控件面板中拖动「单选按钮组控件」到模板中。

在右侧属性面板控件设置中,选中radioGroup0,点击移动端,可在「样式模板」处进行选择和设置。

如下图所示:

1579154453779695.png

3. 操作步骤编辑

3.1 按钮样式

3.1.1 默认

选中默认,用户可设置组件背景,移动端效果(以 APP 效果为例)如下图所示:

1579155998542673.png

3.1.2 联排按钮

选中联排按钮,可设置联排按钮各属性项。移动端效果(以 APP 效果为例)如下图所示:

1579154762968752.png

联排按钮各设置项说明如下表所示:

属性备注
组件背景组件的背景,默认透明
控件边距

控件边框到组件边框的距离,上下左右均可设置;

默认上下边距为 15px,左右边距为 0px 。

按钮背景可设置按钮初始背景和选中后的背景
按钮边框可设置按钮边框的线型、初始颜色、选中后的颜色、圆角大小
按钮字符可设置按钮中字符的字体大小、初始颜色和选中后的颜色

3.1.3 胶囊按钮

选中胶囊按钮,可设置胶囊按钮各属性项。移动端效果(以 APP 效果为例)如下图所示:

1579155318772336.png

胶囊按钮各设置项说明如下表所示:

属性备注
组件背景组件的背景,默认透明
控件边距

控件边框到组件边框的距离,上下左右均可设置

默认上下边距为 15px,左右边距为 0px 。

按钮排布左对齐

按钮组不横向充满,左端对齐

1575784936741302.png

两端对齐

按钮组横向充满

  • 选项个数比较少,两端对齐,中间间隔会变大

1575784961144171.png

  • 选项个数比较多,但是能显示下,两端对齐,中间间隔会被压缩

1575785081562686.png

  • 选项个数比较多,间隔压缩到最小,还是显示不下,则出滚动条

1575858034587294.png

按钮背景可设置按钮初始背景和选中后的背景
按钮边框可设置按钮边框的线型、初始颜色、选中后的颜色、圆角大小
按钮字符可设置按钮中字符的字体大小、初始颜色和选中后的颜色

3.1.4 图文按钮

选中图文按钮,可设置图文按钮各属性项。移动端效果如下图所示:

1579155635548565.png

图文按钮各设置项说明如下表所示:

属性备注
组件背景组件的背景,默认透明
控件边距

控件边框到组件边框的距离,上下左右均可设置

默认上下边距为 15px,左右边距为 0px 。

图标

可设置初始图标和选中后的图标

支持上传自定义图片

按钮字符可设置按钮中字符的字体大小、初始颜色和选中后的颜色

3.2 手机重布局

手机重布局 对单选按钮组的显示效果有明显影响。如下图所示:

  • 勾选手机重布局:控件自适应,占一行。

  • 不勾选手机重布局:控件显示区域取决于模板中组件大小。若文字显示不下,则截断。

1579156429178420.jpg

4. 模板体验编辑

「单选按钮组移动端按钮组样式」插件在模板中的具体使用及效果,请根据需求选择下载 移动端 Demo 中 1.1.2 章节中的模板体验。