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. 注意事項
[通用]手機重佈局 對無線電鈕組的顯示效果有明顯影響。如下圖所示：
勾選「手機重佈局」：元件自適應，一行一個元件，並可設定元件的佈局和顯示順序。
取消勾選「手機重佈局」：元件顯示區域取決於範本中組件大小。若元件中的文字顯示不下，則截斷。
