Display Modes

This article explains the Display modes that the Stepper for Blazor provides.

You can configure the desired display mode through the StepType parameter of the Stepper. It takes a member of the StepperStepType enum:

• Steps (the default)
• Labels

Steps

The default Display mode of the Stepper is Steps. If labels are defined, with this setup the Stepper will render both indicators and labels.

Display mode: Steps, customize the Stepper to render indicators and labels.The result from the snippet.

@* Stepper with both labels and indicators. *@

<div style="width:500px">
    <TelerikStepper StepType="StepperStepType.Steps">
        <StepperSteps>
            <StepperStep Label="Personal Info" Icon="@SvgIcon.User"></StepperStep>
            <StepperStep Label="Education" Icon="@SvgIcon.Book"></StepperStep>
            <StepperStep Label="Experience" Icon="@SvgIcon.FlipVertical"></StepperStep>
            <StepperStep Label="Attachments" Icon="@SvgIcon.Paperclip"></StepperStep>
        </StepperSteps>
    </TelerikStepper>
</div>

Labels

If you want to display only labels for the steps, set the StepType parameter of the Stepper to Labels.

Display mode: Labels, customize the Stepper to render only labels. The result from the snippet.

@* Stepper with only labels. *@

<div style="width:500px">
    <TelerikStepper StepType="StepperStepType.Labels">
        <StepperSteps>
            <StepperStep Label="Personal Info" Icon="@SvgIcon.User"></StepperStep>
            <StepperStep Label="Education" Icon="@SvgIcon.Book"></StepperStep>
            <StepperStep Label="Experience" Icon="@SvgIcon.FlipVertical"></StepperStep>
            <StepperStep Label="Attachments" Icon="@SvgIcon.Paperclip"></StepperStep>
        </StepperSteps>
    </TelerikStepper>
</div>

See Also

• Live Demo: Stepper Configuration