Steps 步骤条

引导用户按照流程完成任务。它的步骤可以根据实际应用场景设定，且步骤数不可以少于2。

基础用法

设置 active 属性，接受一个Number，表明步骤的 index，从 0 开始。你可以设置 space 属性，它接受一个Number，固定步骤的宽度，单位为px。如果不设置，则为自适应。设置 finish-status 属性可以改变已经完成的步骤的状态。

步骤 1

步骤 2

步骤 3

含状态的步骤条

显示每个步骤的状态。

使用 title 属性设置步骤的名称，或通过具名 slot 的方式来重写。我们已在本页的底部为你列出了所有可用的 slot。

已完成

进行中

步骤 3

居中

标题和描述都将居中。

步骤 1

一些描述

步骤 2

一些描述

步骤 3

一些描述

带描述的步骤条

每个步骤都有描述。

步骤 1

一些描述

步骤 2

一些描述

步骤 3

一些描述

带图标的步骤条

步骤条内可以启用各种自定义图标。

通过 icon 属性设置图标。图标的类型可以参考 Icon 组件的文档。此外，您还可以通过具名 slot 自定义图标。

步骤 1

步骤 2

步骤 3

竖式步骤条

竖直方向的步骤条。

你只需要在 el-steps 元素中设置 direction 属性为 vertical 即可。

步骤 1

步骤 2

步骤 3

简洁风格的步骤条

简洁风格的步骤条，其中 align-center、description、direction 和 space 会被忽略。

步骤 1

步骤 2

步骤 3

步骤 1

步骤 2

步骤 3

Steps API

Steps 属性

名称	描述	类型	默认值
space	每个 step 的间距，不填写将自适应。支持百分比。	`number` / `string`	''
direction	显示方向	`枚举`	horizontal
active	当前激活的步骤	`number`	0
process-status	当前步骤的状态	`枚举`	process
finish-status	结束步骤的状态	`枚举`	finish
align-center	标题和描述居中	`boolean`	—
simple	是否应用简洁主题	`boolean`	—

Steps 插槽

名称	描述	子标签
default	自定义默认内容	Step

Step API

Step 属性

名称	描述	类型	默认值
title	步骤标题	`string`	''
description	步骤描述	`string`	''
icon	步骤自定义图标。也可以通过具名插槽传入图标	`string` / `Component`	—
status	当前状态。它会覆盖 Steps 的状态。	`枚举`	''