Table of Contents

Class MudStepper

Namespace
MudBlazor
Assembly
MudBlazor.dll

A wizard that guides the user through a series of steps to complete a transaction.

public class MudStepper : MudComponentBase, IComponent, IHandleEvent, IHandleAfterRender, IMudStateHasChanged
Inheritance
MudStepper
Implements
Inherited Members
Extension Methods

Constructors

MudStepper() 

public MudStepper()

Properties

ActionContent

Use this to override the default action buttons of the stepper

[Parameter]
[Category("Appearance")]
public RenderFragment<MudStepper>? ActionContent { get; set; }

Property Value

RenderFragment<MudStepper>

ActiveIndex

The index of the currently active step.

[Parameter]
[Category("Behavior")]
public int ActiveIndex { get; set; }

Property Value

int

ActiveIndexChanged

Occurs when ActiveIndex has changed.

[Parameter]
[Category("Behavior")]
public EventCallback<int> ActiveIndexChanged { get; set; }

Property Value

EventCallback<int>

ActiveStep

The currently active step.

public MudStep? ActiveStep { get; }

Property Value

MudStep

CanGoToNextStep

Whether the user can go to the next step.

public bool CanGoToNextStep { get; }

Property Value

bool

Remarks

Typically used to enable or disable a custon Next button.

CenterLabels

Centers the labels for each step below the circle.

[Parameter]
[Category("Appearance")]
public bool CenterLabels { get; set; }

Property Value

bool

Remarks

Defaults to false. Only applies when Vertical is false.

ChildContent

The steps in this component.

[Parameter]
[Category("Appearance")]
public RenderFragment? ChildContent { get; set; }

Property Value

RenderFragment

Remarks

Must be a set of MudStep components.

Classname 

protected string Classname { get; }

Property Value

string

CompleteButtonIcon

The icon shown for the Complete button.

[Parameter]
[Category("Appearance")]
public string CompleteButtonIcon { get; set; }

Property Value

string

Remarks

Defaults to Done.

CompletedContent

This content is displayed when all steps are completed

[Parameter]
[Category("Appearance")]
public RenderFragment? CompletedContent { get; set; }

Property Value

RenderFragment

CompletedStepColor

The color of completed steps.

[Parameter]
[Category("Appearance")]
public Color CompletedStepColor { get; set; }

Property Value

Color

Remarks

Defaults to Primary.

ConnectorTemplate

The custom template for displaying lines connecting each step.

[Parameter]
[Category("Appearance")]
public RenderFragment<MudStep>? ConnectorTemplate { get; set; }

Property Value

RenderFragment<MudStep>

Remarks

Defaults to null.

CurrentStepColor

The color of the current step.

[Parameter]
[Category("Appearance")]
public Color CurrentStepColor { get; set; }

Property Value

Color

Remarks

Defaults to Primary.

ErrorStepColor

The color of steps with errors.

[Parameter]
[Category("Appearance")]
public Color ErrorStepColor { get; set; }

Property Value

Color

Remarks

Defaults to Error.

IsCompleted

Whether all steps have been completed.

public bool IsCompleted { get; }

Property Value

bool

IsCurrentStepSkippable

Whether the current step can be skipped.

public bool IsCurrentStepSkippable { get; }

Property Value

bool

Remarks

Typically used to enable or disable a custon Skip button.

LabelTemplate

The custom template for displaying each step's index and icon.

[Parameter]
[Category("Appearance")]
public RenderFragment<MudStep>? LabelTemplate { get; set; }

Property Value

RenderFragment<MudStep>

Remarks

Defaults to null.

NavClass

The CSS classes applied to the navigation bar.

[Parameter]
[Category("Appearance")]
public string? NavClass { get; set; }

Property Value

string

Remarks

Defaults to null. Multiple classes must be separated by spaces.

NavClassname 

protected string NavClassname { get; }

Property Value

string

NextButtonIcon

The icon shown for the Next button.

[Parameter]
[Category("Appearance")]
public string NextButtonIcon { get; set; }

Property Value

string

Remarks

Defaults to NavigateNext.

NonLinear

Allows users to move between steps arbitrarily.

[Parameter]
[Category("Behavior")]
public bool NonLinear { get; set; }

Property Value

bool

Remarks

Defaults to false. When false, users must complete the active step before being allowed to move to the next step.

