通用型進度條可作為輸出以及輸入元件，將滑鈕開啟時進度條為輸入元件，否則則為輸出元件。
通用型進度條可以有橫式以及直式兩種，視長寬的尺寸自行調整。此外通用型進度條可以調整背景、進度條和滑鈕的邊框、顏色、透明度以及圓角半徑等風格屬性。
當需要使用大量進度條時，此元件為兼顧美觀，效能與資源的最佳選擇。
如欲快速入門，可以觀看博橡教育影片，幫助了解通用型進度條
-
教育影片
元件屬性
通用型進度條
| 屬性名稱 | 屬性功能描述 | 操作型態 |
|---|---|---|
| 元件名稱 | 元件實體名稱 | Name |
| 連結到使用手冊 | 連結至博橡使用手冊 |
顯示/隱藏控制
| 屬性名稱 | 屬性功能描述 | 操作型態 |
|---|---|---|
| 繫結顯示/隱藏 | 決定是否要綁定暫存器，藉由暫存器內容觸發隱藏元件 | Checkbox |
| 選擇顯示/隱藏 | 透過改變暫存器值決定顯示或不顯示元件 | Register Selector |
行為設定
| 屬性名稱 | 屬性功能描述 | 操作型態 |
|---|---|---|
| 最小資料值 | 最小資料值，對應到進度條開始 | Number Editor |
| 最大資料值 | 最大資料值，對應到進度條結束 | Number Editor |
| 綁定數值暫存器 | 如果綁定的暫存器內容等於最小資料值，進度條顯示在開始位置 如果綁定的暫存器內容等於最大資料值，進度條顯示在結束位置 |
Register Selector |
| 預覽段落狀態 | 選擇要預覽的段落狀態 | Dropdown List |
進度條風格設定
| 屬性名稱 | 屬性功能描述 | 操作型態 |
|---|---|---|
| 主要顏色 | 設定進度條的主要顏色 | Color Selector |
| 漸變顏色 | 設定進度條的漸變顏色 | Color Selector |
| 進度條不透明度 % | 設定進度條的不透明度(0-100%) | Number Editor |
| 圓角半徑 | 設定進度條的圓角半徑 | Number Editor |
| 邊框顏色 | 設定進度條邊框的顏色 | Color Selector |
| 邊框寬度 | 設定進度條邊框的寬度 | Number Editor |
| 陰影顏色 | 設定進度條陰影的顏色 | Color Selector |
| 陰影寬度 | 設定進度條陰影的寬度 | Number Editor |
段落2風格設定
| 屬性名稱 | 屬性功能描述 | 操作型態 |
|---|---|---|
| 啟用段落 2 | 決定是否要顯示第二段落 | Checkbox |
| 段落開始數值 | 設定第二段落開始數值，當綁定的暫存器內容等於此數值時，顯示第二段落與其設定 必須小於第三段落開始數值 |
Number Editor |
| 主要顏色 | 設定第二段落的主要顏色 | Color Selector |
| 漸變顏色 | 設定第二段落的漸變顏色 | Color Selector |
| 進度條不透明度 % | 設定第二段落的不透明度(0-100%) | Number Editor |
| 圓角半徑 | 設定第二段落的圓角半徑 | Number Editor |
| 邊框顏色 | 設定第二段落邊框的顏色 | Color Selector |
| 邊框寬度 | 設定第二段落邊框的寬度 | Number Editor |
| 陰影顏色 | 設定第二段落陰影的顏色 | Color Selector |
| 陰影寬度 | 設定第二段落陰影的寬度 | Number Editor |
段落3風格設定
| 屬性名稱 | 屬性功能描述 | 操作型態 |
|---|---|---|
| 啟用段落 3 | 決定是否要顯示第三段落 | Checkbox |
| 段落開始數值 | 設定第三段落開始數值，當綁定的暫存器內容等於此數值時，顯示第三段落與其設定 | Number Editor |
| 主要顏色 | 設定第三段落的主要顏色 | Color Selector |
| 漸變顏色 | 設定第三段落的漸變顏色 | Color Selector |
| 進度條不透明度 % | 設定第三段落的不透明度(0-100%) | Number Editor |
| 圓角半徑 | 設定第三段落的圓角半徑 | Number Editor |
| 邊框顏色 | 設定第三段落邊框的顏色 | Color Selector |
| 邊框寬度 | 設定第三段落邊框的寬度 | Number Editor |
| 陰影顏色 | 設定第三段落陰影的顏色 | Color Selector |
| 陰影寬度 | 設定第三段落陰影的寬度 | Number Editor |
滑鈕風格設定
| 屬性名稱 | 屬性功能描述 | 操作型態 |
|---|---|---|
| 啟用滑鈕 | 決定是否要顯示使用滑鈕，可以藉由滑鈕改變暫存器的值 | Checkbox |
| 主要顏色 | 設定滑鈕的主要顏色 | Color Selector |
| 漸變顏色 | 設定滑鈕的漸變顏色 | Color Selector |
| 滑鈕不透明度 % | 設定滑鈕的不透明度(0-100%) | Number Editor |
| 圓角半徑 | 設定滑鈕的圓角半徑 | Number Editor |
| 邊框顏色 | 設定滑鈕邊框的顏色 | Color Selector |
| 邊框寬度 | 設定滑鈕邊框的寬度 | Number Editor |
| 陰影顏色 | 設定滑鈕陰影的顏色 | Color Selector |
| 陰影寬度 | 設定滑鈕陰影的寬度 | Number Editor |
進度條邊距設定
| 屬性名稱 | 屬性功能描述 | 操作型態 |
|---|---|---|
| 進度條和背景的上下邊距 | 調整進度條和背景的上下邊距，最大最小值隨元件高度而改變 | Number Editor |
| 進度條和背景的左右邊距 | 調整進度條和背景的左右邊距，最大最小值隨元件寬度而改變 | Number Editor |
進度條背景設定
| 屬性名稱 | 屬性功能描述 | 操作型態 |
|---|---|---|
| 主要顏色 | 設定進度條背景的主要顏色 | Color Selector |
| 漸變顏色 | 設定進度條背景的漸變顏色 | Color Selector |
| 背景不透明度 % | 設定進度條背景的不透明度(0-100%) | Number Editor |
| 圓角半徑 | 設定進度條背景的圓角半徑 | Number Editor |
| 邊框顏色 | 設定進度條背景邊框的顏色 | Color Selector |
| 邊框寬度 | 設定進度條背景邊框的寬度 | Number Editor |
| 陰影顏色 | 設定進度條背景陰影的顏色 | Color Selector |
| 陰影寬度 | 設定進度條背景陰影的寬度 | Number Editor |
背景邊距設定
| 屬性名稱 | 屬性功能描述 | 操作型態 |
|---|---|---|
| 背景和元件的上下邊距 | 調整背景和元件外框的上下邊距，最大最小值隨元件高度而改變 | Number Editor |
| 背景和元件的左右邊距 | 調整背景和元件外框的左右邊距，最大最小值隨元件寬度而改變 | Number Editor |
右鍵選單
預覽段落狀態
| 屬性名稱 | 屬性功能描述 | 操作型態 |
|---|---|---|
| 預覽段落狀態 | 選擇要預覽的段落狀態 |
元件子功能
| 屬性名稱 | 屬性功能描述 | 操作型態 |
|---|---|---|
| 連接到使用手冊… | 連結至博橡使用手冊 |