跳到主要内容

Steps 步骤条

一个要分几步走完的流程，现在走到了哪一步：注册、下单、导入向导。它只展示进度，不负责切换内容。

基本用法

current 是当前步骤的下标（从 0 开始）；之前的步骤显示对勾，之后的显示序号。current 等于步骤数表示全部完成。status="error" 把当前步骤标成出错。

  1. 第 1 步，已完成：填写信息收货人和地址
  2. 第 2 步，当前步骤：选择支付支持多种方式
  3. 第 3 步，未开始：确认订单核对后提交

纵向

默认横向排列，窄于 520px 时自动改成纵向。步骤多、说明长，或者放在侧栏里时直接用 orientation="vertical"。

  1. 第 1 步，已完成：上传文件members.csv，共 1,204 行
  2. 第 2 步，已完成：匹配字段已匹配 8 个字段，忽略 2 个
  3. 第 3 步，当前步骤：校验数据正在检查重复的邮箱…
  4. 第 4 步，未开始：完成导入

自定义图标

icon 替换圆圈里的序号。已完成的步骤仍然显示对勾，出错的显示叉号。

  1. 第 1 步，已完成：编辑
  2. 第 2 步，当前步骤：上传
  3. 第 3 步，未开始：分享

接口

Steps

属性类型默认值说明
items*StepItem[]—步骤列表。
currentnumber0当前步骤的下标（从 0 开始）；等于 items.length 表示全部完成。
orientation'horizontal' | 'vertical''horizontal'方向。horizontal 在窄屏自动改成纵向。
status'default' | 'error''default'当前步骤是否出错。
labelstring'步骤'步骤条的名字。

StepItem

属性类型默认值说明
title*ReactNode—步骤名。
descriptionReactNode—步骤说明。
iconReactNode—替换圆圈里的序号。

无障碍

  • 渲染成有名字的有序列表 ol；当前步骤带 aria-current="step"。
  • 每一步的标题前有一段只给读屏的文字：“第 2 步，当前步骤：”“第 1 步，已完成：”“出错：”。状态不只靠颜色，圆圈里还有对勾、叉号或序号。
  • 步骤条是只读的，不可聚焦、没有键盘操作。需要点步骤跳转时，请另外提供按钮（如上面的“上一步 / 下一步”）。
  • 步骤变化不会自动播报；切换步骤后请把焦点移到新一步的标题上，或在一个 role="status" 区域里说明。