步进器

步进器通过一系列逻辑步骤和编号步骤显示进度。它们也可用于导航。 当用户必须按照步骤完成一个过程时,它们通常很有用,比如在向导中。

安装

/*
 * No installation step is necessary.
 * It gets installed by default by @quasar/app v2+.
 */

用法

TIP

如果QStep内容也有图像,并且您希望使用滑动操作进行导航,则可能需要将draggable="false"添加到图像中,否则本地浏览器行为可能会以负面方式干扰。

WARNING

如果您需要这种行为,请注意QStepper的布尔keep-alive属性。 不要在QStep上使用Vue的原生<keep-alive>组件。

水平

Horizontal

垂直

Vertical

头部导航

Non-linear header navigation
Linear header navigation

头部选项

Signaling step error
Alternative labels

TIP

您也可以将contracted属性连接到$ q.screen来做出响应,例如::contracted="$q.screen.lt.md"。 更多信息:Quasar屏幕插件

Contracted

风格

使用*-icon*-color属性(在QStepper上或在特定QStep上覆盖)进行着色。

Coloring

您还可以使用prefix属性(最多2个字符)代替每个步骤头部的图标。 如果当前未在编辑步骤,并且未将其标记为错误或“done”,则将显示该内容。

Step prefix
Dark

从Quasar v1.9.13+开始,可以使用header-class属性将任何CSS类应用于header。在下面的示例中,我们应用了粗体文本:

Header Class

消息插槽

Message slot with fixed height steps

QStepper API

Loading API...
Please wait...

QStep API

Loading API...
Please wait...

QStepperNavigation API

该组件允许您将按钮放置在QStepperQStep中以浏览各个步骤。 您可以根据需要添加任何按钮。

TIP

要使用全局导航,必须将其添加到QStepper的“navigation”插槽中。

Loading API...
Please wait...