步进器通过一系列逻辑和编号步骤显示进度。它们也可以用于导航。它们通常在用户需要按照步骤完成某个过程时很有用,例如在 wizard 中。
¥Steppers display progress through a sequence of logical and numbered steps. They may also be used for navigation. They’re usually useful when the user has to follow steps to complete a process, like in a wizard.
QStepperNavigation 组件允许你在 QStepper 或 QStep 中放置按钮以导航各个步骤。你可以自行添加所需的任何按钮。
¥The QStepperNavigation component allows you to place buttons within QStepper or QStep to navigate through the steps. It is up to you to add whatever buttons you require.
提示
要使用全局导航,必须将其添加到 QStepper “navigation” 插槽。
¥To use global navigation, you must add it to the QStepper “navigation” slot.
用法(Usage)
¥Usage
提示
如果 QStep 内容中也包含图片,并且你想使用滑动操作进行导航,则可能需要为其添加 draggable="false",否则原生浏览器的行为可能会产生负面影响。
¥If the QStep content also has images and you want to use swipe actions to navigate, you might want to add draggable="false" to them, otherwise the native browser behavior might interfere in a negative way.
Keep Alive
如果你需要此行为,请注意 QStepper 的布尔值
keep-alive属性。请勿在 QStep 上使用 Vue 原生的<keep-alive>组件。¥Please take notice of the Boolean
keep-aliveprop for QStepper, if you need this behavior. Do NOT use Vue’s native<keep-alive>component over QStep.如果你需要
keep-alive-include或keep-alive-exclude属性,则 QStepname必须是有效的 Vue 组件名称(不允许有空格,不能以数字开头等)。¥Should you need the
keep-alive-includeorkeep-alive-excludeprops then the QStepnames must be valid Vue component names (no spaces allowed, don’t start with a number etc).
水平(Horizontal)
¥Horizontal
垂直(Vertical)
¥Vertical
标题导航(Header navigation)
¥Header navigation
标题选项(Header options)
¥Header options
提示
你还可以将 contracted 属性连接到 $q.screen 属性以创建响应式行为,例如 :contracted="$q.screen.lt.md"。更多信息:Quasar 屏幕插件。
¥You can also connect contracted prop to $q.screen to create a responsive behavior, like :contracted="$q.screen.lt.md". More info: Quasar Screen Plugin.
样式(Style)
¥Style
使用 *-icon 和 *-color 属性(在 QStepper 上或在特定的 QStep 上覆盖)进行颜色调整。
¥Play with coloring using the *-icon and *-color props (on QStepper or override on specific QStep).
你还可以使用 prefix 属性(最多 2 个字符)代替每个步骤标题的图标。如果当前未编辑该步骤且未标记为错误或 “done”,则会显示此信息。
¥You can also use prefix prop (max 2 characters) instead of an icon for each step’s header. This will be displayed if the step is not currently being edited and it isn’t marked with error or as “done”.
你可以使用 header-class 属性将任何 CSS 类应用于标题。在下面的示例中,我们应用了粗体文本:
¥You can use the header-class prop to apply any CSS class(es) to the header. In the example below, we are applying bolded text:
消息槽(Message slot)
¥Message slot