Progress 進度條
上傳、任務與精簡儀表板用的確定進度。預設填色是品牌金，與主要按鈕同一套語言。成功、警告、錯誤使用語意色。預設不是 info 藍。
示範
直線
type 預設 line。軌道是中性灰，填色是品牌金。 狀態
success、warning、error 會改填色。百分比到 100 不會自動改狀態。 百分比
show-indicator 預設顯示百分比。設 show-indicator="false" 可隱藏。 軌道內文字
indicator-placement="inside" 只用於直線。軌道加高到 18px。達到 60% 以上時，文字落在填色上。 圓形
直徑為 64 / 96 / 120。
indicator 插槽可取代中央文字。 尺寸
直線高度 6 / 8 / 10。
height 可覆寫。圓形筆畫預設 5 / 6 / 7，可用 stroke-width 覆寫。 處理中閃光
processing 在填色上加一層閃光。prefers-reduced-motion 會關掉閃光與寬度過渡。不確定進度不在 v1。 API
屬性
| 屬性 | 型別 | 預設 |
|---|---|---|
type | 'line' | 'circle' | 'line' |
percentage | number | 0 |
status | 'default' | 'success' | 'error' | 'warning' | 'default' |
show-indicator | boolean | true |
indicator-placement | 'outside' | 'inside' | 'outside' |
height | number | 0（用尺寸預設） |
stroke-width | number | 0（用尺寸預設） |
processing | boolean | false |
size | 'sm' | 'md' | 'lg' | 'md' |
label | string | '' |
percentage 會夾在 0–100。非有限數值變成 0。v1 沒有事件，由應用綁定 percentage。
插槽
| 名稱 | 說明 |
|---|---|
indicator | 取代百分比文字 |
CSS parts
root、track、fill、indicator、circle、trail、path。
無障礙
- 宿主是
role="progressbar"，並帶aria-valuemin="0"、aria-valuemax="100"、aria-valuenow。 label會寫入aria-label。label為空時，保留宿主上原有的aria-label。