Ant Design Blazor
Steps步骤条
Examples
简单的步骤条。
迷你版的步骤条，通过设置 <Steps size="small"> 启用.
通过设置 Steps.Step 的 icon 属性，可以启用自定义图标。
通常配合内容及按钮使用，表示一个流程的处理进度。
简单的竖直方向的步骤条。
简单的竖直方向的小型步骤条。
使用 Steps 的 status 属性来指定当前步骤的状态。
包含步骤点的进度条。
(暂未实现) 为点状步骤条增加自定义展示。
设置 onChange 后，Steps 变为可点击状态。
导航类型的步骤条。
带有进度的步骤。
Steps API#
| 属性 | 描述 | 类型 | 默认值 |
|---|---|---|---|
| Current | 属性当前步骤索引，从零开始 | Int32 | 0 |
| Percent | 属性当前步骤的百分比显示 | Double? | -- |
| ProgressDot | 属性进度点的自定义渲染。如果设置，还会将 ShowProgressDot 设置为 true。 | RenderFragment | -- |
| ShowProgressDot | 属性显示进度点而不是标题、描述、图标等 | Boolean | false |
| Direction | 属性步长条的方向 | String | horizontal |
| LabelPlacement | 属性水平或垂直放置标题和说明 | String | horizontal |
| Type | 属性步骤类型。可能的值：默认、导航 | String | default |
| Size | 属性步骤的大小。可能的值：默认、小 | String | default |
| StartIndex | 属性起始步骤索引 | Int32 | 0 |
| Status | 属性当前步骤的状态。可能的值：等待、处理、完成、错误 | String | process |
| ChildContent | 属性子内容应包含 Step 元素 | RenderFragment | -- |
| OnChange | 属性步骤更改时执行的回调。收到更改为的步骤的索引 | EventCallback<Int32> | -- |
| Id | 属性组件 HTML 的 ID | String | Uniquely Generated ID |
| Class | 属性为 DOM 元素指定一个或多个类名。 | String | -- |
| Style | 属性指定 DOM 元素的内联样式。 | String | -- |
| RefBack | 属性一个 ForwardRef 实例。您可以使用 AntDesign.ForwardRef.Current 获取对内部 DOM 的引用。 |
ForwardRef | -- |
Step API#
| 属性 | 描述 | 类型 | 默认值 |
|---|---|---|---|
| Icon | 属性步骤的图标 | String | -- |
| Status | 属性指定状态。如果未配置，它将由步骤的电流自动设置。可能的值：等待、处理、完成、错误 | String | -- |
| Title | 属性步骤的标题 | String | -- |
| TitleTemplate | 属性步骤的标题 | RenderFragment | -- |
| Subtitle | 属性步骤的副标题 | String | -- |
| SubtitleTemplate | 属性步骤的副标题 | RenderFragment | -- |
| Description | 属性步骤说明 | String | string.Empty |
| DescriptionTemplate | 属性步骤说明 | RenderFragment | -- |
| OnClick | 属性单击步骤时执行的回调 | EventCallback<MouseEventArgs> | -- |
| Disabled | 属性禁用点击 | Boolean | -- |
| Id | 属性组件 HTML 的 ID | String | Uniquely Generated ID |
| Class | 属性为 DOM 元素指定一个或多个类名。 | String | -- |
| Style | 属性指定 DOM 元素的内联样式。 | String | -- |
| RefBack | 属性一个 ForwardRef 实例。您可以使用 AntDesign.ForwardRef.Current 获取对内部 DOM 的引用。 |
ForwardRef | -- |