步骤线

v-stepper 组件用于显示步骤进度。

用例

A stepper can be used for a multitude of scenarios, including shopping carts, record creation and more.

API

名称
alt-labels
默认值
false
类型
boolean

将标签置于步骤的下方

名称
dark
默认值
false
类型
boolean

应用暗黑主题变体

名称
light
默认值
false
类型
boolean

应用明亮主题变体

名称
non-linear
默认值
false
类型
boolean

允许用户跳过任意一步

名称
value
默认值
undefined
类型
number | string

控制可见性

名称
vertical
默认值
false
类型
boolean

垂直显示步骤线

示例

可编辑步骤

用户随时可以选择可编辑的步骤并将跳转到该步。

不可编辑步骤

不可编辑步骤(Non-editable steps)强制用户在整个流程中进行线性处理。

可选步骤

可选步骤可由子文本调出。

水平步骤线

水平步骤线可以让用户定义沿x轴移动的步骤。

垂直步骤线

垂直步骤线可以让用户定义沿y轴移动的步骤。其他地方与水平方向的一致。

线性步骤

线性步骤始终沿着你定义的路径移动。

非线性步骤

非线性步骤可以让用户按照自己选择路线在流程中移动。

备用标签

步骤组件也有一个放置在步骤下方的备用标签样式。

多行表示的错误状态

可以显示错误状态来通知用户必须采取的一些行动。

备用标签样式的多行错误状态显示

错误状态的显示同样可以应用于备用标签样式。

垂直的多行错误状态显示

同样的,错误状态也可以应用于垂直的步骤。

动态步骤

步骤可以动态的添加和移除,如果删除的是当前处于激活状态的步骤,请务必通过更改应用模型来解决这个问题。

Edit this page | language on Github
Vuetify 3 is now available!The latest version of Vuetify is now available!
Learn about Vuetify 3's new features and functionality for modern Vue applications
Start exploringExplore