导航类 · Steps
步骤
将复杂任务或存在先后关系的任务分解,使用步骤组件引导用户按规定流程操作,并让其知道其当前的进度

代码演示

如何引入

默认步骤条(旧版)

建议使用简易版 steps(新版),旧版后续会逐渐 deprecate

简单步骤条(新版)

通过设置 type="basic" 显示为简洁风格步骤条

导航步骤条

通过设置 type="nav" 显示为导航风格步骤条。导航风格的步骤条有以下特点:
  1. 步骤条不支持交互。
  2. 适用于步骤间互相关联较小,内容互不影响,且需要突出页面视觉元素时使用。
  3. 步骤条的宽度按照内容物撑开。
  4. 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-current step 属性,表示这是步骤条内的一步

API 参考

Steps

整体步骤条。
参数说明类型默认值版本
className类名string
current指定当前步骤,从 0 开始记数。在子 Step 元素中,可以通过 status 属性覆盖状态number0
direction指定步骤条方向。目前支持水平(horizontal)和竖直(vertical)两种方向stringhorizontal
hasLine步骤条类型为basic时,可控制是否显示连接线booleantrue1.18.0
initial起始序号,从 0 开始记数number0
status指定当前步骤的状态,可选 waitprocessfinisherrorwarningstringprocess
size对于简单步骤条和导航步骤条,可选尺寸尺寸,值为smalldefaultstringdefault1.18.0
style样式CSSProperties
type步骤条类型,可选 fillbasicnavstringfill1.18.0
onChange改变步骤条的回调(index: number) => void-1.29.0

Steps.Step

步骤条内的每一个步骤。
参数说明类型默认值版本
aria-label容器aria-labelReact.AriaAttributes["aria-label"]
className类名string
description步骤的详情描述,可选ReactNode-
icon步骤图标的类型,可选ReactNode-
role容器roleReact.AriaRole-
status指定状态。当不配置该属性时,会使用 Steps 的 current 来自动指定状态。可选:waitprocessfinisherrorwarningstringwait
style样式CSSProperties
title标题ReactNode-
onClick点击回调function-
onKeyDown回车事件回调function-

设计变量

© 2021 Semi Design. All rights reserved.

京ICP备19058139号-13浙公网安备 33011002016131号

Designed & Developed with love by Douyin FE & MED