Steps 步骤条

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

基础用法

简单的步骤条。

含状态的步骤条

每一步骤显示出该步骤的状态。

居中的步骤条

标题和描述可以居中。

带描述的步骤栏

每一步都有描述。

带图标的步骤条

可以在步骤栏中使用各种自定义图标。

垂直的步骤条

垂直方向的步骤条。

简洁风格的步骤条

设置 simple 可应用简洁风格，该条件下 align-center / description / direction / space 都将失效。

Steps API

Steps 属性

属性名	说明	类型	默认
space	每个 step 的间距，不填写将自适应间距。支持百分比。	`number` / `string`	''
direction	显示方向	`enum`	horizontal
active	设置当前激活步骤	`number`	0
process-status	设置当前步骤的状态	`enum`	process
finish-status	设置结束步骤的状态	`enum`	finish
align-center	进行居中对齐	`boolean`	—
simple	是否应用简洁风格	`boolean`	—

Steps 插槽

插槽名	说明	子标签
default	默认插槽	Step

Step API

Step 属性

属性名	说明	类型	默认
title	标题	`string`	''
description	描述文案	`string`	''
icon	Step 组件的自定义图标。也支持 slot 方式写入	`string` / `Component`	—
status	设置当前步骤的状态，不设置则根据 steps 确定状态	`enum`	''

Step 插槽

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

源代码

组件 • 文档

贡献者

Delyan Haralanov

Herrington Darkholme

Page Header 页头