Steps 步驟條

引導使用者依序完成一段多步驟流程,並顯示目前進度。使用 Element Plus 的 el-steps。

設計準則

• 用於有明確先後順序的流程:名單匯入、建立活動精靈、送審流程等;平行內容切換請用 Tabs
• active 指向目前步驟(從 0 起算)
• 標記樣式預設用「藍色步驟數字」(finish-status="finish"):完成、進行中的步驟都顯示品牌藍的數字,一眼看出第幾步;需要強調「已完成打勾」時才改用綠色勾勾(finish-status="success")
• 狀態色沿用語意色:進行中 process(品牌主色)、等待 wait(灰)、錯誤 error(danger);全產品一致,不自訂顏色
• 步驟數建議 3–5 步;過多代表流程該拆或該簡化
• 橫向放頁面頂部當進度指示;縱向用在時間軸式的歷程(每步帶時間、說明)
• 空間有限(例如表單頁頂)用 simple 精簡樣式
• 標題用動詞短語(「選擇客群」),必要時用 description 補一行說明

基本用法(可前進 / 後退)

loading

帶說明文字(置中)

loading

標記樣式:藍色步驟數字(預設)

完成與進行中的步驟都用品牌藍的數字,不變成綠勾。這是全產品的預設樣式。

loading

步驟狀態

單一步驟可用 status 覆寫:wait / process / finish / success / error。

loading

縱向(歷程時間軸)

loading

精簡樣式

空間有限(例如表單頁頂)用 simple。兩種標記樣式擇一使用:

A. 藍色步驟數字(預設,finish-status="finish")

loading

B. 綠色完成勾勾(強調已完成,finish-status="success")

loading

Do / Don't

✅ Do	❌ Don't
用在有先後順序的流程	拿來切換平行內容(該用 Tabs)
狀態色沿用語意色	每個產品自訂步驟顏色
步驟數 3–5	一條列出十個步驟
標題用動詞短語	標題寫「步驟一、步驟二」

給工程師

• el-steps 的 active(number,0 起算)是目前步驟;finish-status / process-status 設整體完成／進行樣式
• direction(horizontal / vertical)、align-center、simple、space 控制排版
• el-step 的 title、description、icon(Vue 元件)、status(覆寫單步狀態)
• 完整 API 見 Element Plus Steps 文件。本站規範優先於 EP 文件中的視覺建議。