[通用]單選按鈕組行動端按鈕組樣式

1.1 版本

1.2 功能簡介

行動端範本中，無線電鈕組可以幫助使用者展示多維度資料，但是樣式過於單一。

透過設定「無線電鈕組元件」行動專屬樣式，例如「聯排按鈕」、「膠囊按鈕」、「圖文按鈕」等。

2.1 使用場景

該樣式設定僅對行動端範本生效，支援 APP 和 HTML5 端。

2.2 操作方法

1）在 FineReport 設計器中開啟一張決策報表，在元件面板中拖動「無線電鈕組元件」到範本中。

2）在右側屬性面板「元件設定」中，若選中「radioGroup0」，在「校驗」下不勾選「允許為空」按鈕，行動端預覽時重複點選同一個 Tab ，效果不變。如下圖所示：

3）在右側屬性面板中為「無線電鈕組元件」新增資料字典，並設定元件預設值。如下圖所示：

4）在右側屬性面板元件設定中，選中「radioGroup0」，點選「行動端」，可在「樣式範本」處設定「無線電鈕組元件」的樣式。如下圖所示：

5）如果按鈕顯示多列，可透過進階中的「最大顯示列數」控制列數。如下圖所示：

6）設定條件屬性，實現報表內容跟隨按鈕切換。

2.3 按鈕樣式

2.3.1 預設

選中「預設」，使用者可設定「自訂」按鈕效果，行動端效果（以 APP 效果為例）如下圖所示：

2.3.2 聯排按鈕

選中「聯排按鈕」，可設定「聯排按鈕」各屬性項。行動端效果（以 APP 效果為例）如下圖所示：

「聯排按鈕」各設定項說明如下表所示：

2.3.3 膠囊按鈕

選中「膠囊按鈕」，可設定「膠囊按鈕」各屬性項。行動端效果（以 APP 效果為例）如下圖所示：

「膠囊按鈕」各設定項說明如下表所示：

2.3.4 圖文按鈕

選中「圖文按鈕」，可設定「圖文按鈕」各屬性項。行動端效果（以 APP 效果為例）如下圖所示：

「圖文按鈕」各設定項說明如下表所示：

本文範例：決策報表下有三個報表塊，新增聯排樣式的單選組按鈕，點選按鈕時，實現報表塊跟隨按鈕切換。

點選下載範例決策報表：範例決策報表.frm

3.1 新增無線電鈕組元件

1）在 FineReport 設計器中開啟範例決策報表，在元件面板中拖動「無線電鈕組元件」到範本中。

2）在右側屬性面板中，選中「radioGroup0」，在「校驗」下不勾選「允許為空」按鈕，實現行動端預覽時重複點選同一個 Tab 的效果不變。如下圖所示：

3.2 新增資料字典

選中「radioGroup0」，在「屬性>進階>元件值」處，設定元件預設值為 1 ，預設選擇品牌分析按鈕。

設定「無線電鈕組元件」的資料字典。類型設定選擇「自訂」，包括三種按鈕：品牌分析、店鋪分析、會員趨勢。如下圖所示：

3.3 選擇按鈕樣式

在右側屬性面板中，選中「radioGroup0」，點選「行動端」，在「樣式範本」處進行選擇和設定。

選中「聯排」，設定「聯排按鈕」各屬性項，如下圖所示：

3.4 設定條件屬性

當點選某一按鈕時，可透過條件屬性將其他兩個報表塊的列高設定為0，實現只顯示當前按鈕對應的報表塊。具體設定如下：

1）雙擊報表塊 report1，進入報表塊編輯介面，合併第 H 欄儲存格。

選中第 H 欄，在右側屬性頁面新增一個條件屬性，當滿足公式$radioGroup0 = 2 or $radioGroup0 = 3時，列高為0。實現當按鈕值為 1 時，顯示報表塊 report1 。

設定完成後，右擊隱藏第 H 欄。

2）雙擊報表塊 report2，進入報表塊編輯介面，合併第 J 欄儲存格。

選中第 J 欄，在右側屬性頁面新增一個條件屬性，當滿足公式$radioGroup0 = 1 or $radioGroup0 = 3時，列高為0。實現當按鈕值為 2 時，顯示報表塊 report2 。

設定完成後，右擊隱藏第 J 欄。

3）雙擊報表塊 report3，進入報表塊編輯介面，合併第 J 欄儲存格。

選中第 J 欄，在右側屬性頁面新增一個條件屬性，當滿足公式$radioGroup0 = 1 or $radioGroup0 = 2時，列高為0。實現當按鈕值為 3 時，顯示報表塊 report3 。

設定完成後，右擊隱藏第 J 欄。

3.5 效果預覽

行動端預覽範本效果如下圖所示：

3.6 已完成範本

點選下載已完成範本：無線電鈕組樣式範例範本.frm

手機重佈局 對無線電鈕組的顯示效果有明顯影響。如下圖所示：

• 勾選手機重佈局：元件自適應，一列一個元件，並可設定元件的佈局和顯示順序。

• 不勾選手機重佈局：元件顯示區域取決於範本中組件大小。若文字顯示不下，則截斷。