步进器通过一系列逻辑和编号步骤显示进度。它们也可以用于导航。它们通常在用户需要按照步骤完成某个过程时很有用,例如在 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-alive
prop 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-include
orkeep-alive-exclude
props then the QStepname
s 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