步进器

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

QStepperNavigation 组件允许您在 QStepper 或 QStep 中放置按钮以在步骤间导航。您可以添加任何所需的按钮。

TIP

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

用法

TIP

如果 QStep 内容也有图像,并且您想使用滑动操作进行导航,您可能需要为它们添加 draggable="false",否则原生浏览器行为可能会产生负面干扰。

Keep Alive

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

TIP

您还可以将 contracted 属性连接到 $q.screen 以创建响应式行为,如 :contracted="$q.screen.lt.md"。更多信息:Quasar 屏幕插件。

使用 *-icon 和 *-color 属性(在 QStepper 上或在特定 QStep 上覆盖)来设置颜色。

您还可以为每个步骤的头部使用 prefix 属性(最多 2 个字符)代替图标。如果步骤当前未被编辑且未标记为错误或"完成",则会显示此内容。

您可以使用 header-class 属性将任何 CSS 类应用于头部。在下面的示例中,我们应用了粗体文本: