Admin 元件
Timeline
依節點狀態呈現進度的時間軸。狀態：pending／current／completed／error；方向：垂直、水平。
安裝
Terminal
pnpm dlx shadcn-vue add @admin/timelineimport { AdminTimeline, AdminTimelineContent, AdminTimelineDate, AdminTimelineHeader, AdminTimelineIndicator, AdminTimelineItem, AdminTimelineSeparator, AdminTimelineTitle,} from '@/components/admin/timeline'用法
<script setup lang="ts">import type { TimelineItemStatus } from '@/components/admin/timeline'import { AdminTimeline, AdminTimelineContent, AdminTimelineDate, AdminTimelineHeader, AdminTimelineIndicator, AdminTimelineItem, AdminTimelineSeparator, AdminTimelineTitle} from '@/components/admin/timeline'const events: { status: TimelineItemStatus date: string label: string title: string content: string}[] = [ { status: 'completed', date: '2026-03-01', label: '3 月 1 日', title: '專案啟動', content: '建立 repo 與初始 stakeholder 名單，完成 kick-off 會議。' }, { status: 'completed', date: '2026-04-12', label: '4 月 12 日', title: '需求審查通過', content: '產品需求書經 PM/Tech Lead 簽核，進入設計階段。' }, { status: 'current', date: '2026-05-09', label: '5 月 9 日', title: '開發中', content: '前後端並行開發，預計於月底進入測試。' }, { status: 'pending', date: '2026-06-30', label: '6 月 30 日', title: '發佈', content: '完成上線審核並公開發佈。' }]</script><template> <admin-timeline class="w-full max-w-md"> <admin-timeline-item v-for="event in events" :key="event.title" :status="event.status"> <admin-timeline-header> <admin-timeline-date :datetime="event.date">{{ event.label }}</admin-timeline-date> <admin-timeline-title>{{ event.title }}</admin-timeline-title> </admin-timeline-header> <admin-timeline-indicator /> <admin-timeline-separator /> <admin-timeline-content>{{ event.content }}</admin-timeline-content> </admin-timeline-item> </admin-timeline></template>場景
自訂 indicator（icon）
<script setup lang="ts">import type { TimelineItemStatus } from '@/components/admin/timeline'import { IconCheck, IconCircle, IconClock, IconX } from '@tabler/icons-vue'import { AdminTimeline, AdminTimelineDate, AdminTimelineHeader, AdminTimelineIndicator, AdminTimelineItem, AdminTimelineSeparator, AdminTimelineTitle} from '@/components/admin/timeline'const iconMap = { completed: IconCheck, current: IconClock, error: IconX, pending: IconCircle}const events: { status: TimelineItemStatus; date: string; label: string; title: string }[] = [ { status: 'completed', date: '2026-04-15', label: '已提交', title: '提交申請' }, { status: 'completed', date: '2026-04-22', label: '已審核', title: '主管審核通過' }, { status: 'error', date: '2026-05-01', label: '已退件', title: '財務複核退回' }, { status: 'current', date: '2026-05-09', label: '處理中', title: '重新送審' }, { status: 'pending', date: '2026-05-16', label: '待撥款', title: '撥款' }]</script><template> <admin-timeline class="w-full max-w-md"> <admin-timeline-item v-for="event in events" :key="event.title" :status="event.status"> <admin-timeline-header> <admin-timeline-date :datetime="event.date">{{ event.label }}</admin-timeline-date> <admin-timeline-title>{{ event.title }}</admin-timeline-title> </admin-timeline-header> <admin-timeline-indicator class="flex items-center justify-center" as-child> <component :is="iconMap[event.status]" :stroke-width="2.5" /> </admin-timeline-indicator> <admin-timeline-separator /> </admin-timeline-item> </admin-timeline></template>水平 orientation
<script setup lang="ts">import type { TimelineItemStatus } from '@/components/admin/timeline'import { AdminTimeline, AdminTimelineDate, AdminTimelineHeader, AdminTimelineIndicator, AdminTimelineItem, AdminTimelineSeparator, AdminTimelineTitle} from '@/components/admin/timeline'const steps: { status: TimelineItemStatus; date: string; title: string }[] = [ { status: 'completed', date: '04/01', title: '受理' }, { status: 'completed', date: '04/15', title: '審核' }, { status: 'current', date: '04/28', title: '處理' }, { status: 'pending', date: '05/05', title: '完成' }, { status: 'pending', date: '05/10', title: '結案' }]</script><template> <admin-timeline class="w-full" orientation="horizontal"> <admin-timeline-item v-for="s in steps" :key="s.title" :status="s.status"> <admin-timeline-header> <admin-timeline-date>{{ s.date }}</admin-timeline-date> <admin-timeline-title>{{ s.title }}</admin-timeline-title> </admin-timeline-header> <admin-timeline-indicator /> <admin-timeline-separator /> </admin-timeline-item> </admin-timeline></template>API 參考
組成
<template> <admin-timeline> <admin-timeline-item status="completed"> <admin-timeline-header> <admin-timeline-indicator /> <admin-timeline-date datetime="2026-05-01">2026/05/01</admin-timeline-date> </admin-timeline-header> <admin-timeline-separator /> <admin-timeline-content> <admin-timeline-title>建立訂單</admin-timeline-title> </admin-timeline-content> </admin-timeline-item> </admin-timeline></template>admin-timeline
Props
| 名稱 | 型別 | 預設值 | 說明 |
|---|---|---|---|
orientation | TimelineOrientation | undefined | "vertical" | 時間軸方向 |
class | ClassValue | — | 根元素之自訂 class |
Slots
| 名稱 | Bindings | 說明 |
|---|---|---|
default | {} | — |
admin-timeline-item
Props
| 名稱 | 型別 | 預設值 | 說明 |
|---|---|---|---|
status | TimelineItemStatus | undefined | "pending" | 該 item 的狀態；決定 indicator 與 separator 的配色 |
class | ClassValue | — | 根元素之自訂 class |
Slots
| 名稱 | Bindings | 說明 |
|---|---|---|
default | {} | — |
admin-timeline-date
Props
| 名稱 | 型別 | 預設值 | 說明 |
|---|---|---|---|
asChild | boolean | undefined | — | Change the default rendered element for the one passed as a child, merging their props and behavior. Read our [Composition](https://www.reka-ui.com/docs/guides/composition) guide for more details. |
as | globalThis.Component | AsTag | undefined | "time" | The element or component this component should render as. Can be overwritten by `asChild`. |
datetime | string | undefined | — | 對應 `<time datetime>`；機器可讀的日期／時間字串 |
class | ClassValue | — | 根元素之自訂 class |
Slots
| 名稱 | Bindings | 說明 |
|---|---|---|
default | {} | — |
admin-timeline-indicator
Props
| 名稱 | 型別 | 預設值 | 說明 |
|---|---|---|---|
asChild | boolean | undefined | — | Change the default rendered element for the one passed as a child, merging their props and behavior. Read our [Composition](https://www.reka-ui.com/docs/guides/composition) guide for more details. |
as | globalThis.Component | AsTag | undefined | "div" | The element or component this component should render as. Can be overwritten by `asChild`. |
class | ClassValue | — | 根元素之自訂 class |
Slots
| 名稱 | Bindings | 說明 |
|---|---|---|
default | {} | — |
admin-timeline-content
Props
| 名稱 | 型別 | 預設值 | 說明 |
|---|---|---|---|
class | ClassValue | — | 根元素之自訂 class |
Slots
| 名稱 | Bindings | 說明 |
|---|---|---|
default | {} | — |
admin-timeline-header
Props
| 名稱 | 型別 | 預設值 | 說明 |
|---|---|---|---|
class | ClassValue | — | 根元素之自訂 class |
Slots
| 名稱 | Bindings | 說明 |
|---|---|---|
default | {} | — |
admin-timeline-separator
Props
| 名稱 | 型別 | 預設值 | 說明 |
|---|---|---|---|
class | ClassValue | — | 根元素之自訂 class |
admin-timeline-title
Props
| 名稱 | 型別 | 預設值 | 說明 |
|---|---|---|---|
class | ClassValue | — | 根元素之自訂 class |
Slots
| 名稱 | Bindings | 說明 |
|---|---|---|
default | {} | — |
注意事項
- 每個
admin-timeline-item以status各自標註狀態（pending/current/completed/error，預設pending）；狀態由呼叫方依實際資料指定，root 不持有 active step。 - 配色對應：
completed綠、current藍（實心 + ring）、pending灰、error紅；連接線於completed轉綠、error轉紅。 status為純視覺（indicator 帶aria-hidden）。為確保無障礙，狀態語意務必同時以admin-timeline-title/admin-timeline-content的文字表達，勿只靠顏色。AdminTimelineDate與AdminTimelineIndicator支援as-child，其他 sub-component 不支援。- Indicator 不建議塞 interactive 元素（
<button>、<a>等）。Timeline 的定位是視覺呈現，需要互動式步驟切換請改用admin-stepper。