Steps 步驟條
精靈、導覽與結帳用的有序進度。完成是成功綠勾，進行中維持品牌金，金色只代表「你在這裡」。
示範
水平
current 從 0 起算。較早的步驟是完成，目前步驟是進行中，後面的步驟等待。 含說明
description 在標題下方。也可以用插槽。 垂直
direction="vertical" 讓說明有更多空間。連接線在標題旁垂直延伸。 錯誤
status="error" 套在目前步驟。較早的步驟仍是完成。切換步驟不會自動清掉明確的錯誤狀態，請在應用裡把 status 設回 process。 可返回
clickable 時，只有較早的步驟可以啟動。目前步驟與後面的步驟不會發出 update:current。Enter 與空白鍵可啟動聚焦的步驟。 尺寸
圓圈在
sm / md / lg 為 24 / 28 / 32。 自訂圖示
在步驟上使用
icon 插槽，可取代數字、勾或錯誤標記。 API
Steps 屬性
| 屬性 | 型別 | 預設 |
|---|---|---|
current | number | 0 |
status | 'wait' | 'process' | 'finish' | 'error' | 'process' |
direction | 'horizontal' | 'vertical' | 'horizontal' |
size | 'sm' | 'md' | 'lg' | 'md' |
clickable | boolean | false |
items | { title, description?, status?, key? }[] | — |
有插槽的 gk-step 時，優先於 items。步驟自己的 status 會覆寫由 current 推導的狀態。
Step 屬性
| 屬性 | 型別 | 預設 |
|---|---|---|
title | string | '' |
description | string | '' |
status | 'wait' | 'process' | 'finish' | 'error' | '' | '' |
插槽
| 名稱 | 說明 |
|---|---|
| default | gk-step |
icon | 取代指示圖示 |
title | 標題 |
description | 說明 |
事件
| 名稱 | Detail |
|---|---|
update:current | 可到達的步驟被啟動時為 { current } |
change | { current }，與 update:current 同時 |
CSS parts
root、list、item、indicator、connector、title、description。
無障礙
- 根節點是
nav。名稱依文件語言：「Steps」或「步驟」。可在宿主上用aria-label覆寫。 - 每個步驟是
listitem。名稱包含序號、狀態與標題，例如「步驟 2，進行中：付款」。 - 目前步驟有
aria-current="step"。 - 指示與連接線為
aria-hidden。