Stepper
Visualize multi-step process (sign-up flow, checkout, wizard). Pass items array; set state=done|current|upcoming on each. orientation (horizontal default / vertical), variant (numbered default / dotted). timeline is for append-only history; stepper is for bounded sequential progress.
default horizontal, numbered — sign-up flow の 3 ステップ
-
Sign up
-
2Verify email
-
3Invite team
with descriptions — checkout 4 ステップ
-
Cart3 items
-
AddressConfirmed
-
3PaymentVisa ····
-
4ConfirmReview
vertical — プロジェクトフェーズ
-
要件定義クライアントヒアリング完了
-
設計API・データモデル確定
-
3実装コア機能の開発
-
4リリース本番デプロイ
variant=dotted — コンパクトな progress 表示 (carousel position 等)
vertical + dotted — 軽量な縦リスト
-
Step 1 — done
-
Step 2 — done
-
Step 3 — current
-
Step 4 — upcoming
全 done — 完了状態
-
Order
-
Pay
-
Ship
-
Done
使い方
{{-- 最小 — items 配列で渡す --}}
<x-stepper :items="[
['label' => 'Sign up', 'state' => 'done'],
['label' => 'Verify email','state' => 'current'],
['label' => 'Invite team', 'state' => 'upcoming'],
]" />
{{-- with descriptions --}}
<x-stepper :items="[
['label' => 'Cart', 'desc' => '3 items', 'state' => 'done'],
['label' => 'Payment', 'desc' => 'Visa ····', 'state' => 'current'],
]" />
{{-- orientation: horizontal (default) / vertical --}}
<x-stepper orientation="vertical" :items="[...]" />
{{-- variant: numbered (default) / dotted (コンパクト) --}}
<x-stepper variant="dotted" :items="[...]" />