代码演示
如何引入
jsx
import { Steps } from '@kousum/semi-ui-vue';
const Step = Steps.Step;默认步骤条（旧版）
建议使用简易版 steps（新版），旧版后续会逐渐 deprecate
简单步骤条（新版）
通过设置 type="basic" 显示为简洁风格步骤条
导航步骤条
通过设置 type="nav" 显示为导航风格步骤条。导航风格的步骤条有以下特点：
步骤条不支持交互。
适用于步骤间互相关联较小，内容互不影响，且需要突出页面视觉元素时使用。
步骤条的宽度按照内容物撑开。
Steps.Step 仅支持title、className、style 属性。
迷你尺寸步骤条
通过设置 size="small" 显示迷你尺寸步骤条
处理进度
配合内容及按钮使用，表示一个流程的处理进度
竖直方向的步骤条
通过设置 direction，使用竖直方向的步骤条
指定步骤状态
步骤运行错误，使用 Steps 的 status 属性来指定当前步骤的状态。
自定义图标/状态
通过设置 Steps.Step 的 icon 属性，可以启用自定义图标
通过设置 Steps.Step 的 status 属性，可以自定义每个 step 的状态
onChange 回调
从 1.29.0 版本开始支持 onChange，可以使用它来实现处理进度。onChange 接收一个 number 类型的参数，该参数等于 initial + current。
Accessibility
ARIA
- Steps、Step组件支持传入
aria-label属性，来表示Steps和Step的描述 - Step组件具有
aria-currentstep属性，表示这是步骤条内的一步
API 参考
Steps
整体步骤条。
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|---|---|---|---|---|
| className | 类名 | string | ||
| current | 指定当前步骤，从 0 开始记数。在子 Step 元素中，可以通过 status 属性覆盖状态 | number | 0 | |
| direction | 指定步骤条方向。目前支持水平（horizontal）和竖直（vertical）两种方向 | string | horizontal | |
| hasLine | 步骤条类型为basic时，可控制是否显示连接线 | boolean | true | 1.18.0 |
| initial | 起始序号，从 0 开始记数 | number | 0 | |
| status | 指定当前步骤的状态，可选 wait、process、finish、error、warning | string | process | |
| size | 对于简单步骤条和导航步骤条，可选尺寸尺寸，值为small、default | string | default | 1.18.0 |
| style | 样式 | CSSProperties | ||
| type | 步骤条类型，可选 fill、basic、nav | string | fill | 1.18.0 |
| onChange | 改变步骤条的回调 | (index: number) => void | - | 1.29.0 |
Steps.Step
步骤条内的每一个步骤。
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|---|---|---|---|---|
| aria-label | 容器aria-label | React.AriaAttributes["aria-label"] | ||
| className | 类名 | string | ||
| description | 步骤的详情描述，可选 | ReactNode | - | |
| icon | 步骤图标的类型，可选 | ReactNode | - | |
| role | 容器role | React.AriaRole | - | |
| status | 指定状态。当不配置该属性时，会使用 Steps 的 current 来自动指定状态。可选：wait、process、finish、error、warning | string | wait | |
| style | 样式 | CSSProperties | ||
| title | 标题 | ReactNode | - | |
| onClick | 点击回调 | function | - | |
| onKeyDown | 回车事件回调 | function | - |
文案规范
- 步骤标题
- 标题应保持简洁，避免截断和换行；
- 使用句子大小写书写；
- 不要包含标点符号
- 描述
- 为标题补充上下文信息
- 不要以标点符号结尾