A component that represents a logical step as part of the ui5-wizard.
It is meant to aggregate arbitrary HTML elements that form the content of a single step.
Structure
- Each wizard step has arbitrary content.
- Each wizard step might have texts - defined by the
titleText and subtitleText properties.
- Each wizard step might have an icon - defined by the
icon property.
- Each wizard step might display a number in place of the
icon, when it's missing.
Usage
The ui5-wizard-step component should be used only as slot of the ui5-wizard component
and should not be used standalone.
Properties
titleText
| Description | Defines the titleText of the step.
Note: The text is displayed in the ui5-wizard navigation header. |
| Type | string | undefined |
| Default | undefined |
| Since | 1.0.0-rc.15 |
subtitleText
| Description | Defines the subtitleText of the step.
Note: the text is displayed in the ui5-wizard navigation header. |
| Type | string | undefined |
| Default | undefined |
| Since | 1.0.0-rc.15 |
icon
| Description | Defines the icon of the step.
Note: The icon is displayed in the ui5-wizard navigation header.
The SAP-icons font provides numerous options. See all the available icons in the Icon Explorer. |
| Type | string | undefined |
| Default | undefined |
disabled
| Description | Defines if the step is disabled. When disabled the step is displayed, but the user can't select the step by clicking or navigate to it with scrolling.
Note: Step can't be selected and disabled at the same time. In this case the selected property would take precedence. |
| Type | boolean |
| Default | false |
selected
| Description | Defines the step's selected state - the step that is currently active.
Note: Step can't be selected and disabled at the same time. In this case the selected property would take precedence. |
| Type | boolean |
| Default | false |
branching
| Description | When branching is enabled a dashed line would be displayed after the step, meant to indicate that the next step is not yet known and depends on user choice in the current step.
Note: It is recommended to use branching on the last known step and later add new steps when it becomes clear how the wizard flow should continue. |
| Type | boolean |
| Default | false |
Slots
default
| Description | Defines the step content. |
| Type | Array<Node> |
Events
No events available for this component.
Methods
No methods available for this component.
CSS Parts
No CSS parts available for this component.
CSS Custom States
No CSS custom states available for this component.