「通用」单选按钮组移动端按钮组样式插件

  • 文档创建者:Carly
  • 编辑次数:11次
  • 最近更新:Wendy123456 于 2020-01-16
  • 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 图文按钮

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

    1579155635548565.png

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

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

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

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

    图标

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

    支持上传自定义图片

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

    3.2 手机重布局

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

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

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

    1579156429178420.jpg

    4. 模板体验

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

    附件列表


    主题: 移动端应用
    • 有帮助
    • 没帮助
    • 只是浏览