OnPreviewInteraction

Occurs when the user attempts to go to a step.

[Parameter]
[Category("Behavior")]
public Func<StepperInteractionEventArgs, Task>? OnPreviewInteraction { get; set; }

Property Value

Func<StepperInteractionEventArgs, Task>

Remarks

Use this function to customize when the user can navigate to a step, such as when a form has been properly completed. The attempted navigation can be prevented by setting Cancel to true.

PreviousButtonIcon

The icon shown for the Previous button.

[Parameter]
[Category("Appearance")]
public string PreviousButtonIcon { get; set; }

Property Value

string

Remarks

Defaults to NavigateBefore.

PreviousStepEnabled

Whether the Previous button is enabled.

public bool PreviousStepEnabled { get; }

Property Value

bool

ResetButtonIcon

The icon shown for the reset button.

[Parameter]
[Category("Appearance")]
public string ResetButtonIcon { get; set; }

Property Value

string

Remarks

Defaults to FirstPage.

Ripple

Displays a ripple effect when a step is clicked.

[Parameter]
[Category("Appearance")]
public bool Ripple { get; set; }

Property Value

bool

Remarks

Defaults to false. Only applies when NonLinear is true.

ScrollableNavigation

Shows a scroll bar for steps if needed.

[Parameter]
[Category("Behavior")]
public bool ScrollableNavigation { get; set; }

Property Value

bool

Remarks

Defaults to true.

ShowCompleteInsteadOfNext

Whether the Complete or Next button is displayed.

public bool ShowCompleteInsteadOfNext { get; }

Property Value

bool

ShowResetButton

Shows a button to start over at the first step.

[Parameter]
[Category("Appearance")]
public bool ShowResetButton { get; set; }

Property Value

bool

Remarks

Defaults to false. Clicking the reset button sets this stepper back to its initial state, discarding all progress and errors.

SkipButtonIcon

The icon shown for the Skip button.

[Parameter]
[Category("Appearance")]
public string SkipButtonIcon { get; set; }

Property Value

string

Remarks

Defaults to a custom icon.

StepClass

The CSS classes applied to all steps.

[Parameter]
[Category("Appearance")]
public string? StepClass { get; set; }

Property Value

string

Remarks

Defaults to null. Multiple classes must be separated by spaces.

StepCompleteIcon

The icon shown for completed steps.

[Parameter]
[Category("Appearance")]
public string StepCompleteIcon { get; set; }

Property Value

string

Remarks

Defaults to Done.

StepErrorIcon

The icon shown for steps with errors.

[Parameter]
[Category("Appearance")]
public string StepErrorIcon { get; set; }

Property Value

string

Remarks

Defaults to PriorityHigh.

StepStyle

The CSS styles applied to all steps.

[Parameter]
[Category("Appearance")]
public string? StepStyle { get; set; }

Property Value

string

Remarks

Defaults to null.

Steps

The steps to step through.

public IReadOnlyList<MudStep> Steps { get; }

Property Value

IReadOnlyList<MudStep>

TitleTemplate

The custom template for displaying each step's title.

[Parameter]
[Category("Appearance")]
public RenderFragment<MudStep>? TitleTemplate { get; set; }

Property Value

RenderFragment<MudStep>

Remarks

Defaults to null. The current MudStep is passed as context for this render fragment.

Vertical

Renders steps vertically.

[Parameter]
[Category("Appearance")]
public bool Vertical { get; set; }

Property Value

bool

Methods

BuildRenderTree(RenderTreeBuilder) 

protected override void BuildRenderTree(RenderTreeBuilder __builder)

Parameters

__builder RenderTreeBuilder

NextStepAsync()

Completes the current step and goes to the next step.

public Task NextStepAsync()

Returns

Task

OnAfterRenderAsync(bool) 

protected override Task OnAfterRenderAsync(bool firstRender)

Parameters

firstRender bool

Returns

Task

PreviousStepAsync()

Goes to the previous step.

public Task PreviousStepAsync()

Returns

Task

ResetAsync(bool)

Resets the completed status of all steps and goes to the first step, resetting all progress and errors.

public Task ResetAsync(bool resetErrors = false)

Parameters

resetErrors bool

Returns

Task

SkipCurrentStepAsync()

Goes to the next step without completing the current step.

public Task SkipCurrentStepAsync()

Returns

Task