Timeline
daisyUI 5 timeline 类的包装器，时序列表。直接通过 items 数组传递即可。orientation（垂直/水平）、compact（单侧对齐）、snap（图标上端对齐）、appearance（实心默认 / 柔和）4 个修饰符。各项添加 state=done|current|upcoming 时，中间图标和连接线改变颜色。默认实心（浓主色）使完成链突出清晰。需要温和外观时才选 appearance="soft"。
default vertical, no compact, appearance=solid — 4 items (商品ステータス 例)
-
10/01 09:12注文受付ご注文ありがとうございます
-
10/01 10:30入金確認クレジットカード決済を確認しました
-
10/02 14:00発送準備倉庫でピッキング中
-
10/03 16:45お届け完了お客様にお渡しが完了しました
orientation=horizontal — 横並びの 4 ステップ
-
Step 1カート
-
Step 2配送先
-
Step 3支払い
-
Step 4完了
compact — 全 items を片側に寄せる (片側レイアウト)
-
2025/06要件定義クライアントヒアリング完了
-
2025/07設計API・データモデル確定
-
2025/08実装コア機能の開発
-
2025/09リリース本番デプロイ
snap — middle icon を上端に snap (時刻に高低差があっても揃う)
with state — done / current / upcoming で middle icon と connector の色が変化
-
10/01 09:12注文受付完了済み
-
10/01 10:30入金確認完了済み
-
10/02発送準備現在ここ
-
10/03 予定お届け未着手
-
10/04 予定受領確認未着手
appearance — solid (default, saturated) vs soft (opt-in, muted)
appearance=solid (default)
-
doneStep 1
-
doneStep 2
-
doneStep 3
-
currentStep 4
-
upcomingStep 5
appearance=soft (opt-in)
-
doneStep 1
-
doneStep 2
-
doneStep 3
-
currentStep 4
-
upcomingStep 5
solid (左) = default の text-primary / bg-primary。soft (右) = done icon が text-primary/70 + connector が bg-primary/30 で muted。
使い方
{{-- items 配列で渡す (vertical がデフォルト) --}}
<x-timeline :items="[
['title' => '注文受付', 'time' => '10/01 09:12', 'desc' => 'ありがとうございます'],
['title' => '入金確認', 'time' => '10/01 10:30'],
['title' => '発送準備', 'time' => '10/02 14:00'],
['title' => 'お届け完了', 'time' => '10/03 16:45'],
]" />
{{-- orientation: vertical (default) / horizontal --}}
<x-timeline orientation="horizontal" :items="[...]" />
{{-- compact: 全 items を片側に寄せる --}}
<x-timeline compact :items="[...]" />
{{-- snap: middle icon を上端 snap --}}
<x-timeline snap :items="[...]" />
{{-- state per item: done / current / upcoming で icon・connector の色変化 --}}
<x-timeline :items="[
['title' => 'Step 1', 'state' => 'done'],
['title' => 'Step 2', 'state' => 'current'],
['title' => 'Step 3', 'state' => 'upcoming'],
]" />
{{-- appearance: solid (default, saturated) / soft (opt-in, muted) --}}
<x-timeline appearance="soft" :items="[...]" />