Ant Design Blazor
Steps
Steps is a navigation bar that guides users through the steps of a task.
When To Use
- When a given task is complicated or has a certain sequence in the series of subtasks, we can decompose it into several steps to make things easier.
Examples
The most basic step bar.
By setting like this: <Steps size="small">, you can get a mini version.
You can use your own custom icons by setting the property icon for Steps.Step.
Also, a new IconTemplate parameter (type RenderFragment<StepsStatus>) is available to render custom icons with access to the current step status.
Cooperate with the content and buttons, to represent the progress of a process.
A simple step bar in the vertical direction.
A simple mini version step bar in the vertical direction.
By using status of Steps, you can specify the state for current step.
Steps with progress dot style.
(WIP) You can customize the display for Steps with progress dot style.
Setting onChange makes Steps clickable.
Navigation steps.
Steps with progress.
Steps API#
| Property | Description | Type | Default Value |
|---|---|---|---|
| Current | ParameterCurrent step index, zero based | Int32 | 0 |
| Percent | ParameterPercent display for current step | Double? | -- |
| ProgressDot | ParameterCustom rendering for progress dot. Will also set ShowProgressDot to true if set. | RenderFragment | -- |
| ShowProgressDot | ParameterShow progress dot as opposed to the title, description, icon, etc | Boolean | false |
| Direction | ParameterDirection of the step bar | StepsDirection | StepsDirection.Horizontal |
| LabelPlacement | ParameterPlace title and description horizontal or vertical | StepsLabelPlacement | StepsLabelPlacement.Horizontal |
| Type | ParameterType of steps. Possible Values: default, navigation | StepsType | StepsType.Default |
| Size | ParameterSize of steps. Possible Values: default, small | StepsSize | StepsSize.Default |
| StartIndex | ParameterStarting step index | Int32 | 0 |
| Status | ParameterStatus of the current step. Possible Values: wait, process, finish, error | StepsStatus | process |
| ChildContent | ParameterChild content should contain Step elements | RenderFragment | -- |
| OnChange | ParameterCallback executed when step changes. Received the index of the step changing to | EventCallback<Int32> | -- |
| Id | ParameterID for the component's HTML | String | Uniquely Generated ID |
| Class | ParameterSpecifies one or more class names for an DOM element. | String | -- |
| Style | ParameterSpecifies an inline style for a DOM element. | String | -- |
| RefBack | ParameterA ForwardRef instance. You can get a reference to the internal DOM by using AntDesign.ForwardRef.Current. |
ForwardRef | -- |
Step API#
| Property | Description | Type | Default Value |
|---|---|---|---|
| Icon | ParameterIcon of the step | String | -- |
| IconTemplate | ParameterIcon template; receives the current StepsStatus as context. |
RenderFragment<StepsStatus> | -- |
| Status | ParameterTo specify the status. It will be automatically set by current of Steps if not configured. Possible Values: wait, process, finish, error | StepsStatus | -- |
| Title | ParameterTitle of the step | String | -- |
| TitleTemplate | ParameterTitle of the step | RenderFragment | -- |
| Subtitle | ParameterSubtitle of the step | String | -- |
| SubtitleTemplate | ParameterSubtitle of the step | RenderFragment | -- |
| Description | ParameterDescription of the step | String | string.Empty |
| DescriptionTemplate | ParameterDescription of the step | RenderFragment | -- |
| OnClick | ParameterCallback executed when clicking step | EventCallback<MouseEventArgs> | -- |
| Disabled | ParameterDisable click | Boolean | -- |
| Id | ParameterID for the component's HTML | String | Uniquely Generated ID |
| Class | ParameterSpecifies one or more class names for an DOM element. | String | -- |
| Style | ParameterSpecifies an inline style for a DOM element. | String | -- |
| RefBack | ParameterA ForwardRef instance. You can get a reference to the internal DOM by using AntDesign.ForwardRef.Current. |
ForwardRef | -- |