步进器通过一系列逻辑和编号的步骤显示进度。它们也可用于导航。 当用户需要按照步骤完成一个过程时,它们通常很有用,例如向导。
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 类应用于头部。在下面的示例中,我们应用了粗体文本: