Class SfStepper

The Blazor Stepper component visualizes several steps and indicates the current progress by highlighting already completed steps.

Inheritance

System.Object

SfBaseComponent

SfStepper

Inherited Members

SfBaseComponent.Dispose()

SfBaseComponent.Dispose(Boolean)

SfBaseComponent.OnObservableChange(String, Object, Boolean, NotifyCollectionChangedEventArgs)

Namespace: Syncfusion.Blazor.Navigations

Assembly: Syncfusion.Blazor.dll

Syntax

public class SfStepper : SfBaseComponent

Remarks

Stepper items can be populated by specifying StepperStep within SfStepper tag directive.

Examples

In the below code example, a basic Stepper component is initialized with StepperStep tag directive.

 
<SfStepper>
    <StepperSteps>
        <StepperStep></StepperStep>
        <StepperStep></StepperStep>
        <StepperStep></StepperStep>
        <StepperStep></StepperStep>
        <StepperStep></StepperStep>
    </StepperSteps>
</SfStepper>

Constructors

SfStepper()

Declaration

public SfStepper()

Properties

ActiveStep

Gets or sets the current step index of the SfStepper component.

Declaration

public int ActiveStep { get; set; }

Property Value

Type
System.Int32

Remarks

Changing this property on demand will update the active step, but it will respect the Linear flow if enabled.

Examples

Examples of how it works:

ActiveStep = -1
1 - Not Started
2 - Not Started
3 - Not Started
4 - Not Started

ActiveStep = 0
1 - In Progress
2 - Not Started
3 - Not Started
4 - Not Started

ActiveStep = 1
1 - Completed
2 - In Progress
3 - Not Started
4 - Not Started

ActiveStep = 3
1 - Completed
2 - Completed
3 - Completed
4 - In Progress

ActiveStep = 4
1 - Completed
2 - Completed
3 - Completed
4 - Completed

ChildContent

Gets or sets a value that indicates the child content for the Stepper including HTML element.

Declaration

public RenderFragment ChildContent { get; set; }

Property Value

Type
Microsoft.AspNetCore.Components.RenderFragment

Created

Gets or sets an event callback that is raised when the SfStepper rendering is completed.

Declaration

public EventCallback<object> Created { get; set; }

Property Value

Type	Description
Microsoft.AspNetCore.Components.EventCallback<System.Object>	An event call back function.

CssClass

Gets or sets the custom CSS class to customize the SfStepper component.

Declaration

public string CssClass { get; set; }

Property Value

Type	Description
System.String	A string representing the CSS class to be applied. The default value is an empty string.

Remarks

You can use this property to apply custom styles to the SfStepper component by specifying a CSS class.

ID

Sets id attribute for the stepper element.

Declaration

public string ID { get; set; }

Property Value

Type	Description
System.String	Accepts the string value.

LabelPosition

Gets or sets the position of step labels in relation to the SfStepper component.

Declaration

public StepperLabelPosition LabelPosition { get; set; }

Property Value

Type	Description
StepperLabelPosition	A value indicating the position of step labels. The default value is Bottom.

Remarks

Use this property to control whether step labels appear before or after each step in the SfStepper component.

Linear

Gets or sets a value indicating whether the SfStepper component should behave in linear mode.

Declaration

public bool Linear { get; set; }

Property Value

Type	Description
System.Boolean	`true` if the SfStepper follows a linear flow; otherwise, `false`. The default value is `false`.

Remarks

When set to true, the Stepper will restrict navigation to a linear path, allowing users to proceed to the next step only after completing the current one. In non-linear mode (default), users can navigate freely between steps.

Orientation

Gets or sets the orientation of the SfStepper component.

Declaration

public StepperOrientation Orientation { get; set; }

Property Value

Type	Description
StepperOrientation	A StepperOrientation value representing the orientation of the SfStepper. The default value is Horizontal.

Remarks

The StepperOrientation enumeration defines the possible orientations for the SfStepper component. You can set this property to control whether the stepper is displayed horizontally or vertically.

ReadOnly

Gets or sets a value indicating whether the SfStepper component is in read-only mode.

Declaration

public bool ReadOnly { get; set; }

Property Value

Type	Description
System.Boolean	`true` if the SfStepper is in read-only mode; otherwise, `false`. The default value is `false`.

Remarks

When set to true, the SfStepper component becomes read-only, preventing user interaction.

ShowTooltip

Gets or sets a value indicating whether tooltips should be displayed in the SfStepper component.

Declaration

public bool ShowTooltip { get; set; }

Property Value

Type	Description
System.Boolean	`true` if tooltips should be displayed; otherwise, `false`. The default value is `false`.

Remarks

When set to true, tooltips will appear to provide additional information for steps in the SfStepper.

StepChanged

Gets or sets an event callback that is raised when the current step is changed.

Declaration

public EventCallback<StepperChangedEventArgs> StepChanged { get; set; }

Property Value

Type	Description
Microsoft.AspNetCore.Components.EventCallback<StepperChangedEventArgs>	An event callback function.

Remarks

