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

目录:

1. 概述编辑

1.1 版本

报表服务器版本

JAR 包

单选按钮组移动端按钮组样式插件版本

App 版本

10.02019-12-04V10.4.4910.4.49

1.2 功能简介

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

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

image.png

2. 插件介绍编辑

2.1 使用场景

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

该插件仅对移动端模板生效,适用于手机端和 ipad 。

2.2 插件安装

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

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

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

2.3 插件功能

安装插件后,选中body>单选按钮组控件>移动端,点击样式模板,新增三种按钮样式:联排按钮、胶囊按钮、图文按钮。如下图所示:

1575724944171622.png

3. 操作步骤编辑

3.1 按钮样式

3.1.1 默认

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

1575780701585387.png

3.1.2 联排按钮

选中联排按钮,用户可设置组件背景、按钮样式。移动端效果如下图所示:

1575786086991716.png

按钮样式设置如下表:

设置定义
组件背景组件的背景,默认透明
控件边距

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

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

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

3.1.3 胶囊按钮

选中胶囊按钮,用户可设置组件背景、按钮布局、按钮样式。移动端效果如下图所示:

1575782038454622.png

按钮样式设置如下表:

设置定义
组件背景组件的背景,默认透明
控件边距

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

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

按钮排布左对齐

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

1575784936741302.png

两端对齐

按钮组横向充满

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

1575784961144171.png

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

1575785081562686.png

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

1575858034587294.png

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

3.1.4 图文按钮

选中图文按钮,用户可设置组件背景、图标样式、按钮样式。移动端效果如下图所示:

1575786671239106.png

按钮样式设置如下表:

设置定义
组件背景组件的背景,默认透明
控件边距

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

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

图标

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

支持上传自定义图片

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

3.2 手机重布局

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

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

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

1575787671174185.png