Stepper ステッパー
ステッパーは、番号の付いたステップを通して進捗を伝えます。 ウィザードのようなワークフローを提供します。
Steppersは、一連の論理ステップと番号付きステップの進行状況を表示します。 ナビゲーションにも使用できます。 ステッパーは、ステップが保存された後に一時的なフィードバックメッセージを表示する場合があります。
- ステップのタイプ： Editable, Non-editable, Mobile, Optional
- ステッパーのタイプ：Horizontal, Vertical, Linear, Non-linear
注： ステッパーは Material Design guidelinesには文書化されなくなりましたが、Material-UIは引き続きそれらをサポートします。
Horizontal Stepper
Linear
Stepper は、現在のステップインデックス（ゼロベース）を activeStep プロパティとして渡すことで制御できます。<code>Stepper方向は、 orientationプロパティを使用して設定されます。 Stepper方向は、 orientationプロパティを使用して設定されます。 Stepper方向は、 orientationプロパティを使用して設定されます。 Stepper方向は、 orientationプロパティを使用して設定されます。 Stepper方向は、 orientationプロパティを使用して設定されます。 Stepper方向は、 orientationプロパティを使用して設定されます。
この例では、 optionalプロパティを第2のStepコンポーネントに配置して、オプションの手順を使用する方法も示します。 オプションの手順がスキップされる場合の管理はユーザー次第です。 特定のステップでこれを決定したら、completed={false} を設定して、アクティブなステップインデックスがオプションのステップを超えていても、実際には完了していないことを示す必要があります。
Select campaign settings...
Linear - Alternative Label
alternativeLabelコンポーネントでalternativeLabel propを設定すると、ステップアイコンの下にラベルを配置できます。
Select campaign settings...
カスタマイズされたステッパー
コンポーネントのカスタマイズ例を次に示します。 コンポーネントのカスタマイズ例を次に示します。 詳細については、 オーバーライドのドキュメントページを参照してください。
What is an ad group anyways?
Non-linear
Non-linearステッパーにより、ユーザーはいつでもマルチステップフローを入力できます。
この例は、ステップが activeStep プロパティに基づいて disabled ={true} 自動的に設定されることを除いて、通常の水平ステッパーに似ています。
The use of the StepButton here demonstrates clickable step labels, as well as setting the completed flag. However because steps can be accessed in a non-linear fashion, it's up to your own implementation to determine when all steps are completed (or even if they need to be completed).
Step 1: Select campaign settings...
Step 1: Select campaign settings...
Select campaign settings...
For each ad campaign that you create, you can control how much you're willing to spend on clicks and conversions, which networks and geographical locations you want your ads to show on, and more.
モバイルステッパー
このコンポーネントは、モバイルデバイスに適したコンパクトなステッパーを実装します。 その着想については、mobile stepsを参照してください。
テキスト
これは基本的に、正しく配置された戻る/次へボタンです。 テキストの説明は自分で実装する必要がありますが、参考のために例を以下に示します。
San Francisco – Oakland Bay Bridge, United States
Text with Carousel effect
このデモは前のデモとよく似ていますが、 react-swipeable-views ステップの遷移を行います。
San Francisco – Oakland Bay Bridge, United States
Progress
Use a progress bar when there are many steps, or if there are steps that need to be inserted during the process (based on responses to earlier steps).