通用型進度條可作為輸出以及輸入元件,將滑鈕開啟時進度條為輸入元件,否則則為輸出元件。
通用型進度條可以有橫式以及直式兩種,視長寬的尺寸自行調整。此外通用型進度條可以調整背景、進度條和滑鈕的邊框、顏色、透明度以及圓角半徑等風格屬性。
當需要使用大量進度條時,此元件為兼顧美觀,效能與資源的最佳選擇。
如欲快速入門,可以觀看博象教育影片,幫助了解通用型進度條
-
教育影片
元件屬性
通用型進度條
屬性名稱 | 屬性功能描述 | 操作型態 |
---|---|---|
元件名稱 | 元件實體名稱 | 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 |
右鍵選單
預覽段落狀態
屬性名稱 | 屬性功能描述 | 操作型態 |
---|---|---|
預覽段落狀態 | 選擇要預覽的段落狀態 |
元件子功能
屬性名稱 | 屬性功能描述 | 操作型態 |
---|---|---|
連接到使用手冊… | 連結至博象使用手冊 |