Wizard Stepper
One of the main elements of the Wizard component is the Stepper. The Wizard component utilizes the Telerik UI for Blazor Stepper internally.
You can use the parameters the WizardStep exposes to customize the following properties of the internal stepper:
General Stepper Settings
You can set the desired general settings of the internal Stepper through the parameters of the WizardStepperSettings tag under the WizardSettings tag including StepType and Linear flow.
StepType
Much like the Stepper component, the internal Stepper of the Wizard provides two display modes for the steps. You can configure the desired display mode through the StepType parameter of the WizardStepperSettings which takes a member of the StepperStepType enum:
Steps(default) - the Stepper will render both indicators and labelsLabels- the Stepper will render only labels
Set up the Wizard to display step labels only
Linear flow
The Linear flow property of the internal Stepper matches the functionality of the Stepper component Linear flow. It allows you to configure it, so that completion of the previous step is required before proceeding to the next step. The user will be able to go one step at a time (back or forth).
You can enable/disable the Linear flow of the Wizard Stepper through the Linear parameter of the WizardStepperSettings. It takes a bool and its default value is true.
Disable the Linear flow of the Wizard Stepper.
Individual Stepper Settings
Indicators
You can configure the content that will be rendered in the step indicators of the internal Stepper through the following parameters the WizardStep exposes:
Text-string- Specifies the step indicator textIcon-object- Specifies the Telerik Font or SVG icon which will be put inside the step indicator.
The priority and rules applied for their rendering is the same as for the Stepper component indicators.
Set up the desired content for the Wizard Stepper indicators.
Labels
The Wizard Stepper allows you to set labels for the corresponding step indicators following the Stepper component Labels practice. You can define the desired labels through the Label parameter the WizardStep exposes. If you don't set value to the Label parameter, no label will be rendered for the corresponding step indicator.
Set up the desired labels for the Wizard Stepper steps.
Optional
Likewise the Stepper component Optional property, the Wizard Stepper also supports that.
To mark a Wizard step as optional, set the Optional parameter of the WizardStep to true (its default value is false). This configuration strives to visually notify the user that a certain step is not required by rendering "(Optional)" text underneath the corresponding step. It doesn't come with a built-in functionality to skip the Wizard step if a linear flow is enabled.
Set an optional step in the Wizard Stepper
Disabled
The Wizard Stepper also allows you to mark a step as disabled following the functionality if the Stepper component Disabled property.
You can disable a step by setting the Disabled parameter of the the desired WizardStep to true (its default value is false). You can also toggle its value to conditionally enable/disable the Wizard steps based on your application logic.
This feature serves to mark the desired step as disabled, so users cannot click and select it. If linear flow is enabled, users will not be able to skip the disabled step and click on the next enabled.
If the next step is disabled, the Next button on the current step will also be marked as disabled, so the user will not be able to click it.
Respectively, if the previous step is disabled, the Previous button will be disabled.
Disable a Wizard step.
Valid
Likewise the Stepper component validation feature, the Wizard Stepper also provides an option to set validation logic for each step.
You can set a visual indication whether a step is valid or not through the Valid parameter of the WizardStep. It accepts bool? and its default value is null.
You can toggle the Valid parameter value based on your application logic to accordingly render success or error icon. Since it serves as a visual validity indicator it does not prevent the users from navigating between steps. You can use the Valid parameter value to perform logic to cover the desired scenario (for example preventing the user from navigating to the next step if the current one is invalid).
Set up valid/invalid steps in the Wizard Stepper.
Visible
You can hide a Wizard step from the Stepper and the pager through the Visible parameter of the WizardStep. It accepts a bool and its default value is true.
Hidden steps do not render in the Stepper, the pager, or the content area. The Next and Previous buttons, keyboard navigation, and step clicks skip hidden steps.
The Wizard Value always refers to the full zero-based step index, including hidden steps. If you hide the current step, update Value to another visible step. Otherwise, the Wizard will not display step content until the user selects a visible step.
Toggle the visibility of a Wizard step