電商購物體驗
Parcel Journey
售後追蹤時間軸：包裹沿垂直虛線路徑隨訂單狀態前進，已完成節點依序打勾點亮、當前節點呼吸脈動，預計送達日以日曆翻頁呈現。
把這個效果裝進你的專案
在專案資料夾執行指令，CLI 會加入原始碼與依賴套件，再依下方使用範例引用元件。
npx webberui@latest add parcel-journeyPlayground
即時調整 props、程式碼片段同步更新——直接試出你要的樣子再複製。
3
編輯中的呼叫預設屬性
<ParcelJourney/>
完整範例包含預覽的排版與資料。先安裝元件，再把範例檔貼入你的專案。
安裝
npx webberui@latest add https://webberui.com/r/parcel-journey.json或在 components.json 設定 registries 後，改用 @webberui/parcel-journey 安裝。
使用
import { ParcelJourney, type ParcelStep } from "@/components/ui/parcel-journey";
const steps: ParcelStep[] = [
{ label: "訂單成立", description: "已收到你的訂單。", timestamp: "7/10 09:12" },
{ label: "已出貨", description: "台北轉運中心", timestamp: "7/11 18:40" },
{ label: "配送中", description: "新竹配送站", timestamp: "7/13 08:05" },
{ label: "派送到府" },
{ label: "已送達" },
];
<ParcelJourney
steps={steps}
currentStep={2}
estimatedDelivery="2026-07-13"
/>;currentStep 之前的節點視為已完成（打勾），該節點為進行中（顯示包裹並呼吸脈動）。當包裹抵達終點時，傳入 delivered 讓當前節點改以打勾收尾：
<ParcelJourney steps={steps} currentStep={4} delivered estimatedDelivery={new Date()} />Props
| Prop | 型別 | 預設值 | 說明 |
|---|---|---|---|
steps | ParcelStep[] | — | 旅程各站點，由起點到終點依序排列 |
currentStep | number | — | 目前所在站點索引（0 起算），會自動夾在有效範圍內 |
delivered | boolean | false | 為 true 時當前節點改以打勾呈現、包裹停止脈動 |
estimatedDelivery | Date | string | — | 預計送達日；提供時於頂部以日曆翻頁動畫呈現 |
deliveryLabel | string | "預計送達" | 送達日期的說明標籤文字 |
locale | string | "zh-TW" | 日期格式化所用地區設定 |
className | string | — | 附加到最外層容器的 class |
ParcelStep
| 欄位 | 型別 | 說明 |
|---|---|---|
id | string | 節點唯一鍵，未提供時以索引為鍵 |
label | string | 節點標題（如「已出貨」「配送中」） |
description | string | 補充說明（地點、單號、承運商等） |
timestamp | string | 時間戳文字，顯示於標題右側 |
細節
- 節點以統一直徑排列，垂直虛線路徑連接相鄰兩節點的中心；已走過的路段以實線由上而下填色推進，填色前緣正好抵達包裹所在節點。
- 包裹以共享
layoutId實作，currentStep變更時會沿路徑平滑滑移到新節點，而非瞬間跳位。 - 已完成節點在首次揭示時依序打勾（stagger），當前節點的包裹持續呼吸脈動並向外擴散淡出的環。
- 預計送達日期變更時，頂部日曆卡片以
rotateX翻頁揭示新日期。
可及性
- 元件以語意化
<ol>/<li>呈現，當前站點標記aria-current="step"。 - 開頭以
role="status"提供純文字狀態摘要（預計送達日與目前站點），所有動畫節點與圖示均aria-hidden。 - 使用者系統開啟「減少動態效果」時，關閉包裹滑移、脈動、填色推進與日曆翻頁，狀態直接切換到位。