Steps

代码演示

如何引入

import { Steps } from '@chenzy-design/svelte';

默认步骤条（旧版）

建议使用简易版 steps（新版），旧版后续会逐渐 deprecate。

简单步骤条（新版）

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

导航步骤条

通过设置 type="nav" 显示为导航风格步骤条。导航风格的步骤条有以下特点：

1. 步骤条不支持交互。
2. 适用于步骤间互相关联较小、内容互不影响，且需要突出页面视觉元素时使用。
3. 步骤条的宽度按照内容物撑开。
4. Steps.Step 仅支持 title、class、style 属性。

迷你尺寸步骤条

通过设置 size="small" 显示迷你尺寸步骤条。

处理进度

配合内容及按钮使用，表示一个流程的处理进度。

竖直方向的步骤条

通过设置 direction，使用竖直方向的步骤条。

指定步骤状态

步骤运行错误，使用 Steps 的 status 属性来指定当前步骤的状态。

自定义图标/状态

通过设置 Steps.Step 的 icon 属性，可以启用自定义图标；通过设置 Steps.Step 的 status 属性，可以自定义每个 step 的状态。

onChange 回调

onChange 接收一个 number 类型的参数，该参数等于 initial + current，可以使用它来实现处理进度。

API 参考

Steps

整体步骤条。

参数	说明	类型	默认值
class	类名	string	-
current	指定当前步骤，从 0 开始记数。在子 Step 元素中，可以通过 status 属性覆盖状态	number	0
direction	指定步骤条方向，支持水平（horizontal）和竖直（vertical）；nav 型无此参数	string	horizontal
hasLine	步骤条类型为 basic 时，可控制是否显示连接线；fill/nav 型无此参数	boolean	true
initial	起始序号，从 0 开始记数	number	0
status	指定当前步骤的状态，可选 wait、process、finish、error、warning；nav 型无此参数	string	process
size	可选尺寸，值为 small、default；basic/nav 型生效，fill 型无此参数	string	default
style	样式	string	-
type	步骤条类型，可选 fill、basic、nav	string	fill
onChange	改变步骤条的回调	(index: number) => void	-

Steps.Step

步骤条内的每一个步骤。

参数	说明	类型	默认值
aria-label	容器 aria-label	string	-
class	类名	string	-
description	步骤的详情描述，可选；仅 fill/basic 型生效，nav 型不支持此参数	string | Snippet	-
icon	步骤图标的类型，可选；仅 fill/basic 型生效，nav 型不支持此参数	string | Snippet	-
role	容器 role	string	-
status	指定状态。不配置时会使用 Steps 的 current 自动指定状态。可选：wait、process、finish、error、warning；仅 fill/basic 型生效，nav 型不支持此参数	string	wait
style	样式	string	-
title	标题	string | Snippet	-
onClick	点击回调	function	-
onKeyDown	回车事件回调（仅 Enter 键触发）	function	-

无障碍

ARIA

• Steps、Step 组件支持传入 aria-label 属性，来表示 Steps 和 Step 的描述。
• Step 组件固定具有 aria-current="step" 属性（不区分是否为当前步，对齐 Semi）。
• 可点击（fill/basic 型 + onChange）时每步 tabIndex=0，通过 Enter 键触发切换（对齐 Semi，非原生按钮语义，不处理 Space 键）。

文案规范

• 步骤标题
  • 标题应保持简洁，避免截断和换行。
  • 使用句子大小写书写。
  • 不要包含标点符号。
• 描述
  • 为标题补充上下文信息。
  • 不要以标点符号结尾。

设计变量

animation

color

font

height

radius

spacing

width

变量	默认值	用法
--cd-transition-delay-steps-item-backgroundcolor	var(--cd-motion-delay-none)	步骤条 item 背景色-延迟时间
--cd-transition-delay-steps-item-title-icon	var(--cd-motion-delay-none)	步骤条图标颜色-延迟时间
--cd-transition-delay-steps-item-title-text	var(--cd-motion-delay-none)	步骤条标题文本颜色-延迟时间
--cd-transition-duration-steps-item-backgroundcolor	var(--cd-motion-duration-none)	步骤条 item 背景色-动画持续时间
--cd-transition-duration-steps-item-title-icon	var(--cd-motion-duration-none)	步骤条图标颜色-动画持续时间
--cd-transition-duration-steps-item-title-text	var(--cd-motion-duration-none)	步骤条标题文本颜色-动画持续时间
--cd-transition-function-steps-item-backgroundcolor	var(--cd-motion-ease-in)	步骤条 item 背景色-过渡曲线
--cd-transition-function-steps-item-title-icon	var(--cd-motion-ease-in)	步骤条图标颜色-过渡曲线
--cd-transition-function-steps-item-title-text	var(--cd-motion-ease-in)	步骤条标题文本颜色-过渡曲线

显示第 1 条-第 9 条，共 9 条

• 1