Steps 步骤条
用于引导用户按照流程完成任务的分步导航条,可根据实际应用场景设定步骤。
代码演示
API
Steps Attributes
参数 | 说明 | 类型 | 可选值 | 默认值 | Version |
space | 每个 step 的间距,不填写将自适应间距。支持百分比。 | Number | String | — | — | |
direction | 显示方向 | String | 'vertical' | 'horizontal' | 'horizontal' | |
active | 设置当前激活步骤 | Number | — | 0 | |
process-status | 设置当前步骤的状态 | String | 'wait' | 'process' | 'finish' | 'error' | 'success' | 'process' | |
finish-status | 设置结束步骤的状态 | String | 'wait' | 'process' | 'finish' | 'error' | 'success' | 'finish' | |
simple | 设置步骤条为简洁风格 | Boolean | — | — | v2.0.0 |
dot | 设置步骤条为点状风格,适用于步骤条较多时 | Boolean | — | — | v2.1.3 |
align-center | 进行居中对齐 (在 v2.0.0 被废弃) | | — | — | |
lead | 状态引导 (在 v2.0.0 被废弃) | | — | — | |
Step Attributes
参数 | 说明 | 类型 | 可选值 | 默认值 | Version |
title | 标题 | String | — | — | |
description | 描述性文字 | String | — | — | |
icon | 图标 (传入 icon 的 class 全名来自定义 icon,也支持 slot 方式写入) | String | — | — | |
status | 设置当前步骤的状态,不设置则根据 steps 确定状态 | String | 'wait' | 'process' | 'finish' | 'error' | 'success' | 'finish' | — |
Step Slot
name | 说明 | Version |
title | 自定义标题 | |
icon | 自定义图标 | |
description | 自定义描述性文字 | |
上次更新: 4/17/2024, 5:12:42 PM