Introduction
"Steppers display progress through a sequence by breaking it up into multiple logical and numbered steps. Avoid using steppers to break up sections in a short form, or multiple times on one page". See the Material Design specification page for more details.
To include a stepper component
1. Stepper Component is represented by a list. Code a HTML List where each item represents a step. Add class mdl-stepper to container and mdl-step to the items.
2. All step has a label. Label includes a title with text and optionally the supporting message (e.g. Optional).
3. Code a block-level element for content. Add class mdl-step__content.
4. The actions is a block-level element with class mdl-step__actions.
5. Important: each button has your own data-stepper-{action} dataset attribute. A button can
has the action of continue, cancel, back or skip.
6. Give style (with MDL classes) to the action buttons.
We do not recommend that you use more than 3 buttons by step.
Configuration options
| Class | Effect | Remarks |
|---|---|---|
mdl-stepper
|
Defines a stepper container. | Required |
mdl-stepper--horizontal
|
Defines the stepper as horizontal type, the step name and numbers appear on a horizontal bar. | Manually added |
mdl-stepper--linear
|
Defines the stepper as linear and require users to complete one step in order to move on to the next. | Manually added |
mdl-stepper--feedback
|
Display a transient feedback message after a step is saved. | Manually added |
mdl-step
|
Defines a step item inside mdl-stepper.
|
Required |
is-active
|
Defines the active step. The first step will be marked as active if you don't set it. | Manually added |
mdl-step--optional
|
Defines a step as optional. | Manually added |
mdl-step--editable
|
Defines a step as editable after saved. | Manually added |
mdl-step__label
|
Defines the label section of step. | Required |
mdl-step__title
|
Defines title part of label. Must be inside a mdl-step__label
|
Required |
mdl-step__title-text
|
Defines the text content of title. Must be inside a mdl-step__title.
|
Required |
mdl-step__title-message
|
Defines an addtional text to the title (e.g. Optional). Must be inside a mdl-step__title.
|
Manually added |
mdl-step__content
|
Defines the content section of step. | Required |
mdl-step__actions
|
Defines the actions section of step | Required |
Javascript API
Methods
| Method | Effect | Return |
|---|---|---|
MaterialStepper.next()
|
Complete the current step and move one to the next. Using this method on editable steps (in linear stepper) it will search by the next step without "completed" state to move. When invoked it dispatch the event onstepcomplete to the step element. |
boolean - True if move and false if not move (e.g. On the last step)
|
MaterialStepper.back()
|
Move to the previous step without change the state of current step. Using this method in linear stepper it will check if previous step is editable to move. |
boolean - True if move and false if not move (e.g. On the first step)
|
MaterialStepper.skip()
|
Move to the next step without change the state of current step. This method works only in optional steps. |
boolean - True if move and false if not move (e.g. On non-optional step)
|
MaterialStepper.error(message)
|
Defines the current step state to "error" and shows the message parameter on title message element. When invoked it dispatch the event
onsteperror to the step element.
|
undefined
|
MaterialStepper.goto(id)
|
Move "active" to specified step id parameter. The id used as reference is
the integer number shown on the label of each step (e.g. 2).
|
boolean - True if move and false if not move (e.g. On id not found)
|
MaterialStepper.getActiveId()
|
Get the current "active" step element id on the stepper. The
id used as reference is the integer number shown on the label of each step (e.g. 2).
|
number
|
MaterialStepper.getActive()
|
Get the current "active" step element on the stepper. |
HTMLElement
|
Custom Events
On Step Back
| Event | Target | Fired |
|---|---|---|
onstepback
|
.mdl-step
|
When the step action button/link with [data-stepper-back] attribute is clicked.
|
On Step Cancel
| Event | Target | Fired |
|---|---|---|
onstepcancel
|
.mdl-step
|
When the step action button/link with [data-stepper-cancel] attribute is clicked. |
On Step Complete
| Event | Target | Fired |
|---|---|---|
onstepcomplete
|
.mdl-step
|
When MaterialStepper.next() method is called on step and it returns true.
|
On Step Error
| Event | Target | Fired |
|---|---|---|
onsteperror
|
.mdl-step
|
When MaterialStepper.error(message) method is called on step. |
On Step Next
| Event | Target | Fired |
|---|---|---|
onstepnext
|
.mdl-step
|
When the step action button/link with [data-stepper-next] attribute is clicked. |
On Step Skip
| Event | Target | Fired |
|---|---|---|
onstepskip
|
.mdl-step
|
When the step action button/link with [data-stepper-skip] attribute is clicked.
|
On Stepper Complete
| Event | Target | Fired |
|---|---|---|
onsteppercomplete
|
.mdl-stepper
|
When all required steps are completed. Optional steps are ignored for dispatch this event. |