Stepper
多步骤流程可视化 — 注册流 / 结账 / 向导。通过 items 数组传递，各项添加 state=done|current|upcoming。orientation（水平默认 / 垂直）和 variant（编号默认 / 圆点）2 个修饰符。timeline 用于仅追加历史，stepper 用于有界顺序进度。
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="[...]" />