步进器

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

QStepper API

Loading API...
Please wait...

QStep API

Loading API...
Please wait...

QStepperNavigation API

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

TIP

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

Loading API...
Please wait...

用法

TIP

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

Keep Alive

  • 如果您需要这种行为,请注意QStepper的布尔keep-alive属性。 不要在QStep上使用Vue的原生<keep-alive>组件。
  • 如果需要keep-alive-includekeep-alive-exclude属性,那么QStep的name必须是有效的Vue组件名称(不允许空格,不要以数字等开头)。

水平

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