Wizard
<ui5-wizard> | Since 1.0.0-rc.10The ui5-wizard helps users to complete a complex task by dividing it into sections and guiding them through it.
It has two main areas - a navigation area at the top showing the step sequence and a content area below it.
Structure​
Navigation area​
The top most area of the ui5-wizard is occupied by the navigation area.
It shows the sequence of steps, where the recommended number of steps is between 3 and 8 steps.
- Steps can have different visual representations - numbers or icons.
- Steps might have labels for better readability - titleText and subTitleText.
- Steps are defined by using the
ui5-wizard-stepas slotted element within theui5-wizard.
Note: If no selected step is defined, the first step will be auto selected.
Note: If multiple selected steps are defined, the last step will be selected.
Keyboard Handling​
The user can navigate using the following keyboard shortcuts:
Wizard Progress Navigation​
- [Left] or [Down] - Focus moves backward to the WizardProgressNavAnchors.
- [Up] or [Right] - Focus moves forward to the WizardProgressNavAnchor.
- [Space] / [Enter] or [Return] - Selects an active step
- [Home] or [PAGE UP] - Focus goes to the first step
- [End] or [PAGE DOWN] - Focus goes to the last step
Fast Navigation​
This component provides a build in fast navigation group which can be used via [F6] / [Shift] + [F6] / [Ctrl] + [Alt/Option] / [Down] or [Ctrl] + [Alt/Option] + [Up].
In order to use this functionality, you need to import the following module:
import "@ui5/webcomponents-base/dist/features/F6Navigation.js"
Content​
The content occupies the main part of the page. It can hold any type of HTML elements.
It's defined by using the ui5-wizard-step as slotted element within the ui5-wizard.
Scrolling​
The component handles user scrolling by selecting the closest step, based on the current scroll position and scrolls to particular place, when the user clicks on the step within the navigation area.
Important: In order the component's scrolling behaviour to work, it has to be limited from the outside parent element in terms of height. The component or its parent has to be given percentage or absolute height. Otherwise, the component will be scrolled out with the entire page.
For example:
<ui5-dialog style="height: 80%">
<ui5-wizard></ui5-wizard>
</ui5-dialog>
Moving to next step​
The ui5-wizard-step provides the necessary API and it's up to the user of the component to use it to move to the next step.
You have to set its selected property (and remove the disabled one if set) to true.
The ui5-wizard will automatically scroll to the content of the newly selected step.
The Fiori 3 guidelines recommends having a "nextStep" button in the content area.
You can place a button, or any other type of element to trigger step change, inside the ui5-wizard-step,
and show/hide it when certain fields are filled or user defined criteria is met.
Usage​
When to use:​
When the user has to accomplish a long or unfamiliar task.
When not to use:​
When the task has less than 3 steps.
Responsive Behavior​
On small widths the step's titleText, subtitleText and separators in the navigation area shrink and from particular point the steps are grouped together and overlap. Tapping on them will show a popover to select the step to navigate to. On mobile device, the grouped steps are presented within a dialog.
ES6 Module Import​
import "@ui5/webcomponents-fiori/dist/Wizard.js"; (includes
Basic Sample​
By default the navigation to another step happens with scrolling or pressing the given step in the Wizard header. How to use the sample: to explore the steps click the "Step2' button, then enable the "5 years guarantee included " switch to disover the "Step3" button to reach the final step.
Properties​
contentLayout​
Slots​
default​
Events​
step-change​
Methods​
No methods available for this component.
CSS Parts​
More Samples​
Page Mode​
Instead of scrolling each step is shown as a separate page.