Skip to main content

WizardStep

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​

DescriptionDefines the titleText of the step.
Note: The text is displayed in the ui5-wizard navigation header.
Typestring | undefined
Defaultundefined
Since1.0.0-rc.15

subtitleText​

DescriptionDefines the subtitleText of the step.
Note: the text is displayed in the ui5-wizard navigation header.
Typestring | undefined
Defaultundefined
Since1.0.0-rc.15

icon​

DescriptionDefines 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.
Typestring | undefined
Defaultundefined

disabled​

DescriptionDefines 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.
Typeboolean
Defaultfalse

selected​

DescriptionDefines 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.
Typeboolean
Defaultfalse

branching​

DescriptionWhen 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.
Typeboolean
Defaultfalse

Slots​

default​

DescriptionDefines the step content.
TypeArray<Node>

Events​

No events available for this component.

Methods​

No methods available for this component.

CSS Parts​

No CSS parts available for this component.