Steppers
Steppers convey progress through numbered steps. It provides a wizard-like workflow.
Steppers display progress through a sequence of logical and numbered steps. They may also be used for navigation. Steppers may display a transient feedback message after a step is saved.
Types of Steps
- Editable
- Non-editable
- Mobile
- Optional
Types of Steppers
- Horizontal
- Vertical
- Linear
- Non-linear
Note: Steppers are no longer documented in the Material Design guidelines, but Material-UI will continue to support them.
Horizontal Linear
The Stepper
can be controlled by passing the current step index (zero-based) as the activeStep
property. Stepper
orientation is set using the orientation
property.
This example also shows the use of an optional step by placing the optional
property on the second Step
component. Note that it's up to you to manage when an optional step is skipped. Once you've determined this for a particular step you must set completed={false}
to signify that even though the active step index has gone beyond the optional step, it's not actually complete.
Horizontal Non-linear
Non-linear steppers allow users to enter a multi-step flow at any point.
This example is similar to the regular horizontal stepper, except steps are no longer automatically set to disabled={true}
based on the activeStep
property.
We've used the StepButton
here to demonstrate 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).
Horizontal Linear - Alternative Label
Labels can be placed below the step icon by setting the alternativeLabel
property on the Stepper
component.
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.
Customized Stepper
Here is an example of customizing the component. You can learn more about this in the overrides documentation page.
This component uses a customized StepConnector
element that changes border color based on the active
and completed
state.
Select campaign settings...
Mobile Stepper
This component implements a compact stepper suitable for a mobile device. See mobile steps for its inspiration.
Mobile Stepper - Text
This is essentially a back/next button positioned correctly. You must implement the textual description yourself, however, an example is provided below for reference.
Mobile Stepper - Text with Carousel effect
This demo is very similar to the previous, the difference is the usage of react-swipeable-views to make the transition of steps.