Skip to content

步骤条

v-stepper 组件通过数字步骤显示进度。

Stepper Entry

TIP

此特性在 v3.4.0 (Blackguard) 版本引入。

使用

一个步骤组件适用于多种场景,包括购物车、创建记录等等。

WARNING

由于水平和垂直步进器在显示和功能上存在巨大差异,vertical 属性将迁移到一个新的组件 v-stepper-vertical.

API

组件描述
v-stepper主要组件
v-stepper-actions步骤条的操作部分
v-stepper-header步骤条项目的容器
v-stepper-item主要组件
v-stepper-window每个步骤窗口项目的窗口容器
v-stepper-window-item每个步骤窗口的步骤项目

组件结构

v-stepper 中元素的推荐放置是:

  • 在顶部放置 v-stepper-header 组件
  • P在步骤条 header 后面放置 v-stepper-window 或者其他形式的内容
  • 在步骤条 window 部分后面放置 v-stepper-actions

Pending graphic

元素 / 区域描述
1. 容器步骤条的放置容器,用于放置所有的 v-stepper 组件。由三个主要部分组成:v-stepper-headerv-stepper-windowv-stepper-actions
2. 标题标题区域用于放置 v-stepper-item 组件。
3. 窗口窗口区域用于放置 v-stepper-window-item 组件。
4. 操作 (可选)拥有若干例如 v-btn 组件的内容区域

指南

v-stepper 组件提供了一个类似于安装向导框的线性过程,可以用于向用户收集或者展示信息。

属性

v-stepper 组件有多个属性来自定义其视觉外观和功能。

不可编辑步骤条

基本的步骤条组件是不可编辑的,意味着用户只能在步骤条中线性移动。

可编辑步骤条

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

备用标签

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

线性步骤条

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

可选步骤

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

步骤项目

步骤条组件可以接受一个项目的数组,类似于 v-listv-select组件。

WARNING

如果没有提供值,则步骤条会默认使用数组下标值+1作为步骤值。

移动端

使用 mobile 属性来隐藏 v-stepper-item 组件的标题和子标题。

错误状态

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

动态步骤数

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

错误状态的备用标签

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

非线性的步骤条

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