Step component

The <Step> component displays progress through numbered steps.

Similar to <Tabs> component, the step component have the same structure and usage.

<Steps> container for Step or StepPanel items
- <Items> container for Step items
  - <Step> clickable step items
- <Content> container for step panels
  - <StepPanel> container for step content

The Steps component is container for Step items. The Name of each step item should match the Name of a step panel(if panels are used).

<StepsContent> container for step panels
- <StepPanel> container for step content

The step content container is used to hold step panels. Each content pane also has a unique Name, which is targeted by a link in the step-strip.

Most of the time you will only need to use Steps component as it is crafted to hold both clickable step items and step content. Only in the advanced scenario where the content will be separated from the step items you will need to use StepsContent component.

Examples

Basic

1 Step 1
2 Step 2
3 Step 3
Finish

Content for step 1.

Content for step 2.

Content for step 3.

Content for finish.

<Steps SelectedStep="@selectedStep" SelectedStepChanged="@OnSelectedStepChanged">
    <Items>
        <Step Name="step1">Step 1</Step>
        <Step Name="step2">Step 2</Step>
        <Step Name="step3">Step 3</Step>
        <Step Name="step4">
            <Marker>
                <Icon Name="IconName.Flag" />
            </Marker>
            <Caption>
                Finish
            </Caption>
        </Step>
    </Items>
    <Content>
        <StepPanel Name="step1">
            Content for step 1.
        </StepPanel>
        <StepPanel Name="step2">
            Content for step 2.
        </StepPanel>
        <StepPanel Name="step3">
            Content for step 3.
        </StepPanel>
        <StepPanel Name="step4">
            Content for finish.
        </StepPanel>
    </Content>
</Steps>

@code{
    string selectedStep = "step1";

    private Task OnSelectedStepChanged( string name )
    {
        selectedStep = name;

        return Task.CompletedTask;
    }
}

Functions

Name	Description
`SelectStep(string name)`	Sets the active step by the name.

Attributes

Steps

Name	Description	Type	Default
`SelectedStep`	Currently selected step name.	`string`	`null`
`SelectedStepChanged`	Occurs after the selected step has changed.	`EventCallback<string>`

Step

Name	Description	Type	Default
`Name`	Defines the unique step name.	`string`	`null`
`Index`	Used to override item index.	`int?`	`null`
`Completed`	Marks the step as completed.	`bool`	`false`
`Color`	Overrides the step color.	`Color`	`None`
`Clicked`	Occurs when the button is clicked.	`EventCallback`
`Marker`	Custom render template for the marker(circle) part of the step item.	`RenderFragment`
`Caption`	Custom render template for the text part of the step item.	`RenderFragment`

StepsContent

Name	Description	Type	Default
`SelectedPanel`	Currently selected panel name.	`string`	`null`
`SelectedPanelChanged`	Occurs after the selected panel has changed.	`EventCallback<string>`

StepPanel

Name	Description	Type	Default
`Name`	Defines the panel name that must match the corresponding step name.	`string`	`null`