Create a set of Steps within the Stepper, then use the
on:complete event to detect when all steps are
complete. Since horizontal space may be limited on small screens, we recommend no more than five steps at max.
Next, Step and Previous
Events are fired when the next or previous steps are pressed, step fires for both cases.
e.detail.state.currentcontains the step shown to the user after navigation,
e.detail.stepcontains the step where navigation occurred.
Each Step can have a
locked property set, when set to TRUE this locks progression for that step. For
example, you can lock a step until a form within it becomes valid.
stepTerm property to override text shown in the animated section at the top of the Stepper, which is
useful if you need i18n support for other languages.
This can be overwritten per each Step as well, which updates the default and header slot placeholder text.
You may override the contents of the disabled Back button in the first step by supplying a
navigation slot. Use this to supply a message or implement a custom action. This is not supported for step two and forward.