ステッパーStepperExperimental
複数ステップの進行状況を、完了・現在地・未完了の状態で示すコンポーネントです。
プレビュー
カート
2
配送先3
確認状態とバリエーション
横並び
短い手順や購入フローの現在地を示します。
カート
2
配送先3
確認縦並び
説明文が増える処理や、狭い領域で流れを縦に見せたい時に使います。
アップロード
2
検証3
反映全て完了
処理が完了した後の確認画面で使います。
作成
確認
公開
長いラベル
長いラベルやスマホ幅では、横並びで詰め込まず縦並びに切り替えます。
受付
2
担当者確認3
公開前チェック4
公開プロパティ
表は横にスクロールできます
| プロパティ | 型 | 初期値 | 説明 |
|---|---|---|---|
| steps | Array<{ label: string; state: 'completed' | 'current' | 'upcoming' }> | - | 表示するステップです。現在地には state: 'current' を指定します。 |
| orientation | 'horizontal' | 'vertical' | 'horizontal' | 横並びか縦並びかを指定します。 |
| className | string | - | ラッパーに追加するクラスです。狭い横並びでは横スクロールを付ける場合があります。 |
使い方
import { Stepper } from "@gunjo/ui"
export function CheckoutStepper() {
return (
<Stepper
aria-label="購入手続きの進行状況"
steps={[
{ label: "カート", state: "completed" },
{ label: "配送先", state: "current" },
{ label: "確認", state: "upcoming" },
]}
/>
)
}