Steps 步骤条

使用

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

基础用法

简单的步骤条。

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

胶囊状步骤条

步骤条可以变成胶囊状，设置 capsule 属性为 true 即可。

自定义胶囊状步骤条样式

当capsule 属性为 true时，步骤条的高度和颜色可以通过color和height属性来自定义。

含状态的步骤条

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

也可以使用 title 具名插槽，可以用 slot 的方式来取代属性的设置， 在本文档最后的列表中有所有的插槽可供参考。

居中的步骤条

标题和描述可以居中。

带描述的步骤栏

每一步都有描述。

带图标的步骤条

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

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

垂直的步骤条

垂直方向的步骤条。

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

简洁风格的步骤条

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

API

Steps Props

参数名	描述	类型	默认值
space	每个step的间距，不填写将自适应间距，支持百分比。	string | number	''
direction	步骤条显示方向	enum	horizontal
active	设置当前激活步骤	number	0
process-status	设置步骤条当前状态	enum	finish
icon	自定义图标	string | Component	-
align-center	是否居中显示	boolean	-
simple	是否简洁风格	boolean	-
capsule	是否显示胶囊型步骤条	boolean	false
height	capsule为true时有效，步骤条高度	string | number	-

Steps Slots

插槽名	描述	参数
default	默认插槽，用于放置KStep子标签	-

Step Props

参数名	描述	类型	默认值
title	标题	string	''
description	描述信息	string	''
icon	步骤条图标	string | Component	-
status	设置步骤条当前状态	enum	-
color	capsule为true时有效，设置步骤条填充颜色	string	-

Step Slots

插槽名	描述	参数
icon	自定义图标	-
title	自定义标题	-
description	自定义描述信息	-