Stepper
Stepperは入力フォームや申請フローなど、ステップごとの進捗状況を視覚的に示しながら操作をガイドするためのコンポーネントです。
プロパティ
Stepperは、以下のプロパティをサポートしています。
| 名前 | 型 | デフォルト値 | 説明 |
|---|---|---|---|
steps |
StepperStatus |
表示するSteps | |
isEquallySpaced |
boolean |
true |
等間隔か。初期値は等間隔 |
direction |
StepperDirection |
horizontal |
表示向き。初期値はhorizontal(横表示) |
finishedIcon |
Component |
Check |
finishedステータス時に表示するアイコン。初期はCheck |
errorIcon |
Component |
X |
errorステータス時に表示するアイコン。初期はX |
インストールの手順
以下のコンポーネントのコードを、使いたいプロジェクトにコピー＆ペーストします。
パスは実際のプロジェクトの構成にあわせて更新します。
使い方
サンプル
Default
3つのステップをデフォルト設定である横向き・等間隔で表示したパターンです。
HorizontalStartContent
3つのステップをデフォルト設定である横向き・等間隔で表示し上にコンテンツを表示したパターンです。
HorizontalEndContent
3つのステップをデフォルト設定である横向き・等間隔で表示し下にコンテンツを表示したパターンです。
HorizontalBothContents
3つのステップをデフォルト設定である横向き・等間隔で表示し上下にコンテンツを表示したパターンです。
Vertical
3つのステップを縦向き・等間隔で表示したパターンです。
VerticalStartContent
3つのステップを縦向き・等間隔で表示し左にコンテンツを表示したパターンです。
VerticalEndContent
3つのステップを縦向き・等間隔で表示し右にコンテンツを表示したパターンです。
VerticalBothContents
3つのステップを縦向き・等間隔で表示し左右にコンテンツを表示したパターンです。
HorizontalSize
3つのステップで、横向きでサイズを指定したパターンです。
VerticalSize
3つのステップで、縦向きでサイズを指定したパターンです。
Error
3つのステップのうち、エラー状態を含むパターンです。
Upcoming
3つのステップで、2番目のステップをスキップしているパターンです。