Steps 步骤条

引导用户按照流程完成任务的分步导航条，可根据实际场景设定步骤，步骤不得少于 2 步。

基础用法

简单的步骤条。

迷你版

迷你版的步骤条，通过设置 <c-steps size="small"> 启用。

带图标的步骤条

通过设置 Step 的 icon 属性，可以启用自定义图标。

竖直方向

简单的竖直方向的步骤条。

竖直方向的小型步骤条

简单的竖直方向的小型步骤条。

步骤运行错误

使用 Steps 的 status 属性来指定当前步骤的状态。

点状步骤条

包含步骤点的进度条。

可点击

设置 onChange 事件后，Steps 变为可点击状态。

Steps API

Steps Props

属性名	说明	类型	可选值	默认值
current	指定当前步骤，从 0 开始记数	number	—	0
direction	指定步骤条方向	string	'horizontal' / 'vertical'	'horizontal'
labelPlacement	指定标签放置位置，默认水平放图标右侧，可选 vertical 放图标下方	string	'horizontal' / 'vertical'	'horizontal'
progressDot	点状步骤条，可以设置为一个 具名插槽	boolean / slot	—	false
size	指定大小	string	'default' / 'small'	'default'
status	指定当前步骤的状态	string	'wait' / 'process' / 'finish' / 'error'	'process'

Steps Events

事件名	说明	回调参数
change	点击步骤时触发	(current: number)

Step Props

属性名	说明	类型	可选值	默认值
title	标题	string	—	—
subTitle	子标题	string	—	—
description	步骤的详情描述	string	—	—
icon	步骤图标的类型	string / Component	—	—
status	指定状态。当不配置该属性时，会使用 Steps 的 current 来自动指定状态	string	'wait' / 'process' / 'finish' / 'error'	—
disabled	禁用点击	boolean	—	false

Step Slots

插槽名	说明
icon	自定义图标
title	自定义标题
subTitle	自定义子标题
description	自定义描述

Dark Mode / CSS Variables

在暗色模式下，步骤条的标题默认使用 #141414 背景色来遮挡连接线。如果您的容器背景色不是 #141414，可能会看到文字背景色与容器背景色不一致的现象。 您可以通过设置 --c-bg-color 变量来匹配您的容器背景色：

.c-steps {
  --c-bg-color: #1d1e1f; /* 设置为您容器的背景色 */
}