ステッパーStepper
Experimental

複数ステップの進行状況を、完了・現在地・未完了の状態で示すコンポーネントです。

カート

配送先

確認

状態とバリエーション

短い手順や購入フローの現在地を示します。

カート

配送先

確認

説明文が増える処理や、狭い領域で流れを縦に見せたい時に使います。

アップロード

検証

反映

処理が完了した後の確認画面で使います。

作成

確認

公開

長いラベルやスマホ幅では、横並びで詰め込まず縦並びに切り替えます。

受付

担当者確認

公開前チェック

公開

表は横にスクロールできます

プロパティ	型	初期値	説明
steps	Array<{ label: string; state: 'completed' \| 'current' \| 'upcoming' }>	-	表示するステップです。現在地には state: 'current' を指定します。
orientation	'horizontal' \| 'vertical'	'horizontal'	横並びか縦並びかを指定します。
className	string	-	ラッパーに追加するクラスです。狭い横並びでは横スクロールを付ける場合があります。