MudBlazor - Blazor Component Library

Horizontal stepper

Stepper needs MudStep in its child content. Each step can have Title and SecondaryText so the component can be displayed properly. The reset button is only shown if ShowResetButton is set. You might not need it in a real world example but in the docs it is important to be able to reset the stepper so we enabled it everywhere.

<MudPaper Style="width: 800px">
    <MudStepper ShowResetButton>
        <MudStep Title="Select campaign settings">Select campaign settings content</MudStep>
        <MudStep Title="Create an ad group" SecondaryText="Optional" Skippable="true">Create an ad group content</MudStep>
        <MudStep Title="Create an ad">Create an ad content</MudStep>
    </MudStepper>
</MudPaper>

Non-linear version

If you need to jump between the steps, parameter NonLinear is there for that.

<MudPaper Style="width: 800px">
    <MudStepper NonLinear ShowResetButton>
        <MudStep Title="Write the code">Most programmers first start writing the code but some experts write the tests first</MudStep>
        <MudStep Title="Write the tests">If you write the tests first you will design a better API when you write the code</MudStep>
        <MudStep Title="Write the documentation" SecondaryText="... or not">Some consider writing readable code more important than writing documentation.</MudStep>
    </MudStepper>
</MudPaper>

Centered labels

CenterLabels centers the labels in the navigation bar below the circle. It affects only horizontal steppers.

<MudPaper Style="width: 800px">
    <MudStepper CenterLabels="true" ShowResetButton>
        <MudStep Title="Select campaign settings">Select campaign settings content</MudStep>
        <MudStep Title="Create an ad group" SecondaryText="Optional" Skippable="true">Create an ad group content</MudStep>
        <MudStep Title="Create an ad">Create an ad content</MudStep>
    </MudStepper>
</MudPaper>