1. 概述
1.1 版本
| Finereport 版本 | App 版本 | HTML5行動端展現插件版本 | 功能變動 |
|---|---|---|---|
| 11.0 | 11.0 | V11.0 | - |
| 11.0.25 | V11.0.90 | V11.0.90 |
|
1.2 功能簡介
行動端範本中，多選按鈕組可以幫助使用者展示多維度資料，但是樣式過於單一。
透過設定「複選按鈕組元件」行動專屬樣式，優化顯示效果。例如「聯排按鈕」、「膠囊按鈕」、「圖文按鈕」等。
2. 功能介紹
示範範例：決策報表填報-複選按鈕組元件.frm
2.1 使用場景
該樣式設定僅對行動端範本生效，支援 APP 和 HTML5 端。
不適用於普通報表。
「通用屬性」只有「組件背景」對擴展樣式有效果，若開啟元件顯示增強插件均不生效。
2.2 功能入口
1）在 FineReport 設計器中開啟一張決策報表，並新增「複選按鈕組元件」到範本中。
2）在右側屬性面板元件設定中，選中「checkBoxGroup0」，點選「行動端」，如下圖所示：
「樣式範本」：設定「複選按鈕組元件」的樣式。例如「聯排按鈕」、「膠囊按鈕」、「圖文按鈕」
「最大顯示列數」：當按鈕組多列顯示時，控制最大顯示列數
3）「全選」受「屬性-進階-是否支援全選」控制，勾選「支援全選」後，複選按鈕組擴展樣式中全選按鈕預設顯示在第一個。如下圖所示：
3. 樣式範本
3.1 默認
選中「預設」，使用者可設定「自訂」按鈕效果，行動端效果如下圖所示：
3.2 聯排按鈕
選中「聯排按鈕」，可設定「聯排按鈕」各屬性項。行動端效果如下圖所示：
「聯排按鈕」各設定項說明如下表所示：
| 屬性 | 備註 | |
|---|---|---|
| 組件背景 | 組件的背景，預設透明 | |
| 元件邊距 | 元件邊框到組件邊框的距離，上下左右均可設定； 預設上下邊距為 15px，左右邊距為 0px | |
| 按鈕排布 | 可設定自然佈局或等分佈局 自然佈局：按鈕寬度隨文字自適應。按鈕在一列展示，超出螢幕可捲動 等分佈局：元件寬度/總按鈕數 | |
| 按鈕背景 | 可設定按鈕初始背景和選中後的背景 | |
| 按鈕邊框 | 可設定按鈕邊框的線型、初始顏色、選中後的顏色、圓角大小 | |
| 按鈕字元 | 可設定按鈕中字元的字體大小、初始顏色和選中後的顏色 | |
3.3 膠囊按鈕
選中「膠囊按鈕」，可設定「膠囊按鈕」各屬性項。行動端效果如下圖所示：
「膠囊按鈕」各設定項說明如下表所示：
| 屬性 | 備註 | |
|---|---|---|
| 組件背景 | 組件的背景，預設透明 | |
| 元件邊距 | 元件邊框到組件邊框的距離，上下左右均可設定 預設上下邊距為 15px，左右邊距為 0px | |
| 按鈕排布 | 單行展示 | 自然佈局：左對齊 兩端對齊：按鈕組橫向充滿 |
| 自動填充 | 按鈕寬度隨文字長度自適應，顯示不下支援換列 | |
| 固定欄數 | 單個按鈕寬度=組件/欄數，支援換列 若一共9個按鈕，設定固定欄數「3」；則分 3 列顯示按鈕。 若設定了「行動端>進階>最大顯示列數」為「2」；則只顯示前 2 列按鈕 | |
| 按鈕背景 | 可設定按鈕初始背景和選中後的背景 | |
| 按鈕邊框 | 可設定按鈕邊框的線型、初始顏色、選中後的顏色、圓角大小 | |
| 按鈕字元 | 可設定按鈕中字元的字體大小、初始顏色和選中後的顏色 | |
3.4 圖文按鈕
選中「圖文按鈕」，可設定「圖文按鈕」各屬性項。行動端效果如下圖所示：
「圖文按鈕」各設定項說明如下表所示：
| 屬性 | 備註 |
|---|---|
| 組件背景 | 組件的背景，預設透明 |
| 元件邊距 | 元件邊框到組件邊框的距離，上下左右均可設定 預設上下邊距為 15px，左右邊距為 0px |
| 佈局方式 | 1）單列展示 支援自然佈局、等分佈局 2）自動填充 按鈕寬度隨文字長度自適應，顯示不下支援換列 3）固定欄數 單個按鈕寬度=組件/欄數，支援換列 |
| 圖示 | 可設定初始圖示和選中後的圖示 支援上傳自訂圖片 |
| 按鈕字元 | 可設定按鈕中字元的字體大小、初始顏色和選中後的顏色 |
