API 浏览器
步进器

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

Loading QStepper API...
Loading QStep API...
Loading QStepperNavigation API...

QStepperNavigation 组件允许你在 QStepperQStep 中放置按钮以导航各个步骤。你可以自行添加所需的任何按钮。

¥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-includekeep-alive-exclude 属性,则 QStep name 必须是有效的 Vue 组件名称(不允许有空格,不能以数字开头等)。

    ¥Should you need the keep-alive-include or keep-alive-exclude props then the QStep names must be valid Vue component names (no spaces allowed, don’t start with a number etc).

水平(Horizontal)

¥Horizontal

Horizontal



垂直(Vertical)

¥Vertical

Vertical



标题导航(Header navigation)

¥Header navigation

Non-linear header navigation



Linear header navigation



标题选项(Header options)

¥Header options

Signaling step error



Alternative labels



提示

你还可以将 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.

Contracted



样式(Style)

¥Style

使用 *-icon*-color 属性(在 QStepper 上或在特定的 QStep 上覆盖)进行颜色调整。

¥Play with coloring using the *-icon and *-color props (on QStepper or override on specific QStep).

Coloring



你还可以使用 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”.

Step prefix



Force dark mode



你可以使用 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:

Header Class



消息槽(Message slot)

¥Message slot

Message slot with fixed height steps