Steps 步骤条
引导用户按照流程完成任务的导航条。
基本用法
简单的步骤条。
迷你版
迷你版的步骤条,通过设置<Steps size="small">启用。
带图标的步骤条
通过设置items的icon属性,可以启用自定义图标。
步骤切换
通常配合内容及按钮使用,表示一个流程的处理进度。
竖直方向的步骤条
简单的竖直方向的步骤条。
点状步骤条
包含步骤点的进度条。
标签放置位置
修改标签放置位置为vertical。
Steps Props 属性
| 属性 | 说明 | 类型 | 默认值 | 版本 |
|---|---|---|---|---|
| current | 指定当前步骤,从0开始记数。 | number | 0 | |
| direction | 指定步骤条方向。目前支持水平(horizontal)和竖直(vertical)两种方向 | horizontal | vertical | horizontal | |
| labelPlacement | 指定标签放置位置,默认水平放图标右侧,可选vertical放图标下方 | horizontal | vertical | horizontal | |
| progressDot | 点状步骤条,labelPlacement将强制为vertical | boolean | false | |
| size | 指定大小,目前支持普通(default)和迷你(small) | default | small | default | |
| items | 配置选项卡内容 | StepItem[] | - |
ts
export interface StepItem {
title?: string
description?: string
icon?: IconName
}export interface StepItem {
title?: string
description?: string
icon?: IconName
}StepItem Props 属性
| 属性 | 说明 | 类型 | 默认值 | 版本 |
|---|---|---|---|---|
| description | 步骤的详情描述,可选 | string | - | |
| icon | 步骤图标的类型,可选 | IconName | - | |
| title | 标题 | string | - |