Steps 步骤条

使用

import { KSteps } from "@ksware/ksw-ux";

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

基础用法

简单的步骤条。

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

胶囊状步骤条

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

自定义胶囊状步骤条样式

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

含状态的步骤条

可以通过 k-step 的status属性来设置步骤的状态，可选 wait、process、finish、error 四种状态。

居中的步骤条

可以通过 k-steps 的 align-center 属性让步骤条居中。

带描述的步骤条

可以通过 k-step 的 description 属性来为每一个步骤添加描述。

带图标的步骤条

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

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

垂直的步骤条

垂直方向的步骤条。

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

简洁风格的步骤条

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

Steps API

Steps Props

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

Steps Slots

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

Step API

Step Props

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

Step Slots

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