- 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.
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.
<Steps SelectedStep="" SelectedStepChanged=""> <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; } }
Name | Description |
---|---|
SelectStep(string name) |
Sets the active step by the name. |
Name | Description | Type | Default |
---|---|---|---|
SelectedStep |
Currently selected step name. | string |
null |
SelectedStepChanged |
Occurs after the selected step has changed. | EventCallback<string> |
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 |
Default |
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 |
Name | Description | Type | Default |
---|---|---|---|
SelectedPanel |
Currently selected panel name. | string |
null |
SelectedPanelChanged |
Occurs after the selected panel has changed. | EventCallback<string> |
Name | Description | Type | Default |
---|---|---|---|
Name |
Defines the panel name that must match the corresponding step name. | string |
null |