Some documentation on this page is available in Chinese only. Component built-in messages follow English; untranslated example text remains in its original language.

Steps

明示任务流程和当前完成程度，引导用户按照步骤完成任务。

Examples

基础用法

基础用法。

描述信息

通过设置 description 属性，可以在每个步骤下方添加描述信息。

内容放置位置

通过设置 content-placement 可以改变内容相对节点的位置，可选 right（默认）和 bottom。

步骤错误

通过设置status="error"来展示错误状态。

自定义图标

通过#icon插槽可以自定义节点图标

隐藏连接线

通过设置show-line="false"可以使用无连接线模式。

竖直步骤条

竖直方向的步骤条。

箭头步骤条

通过设置type="arrow"，可以使用箭头类型的步骤条，注意，仅支持水平步骤条。

点状步骤条

通过设置type="dot"，可以使用点状类型的步骤条。此模式没有small尺寸

导航步骤条

通过设置type="navigation"，可以使用导航类型的步骤条。

可切换步骤条

设置changeable开启点击切换步骤。

API

Steps Props

属性	说明	类型	默认值
type	步骤条的类型	'default' | 'arrow' | 'dot' | 'navigation'	'default'
orientation	步骤条的方向	'horizontal' | 'vertical'	'horizontal'
content-placement	内容相对节点的位置	'right' | 'bottom'	'right'
current(v-model)	当前步骤数	number	-
default-current	默认的步骤数(非受控状态)	number	1
status	当前步骤状态	'wait' | 'process' | 'finish' | 'error'	'process'
show-line	是否显示连接线	boolean	true
size	步骤条尺寸	'sm' | 'md'	'md'
changeable	是否可以点击切换步骤	boolean	false

Steps Events

事件名	说明	参数
change	步骤数发生改变时触发（需开启 changeable）	current:number previous:number ev:Event
update:current	v-model:current 同步	step:number

Steps Slots

插槽名	说明
default	步骤内容
finish-icon	完成状态图标
error-icon	错误状态图标

Step Props

属性	说明	类型	默认值
title	步骤的标题	string	-
description	步骤的描述	string	-
status	步骤的状态	'wait' | 'process' | 'finish' | 'error'	-
disabled	是否禁用步骤	boolean	false

Step Slots

插槽名	说明	参数
default	标题	index、status、active、disabled
title	标题	index、status、active、disabled
node	节点	index、status、active、disabled
icon	图标	index、status、active、disabled
description	描述	index、status、active、disabled

类型定义

组件导出以下类型定义

import type {
  StepsProps,
  StepProps,
  StepsType,
  StepStatus,
  StepsSize,
  StepsContentPlacement,
  StepsInstance,
  StepsStepInstance,
} from '@cedarjs/ui'

同源实现与平台边界

两端各自保存完整源码，不引用公共核心，不共享组件实例或响应式状态；修改时同步维护两份实现。主体、Props、关键样式及配对测试纳入只读源码一致性检查，主题 token 和安装入口各自维护。

Steps 和 Step 的主体、Props、上下文协议与样式同源复制；注入 Symbol 分别定义在各库，不跨库共享。保留四种 type 和原有状态/事件契约。