Class SfStepper

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

Inheritance

object

ComponentBase

OwningComponentBase

SfOwningComponentBase

SfBaseComponent

SfStepper

Implements

Inherited Members

ComponentBase.Assets

ComponentBase.AssignedRenderMode

ComponentBase.DispatchExceptionAsync(Exception)

ComponentBase.InvokeAsync(Action)

ComponentBase.InvokeAsync(Func<Task>)

ComponentBase.OnAfterRender(bool)

ComponentBase.OnInitialized()

ComponentBase.OnParametersSet()

ComponentBase.RendererInfo

ComponentBase.SetParametersAsync(ParameterView)

ComponentBase.ShouldRender()

ComponentBase.StateHasChanged()

object.Equals(object)

object.Equals(object, object)

object.GetHashCode()

object.GetType()

object.MemberwiseClone()

object.ReferenceEquals(object, object)

object.ToString()

OwningComponentBase.IsDisposed

OwningComponentBase.ScopedServices

SfBaseComponent.Dispose()

SfBaseComponent.Dispose(bool)

SfBaseComponent.GetEffectivePlatform()

SfBaseComponent.GetMainComponentPlatform()

SfBaseComponent.IsMainLicenseComponent()

SfBaseComponent.LicenseContext

SfBaseComponent.OnObservableChange(string, object, bool, NotifyCollectionChangedEventArgs)

SfBaseComponent.ValidateLicense()

Namespace: Syncfusion.Blazor.Navigations

Assembly: Syncfusion.Blazor.dll

Syntax

public class SfStepper : SfBaseComponent, IComponent, IHandleEvent, IHandleAfterRender, IDisposable

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

[Parameter]
public int ActiveStep { get; set; }

Property Value

Type
int

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

Created

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

Declaration

[Parameter]
public EventCallback<object> Created { get; set; }

Property Value

Type	Description
EventCallback<object>	An event call back function.

CssClass

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

Declaration

[Parameter]
public string CssClass { get; set; }

Property Value

Type	Description
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

[Parameter]
public string ID { get; set; }

Property Value

Type	Description
string	Accepts the string value.

LabelPosition

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

Declaration

[Parameter]
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

[Parameter]
public bool Linear { get; set; }

Property Value

Type	Description
bool	`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

[Parameter]
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

[Parameter]
public bool ReadOnly { get; set; }

Property Value

Type	Description
bool	`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

[Parameter]
public bool ShowTooltip { get; set; }

Property Value

Type	Description
bool	`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

[Parameter]
public EventCallback<StepperChangedEventArgs> StepChanged { get; set; }

Property Value

Type	Description
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

[Parameter]
public EventCallback<StepperChangeEventArgs> StepChanging { get; set; }

Property Value

Type	Description
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

[Parameter]
public EventCallback<StepperClickedEventArgs> StepClicked { get; set; }

Property Value

Type	Description
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

[Parameter]
public EventCallback<StepperRenderedEventArgs> StepRendered { get; set; }

Property Value

Type	Description
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

[Parameter]
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

[Parameter]
public RenderFragment<StepperStep> Template { get; set; }

Property Value

Type	Description
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

[Parameter]
public RenderFragment<StepperStep> TooltipTemplate { get; set; }

Property Value

Type	Description
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
RenderTreeBuilder	__builder

Overrides

ComponentBase.BuildRenderTree(RenderTreeBuilder)

NextStepAsync()

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

Declaration

public Task NextStepAsync()

Returns

Type	Description
Task	Task.

OnAfterRenderAsync(bool)

Method invoked after each time the component has been rendered.

Declaration

protected override Task OnAfterRenderAsync(bool firstRender)

Parameters

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

Returns

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

Overrides

SfBaseComponent.OnAfterRenderAsync(bool)

OnInitializedAsync()

Method invoked when the component is ready to start.

Declaration

protected override Task OnInitializedAsync()

Returns

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

Overrides

SfBaseComponent.OnInitializedAsync()

OnParametersSetAsync()

Declaration

protected override Task OnParametersSetAsync()

Returns

Type
Task

Overrides

ComponentBase.OnParametersSetAsync()

PreviousStepAsync()

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

Declaration

public Task PreviousStepAsync()

Returns

Type	Description
Task	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
Task	Task.

ResetAsync()

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

Declaration

public Task ResetAsync()

Returns

Type	Description
Task	Task.

Implements

IComponent

IHandleEvent

IHandleAfterRender

IDisposable