New to Telerik UI for Blazor? Download free 30-day trial

Steps Overview

The Steps are the building blocks of the Stepper component. You can include the desired steps by adding a StepperStep tag for every step. The steps appearance can be configured through the features the StepperStep exposes - each step includes a visual indicator, you can define a label for the corresponding indicator and manage the step state and validity.

The whole rendering of the steps can also be customized with a Step Template.

In this article:

Steps Declaration

To include the desired steps for the Stepper component, you can either manually declare a StepperStep tag for every step or loop through your collection with steps data and render one StepperStep tag binding its parameters to the corresponding field of your model.

Loop through your collection and generate a StepperStep for every item in the collection. The result from the snippet.

Steps collection

@*Loop through a collection to create a step for all items in the collection. *@

<div style="width:700px">
    <TelerikStepper>
        <StepperSteps>
            @foreach (var step in Steps)
            {
            <StepperStep Label="@step.Label" Icon="@step.Icon" 
                         Optional="@step.Optional" Disabled="@step.Disabled">
            </StepperStep>
            }
        </StepperSteps>
    </TelerikStepper>
</div>

@code{
    List<StepModel> Steps { get; set; }

    protected override void OnInitialized()
    {
        Steps = new List<StepModel>()
    {
            new StepModel()
            {
                Label = "Personal Info",
                Icon = "user"
            },
            new StepModel()
            {
                Label = "Education",
                Icon = "dictionary-add",
                Disabled = true
            },
            new StepModel()
            {
                Label = "Experience",
                Icon = "flip-vertical"
            },
            new StepModel()
            {
                Label = "Attachments",
                Icon = "attachment",
                Optional = true
            }
        };
            base.OnInitialized();
    }

    public class StepModel
    {
        public string Label { get; set; }
        public string Icon { get; set; }
        public bool Disabled { get; set; }
        public bool Optional { get; set; }
    }
}

Features

The StepperStep exposes the following features which allow you to configure their appearance:

  • Indicators - the visual indicators of the steps can include the following content:

    • Text - string - Specifies the step indicator text.
    • Icon - string - The icon which will be rendered inside the step indicator.
    • IconClass - string - The icon class which will be rendered inside the step indicator.
    • ImageUrl - string - The image which will be rendered inside the step indicator.
    • SpriteClass - string - The Sprite class which will be rendered inside the step indicator.
  • Label - string - Specifies the label text that will be rendered under the corresponding step indicator.

  • State

    • Disabled bool - Specifies if the step is disabled. The default value is false.
    • Optional - bool - Specifies if the step is optional. The default value is false.
  • Valid - bool? - Specifies if the step is valid or not. The default value is null.

  • Class - string - CSS class for the current step.

See Also

In this article
Not finding the help you need? Improve this article