D06-07 單選按鈕組行動端按鈕組樣式

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

2. 安裝該插件後，可設定單選按鈕組行動專屬樣式，例如聯排按鈕、膠囊按鈕、圖文按鈕等。

3. 該插件僅對決策報表中body內的單選按鈕組組件生效。

4. 該插件僅對行動端範本生效，支援 APP 和 HTML5 端。

5. 插件安裝方式，可參考A11-18伺服器-插件管理。

1

點選【檔案】→【新建決策報表】，在元件面板中拖動【單選按鈕組元件】到範本中。

2

在右側屬性面板【組件設定】中，選中【radioGroup0】，點選【行動端】。

3

點選樣式範本後的【...】按鈕，進入樣式設定介面，選中【預設】樣式。

4

下拉屬性設定，選擇【自訂】，可對元件的樣式進行定製。

5

預設按鈕樣式效果。

1

點選【聯排按鈕】，進入聯排樣式屬性設定介面。

1. 屬性設定分為【通用屬性】和【設定】。

2. 【通用屬性】的設定和【預設】樣式設定相同。

3. 【設定】為針對聯排按鈕樣式的設定。

2

設定按鈕樣式。

1. 按鈕樣式預設為【自訂】，可設定按鈕佈局、按鈕背景、按鈕邊框和按鈕字元。

2. 【按鈕佈局】可設定按鈕邊框到組件邊框的距離，上下左右均可設定，預設上下邊距為 15px，左右邊距為 0px 。

3. 【按鈕背景】可設定按鈕初始背景和選中後的背景。

4. 【邊框】可設定按鈕邊框的線型、初始顏色、選中後的顏色、圓角大小。

5. 【字元】可設定按鈕中字元的字型大小、初始顏色和選中後的顏色。

3

聯排按鈕樣式效果。

1

點選【膠囊按鈕】，進入膠囊樣式屬性設定介面。

1. 屬性設定分為【通用屬性】和【設定】。

2. 【通用屬性】的設定和【預設】樣式設定相同。

3. 【設定】為針對膠囊按鈕樣式的設定。

2

設定按鈕樣式。

1. 按鈕樣式預設為【自訂】，可設定按鈕佈局、按鈕排布、按鈕背景、按鈕邊框和按鈕字元。

2. 【按鈕佈局】可設定按鈕邊框到組件邊框的距離，上下左右均可設定，預設上下邊距為 15px，左右邊距為 0px 。

3. 【按鈕排布】可設定左對齊或兩端對齊，【左對齊】按鈕組不橫向充滿，左端對齊，【兩端對齊】按鈕組橫向充滿，選項個數比較多，顯示不下時，出現滾動條。

4. 【按鈕背景】可設定按鈕初始背景和選中後的背景。

5. 【邊框】可設定按鈕邊框的線型、初始顏色、選中後的顏色、圓角大小。

6. 【字元】可設定按鈕中字元的字型大小、初始顏色和選中後的顏色。

3

膠囊按鈕樣式效果。

1

點選【圖文按鈕】，進入圖文樣式屬性設定介面。

1. 屬性設定分為【通用屬性】和【設定】。

2. 【通用屬性】的設定和【預設】樣式設定相同。

3. 【設定】為針對圖文按鈕樣式的設定。

2

設定按鈕樣式。

1. 按鈕樣式預設為【自訂】，可設定按鈕佈局、圖示和按鈕字元。

2. 【按鈕佈局】可設定按鈕邊框到組件邊框的距離，上下左右均可設定，預設上下邊距為 15px，左右邊距為 0px 。

3. 【圖示】可設定初始圖示和選中後的圖示，支援上傳自訂圖片。

4. 【字元】可設定按鈕中字元的字型大小、初始顏色和選中後的顏色。

3

圖文按鈕樣式效果。