You can subscribe to this event to be notified when the Stepper's current step changes.

StepChanging

Gets or sets an event callback that is raised before a step change occurs in the SfStepper component.

Declaration

public EventCallback<StepperChangeEventArgs> StepChanging { get; set; }

Property Value

Type	Description
Microsoft.AspNetCore.Components.EventCallback<StepperChangeEventArgs>	An event callback function that is triggered before transitioning between steps in the Stepper.

Remarks

Subscribe to this event to perform custom actions or validations before a step change is finalized. The event provides information about the step change being initiated, allowing you to intervene and control the process.

StepClicked

Gets or sets an event callback that is raised when a step in the SfStepper component is clicked.

Declaration

public EventCallback<StepperClickedEventArgs> StepClicked { get; set; }

Property Value

Type	Description
Microsoft.AspNetCore.Components.EventCallback<StepperClickedEventArgs>	An event callback function that is triggered when a user clicks on a step within the Stepper.

Remarks

Subscribe to this event to respond to user interactions with individual steps. It provides an opportunity to handle custom actions or navigation logic based on the step that was clicked.

StepRendered

Gets or sets an event callback that is raised when a step in the SfStepper component is rendered.

Declaration

public EventCallback<StepperRenderedEventArgs> StepRendered { get; set; }

Property Value

Type	Description
Microsoft.AspNetCore.Components.EventCallback<StepperRenderedEventArgs>	An event callback function that is triggered when a step is rendered within the Stepper.

Remarks

Subscribe to this event to perform additional actions or apply custom styling after a step has been rendered. It provides an opportunity to dynamically modify the appearance or behavior of individual steps during the rendering process.

StepType

Gets or sets the display style of steps in the SfStepper component.

Declaration

public StepperType StepType { get; set; }

Property Value

Type	Description
StepperType	A value from the StepperType enumeration representing the display style of steps. The default value is Default.

Remarks

The StepperType enumeration defines the available styles for displaying steps:

Indicator: Display only step indicators.
Label: Display only step labels.
Default: Display a combination of both step indicators and labels.

Template

Gets or sets the custom template for rendering individual steps in the SfStepper component.

Declaration

public RenderFragment<StepperStep> Template { get; set; }

Property Value

Type	Description
Microsoft.AspNetCore.Components.RenderFragment<StepperStep>	The template content. The default value is `null`.

Remarks

The StepperStep allows you to define a custom template for rendering each step. You can use this template to fully customize the appearance and content of individual steps within the SfStepper.

Examples

<SfStepper>
</SfStepper>

TooltipTemplate

Gets or sets a custom template for rendering tooltips in the SfStepper component.

Declaration

public RenderFragment<StepperStep> TooltipTemplate { get; set; }

Property Value

Type	Description
Microsoft.AspNetCore.Components.RenderFragment<StepperStep>	A StepperStep representing the custom tooltip template. The default value is `null`.

Remarks

You can use this property to define a custom template for rendering tooltips associated with individual steps in the SfStepper component.

Examples

<SfStepper>
</SfStepper>

Methods

BuildRenderTree(RenderTreeBuilder)

Declaration

protected override void BuildRenderTree(RenderTreeBuilder __builder)

Parameters

Type	Name	Description
Microsoft.AspNetCore.Components.Rendering.RenderTreeBuilder	__builder

NextStepAsync()

Moves the Stepper to the next step from the current step.

Declaration

public Task NextStepAsync()

Returns

Type	Description
System.Threading.Tasks.Task	System.Threading.Tasks.Task.

OnAfterRenderAsync(Boolean)

Method invoked after each time the component has been rendered.

Declaration

protected override Task OnAfterRenderAsync(bool firstRender)

Parameters

Type	Name	Description
System.Boolean	firstRender	Set to true for the first time component rendering; otherwise gets false.

Returns

Type	Description
System.Threading.Tasks.Task	A System.Threading.Tasks.Task representing any asynchronous operation.

Overrides

SfBaseComponent.OnAfterRenderAsync(Boolean)

OnInitializedAsync()

Declaration

protected override Task OnInitializedAsync()

Returns

Type
System.Threading.Tasks.Task

Overrides

SfBaseComponent.OnInitializedAsync()

OnParametersSetAsync()

Declaration

protected override Task OnParametersSetAsync()

Returns

Type
System.Threading.Tasks.Task

PreviousStepAsync()

Moves the Stepper to the previous step from the current step.

Declaration

public Task PreviousStepAsync()

Returns

Type	Description
System.Threading.Tasks.Task	System.Threading.Tasks.Task.

RefreshProgressbarAsync()

Refreshes the position of the progress bar programmatically when the dimensions of the parent container are changed.

Declaration

public Task RefreshProgressbarAsync()

Returns

Type	Description
System.Threading.Tasks.Task	System.Threading.Tasks.Task.

ResetAsync()

Resets the state of the Stepper and navigates to the first step.

Declaration

public Task ResetAsync()

Returns

Type	Description
System.Threading.Tasks.Task	System.Threading.Tasks.Task.