1. 概述
1.1 版本
| 報表服務器 | JAR 包 | App 版本 | 插件名稱 | 插件版本 |
|---|---|---|---|---|
| 10.0 | 2019-12-08 | 10.4.49 | HTML5移動端展現插件 | V10.4.49 |
| 單選按鈕組移動端按鈕組樣式插件 | V10.4.49 |
1.2 功能簡介
移動端模板中，單選按鈕組可以幫助用戶展示多維度數據，但是樣式過於單一。
通過安裝「單選按鈕組移動端按鈕組樣式」插件，設置單選按鈕組移動專屬樣式，例如聯排按鈕、膠囊按鈕、圖文按鈕等。
2. 插件介紹
2.1 使用場景
該插件僅對決策報表中body内的單選按鈕組組件生效。
該插件僅對移動端模板生效，支持 APP 和 HTML5 端。
2.2 插件安裝
插件下載請點擊：單選按鈕組移動端按鈕組樣式插件
設計器插件安裝方法請參見：設計器插件管理
服務器安裝插件方法請參見：服務器插件管理
2.3 操作方法
1）在 FineReport 設計器中，點擊文件>新建決策報表，在控件面板中拖動「單選按鈕組控件」到模板中。
2）若App版本爲 10.4.69 及之後，HTML5移動端展現插件版本爲 V10.4.69 及之後，在右側屬性面板控件設置中，選中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 手機重布局
手機重布局 對單選按鈕組的顯示效果有明顯影響。如下圖所示：
勾選手機重布局：控件自适應，占一行。
不勾選手機重布局：控件顯示區域取決於模板中組件大小。若文字顯示不下，則截斷。
4. 模板體驗
「單選按鈕組移動端按鈕組樣式」插件在模板中的具體使用及效果，請根據需求選擇下載 移動端 Demo 中 1.1.2 章節中的模板體驗。
