默认主题
步骤条

示例

1
选择配置
请选择主机的配置信息
2
选择弹性IP
请选择主机弹性IP的配置信息
3
设置VPC
基础用法

Steps嵌套Step即可实现步骤条,用v-model双向绑定当前指向哪一步,索引从0开始

index.vdt
index.styl
index.js
index.vue (Vue)
index.jsx (React)
1
选择配置
请选择主机的配置信息
2
选择弹性IP
请选择主机弹性IP的配置信息
3
设置VPC
快速点击切换

添加clickable属性,即可实现点击【已完成】的步骤快速切换到相应步骤的功能

index.vdt
index.styl
index.js
index.vue (Vue)
index.jsx (React)
1
选择配置
请选择主机的配置信息
选择弹性IP
请选择主机弹性IP的配置信息
3
设置VPC
错误状态

指定Stepsstatus属性为error,即可将步骤条置为错误状态

index.vdt
index.js
index.vue (Vue)
index.jsx (React)
1
选择配置
请选择主机的配置信息
2
选择弹性IP
请选择主机弹性IP的配置信息
3
设置VPC
1
选择配置
请选择主机的配置信息
选择弹性IP
请选择主机弹性IP的配置信息
3
设置VPC
时间轴样式

设置type属性值为line,可以展示时间轴样式的步骤条

index.vdt
index.styl
index.js
index.vue (Vue)
index.jsx (React)
1
选择配置
请选择主机的配置信息
2
选择弹性IP
请选择主机弹性IP的配置信息
3
设置VPC
1
选择配置
请选择主机的配置信息
选择弹性IP
请选择主机弹性IP的配置信息
3
设置VPC
简洁样式

设置type属性值为simple,可以展示简洁样式的步骤条

index.vdt
index.styl
index.js
index.vue (Vue)
index.jsx (React)

属性

Steps

属性 说明 类型 默认值
value 标识当前第几步,从0开始 Number undefined
status 步骤条的状态 "normal" | "error" "normal"
type 步骤条样式 "default" | "line" | "simple" "default"
clickable 是否支持快速切换【已完成】的步骤 Boolean false

Step

属性 说明 类型 默认值
title 标题 String undefined