步进器

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

QStepper API

props

slots

events

methods

behavior

header

model

style

transition

keep-alive

: Boolean

说明

等价于在内容上使用 Vue 的原生 <keep-alive> 组件

keep-alive-include

: String | Array | RegExp

说明

等价于在 <keep-alive> 组件中使用 Vue 的原生 include 属性；值必须是有效的 Vue 组件名称。

keep-alive-exclude

: String | Array | RegExp

说明

等价于在 <keep-alive> 中使用 Vue 的原生 exclude 属性；值必须是有效的 Vue 组件名称。

keep-alive-max

: Number

说明

等价于在 <keep-alive> 组件中使用 Vue 的原生 max 属性

animated

: Boolean

说明

启用面板之间的过渡效果（还可以查看 'transition-prev' 和 'transition-next' 属性）

infinite

: Boolean

说明

使组件呈现为无限的（当到达最后一个面板时，下一个将成为第一个）

swipeable

: Boolean

说明

启用滑动事件（可能会干扰内容的触摸/鼠标事件）

vertical

: Boolean

说明

将 Stepper 放置在垂直模式中（而不是默认的水平模式）

header-nav

: Boolean

说明

允许通过头部导航

contracted

: Boolean

说明

在窄窗口上隐藏标题标签

QStep API

props

slots

behavior

general

header

state

style

header-nav

: Boolean

说明

允许通过头部导航

QStepperNavigation API

此组件允许您在 QStepper 或 QStep 中放置按钮，以在步骤中导航。您可以根据需要添加任何按钮。

TIP

如果要使用全局导航，您需要将其添加到 QStepper 的 ‘navigation’ 插槽中。

slots

default

说明

自定义导航的内容，是 QStep 或 QStepper 的子组件（全局通过 'navigation' 插槽）的内容。

用法

TIP

QStep 的内容也可以是图像，如果您需要在图像上滑动导航，那么最好为它们添加 draggable="false"，否则浏览器的原生行为可能导致副作用。

Keep Alive

请注意 QStepper 的 keep-alive 属性，如果您需要这个功能，请使用它，而不是 Vue 提供的 <keep-alive> 组件包裹 QStep。
如果您需要使用 keep-alive-include 或 keep-alive-exclude 属性，那么 QStep 的 name 属性必须是一个合法的 Vue 组件名称（不含空格、不以数字开头等）。

水平的

For each ad campaign that you create, you can control how much you're willing to spend on clicks and conversions, which networks and geographical locations you want your ads to show on, and more.

垂直的

Select campaign settings

For each ad campaign that you create, you can control how much you're willing to spend on clicks and conversions, which networks and geographical locations you want your ads to show on, and more.

Create an ad group

Optional

Ad template

Create an ad

头部导航

For each ad campaign that you create, you can control how much you're willing to spend on clicks and conversions, which networks and geographical locations you want your ads to show on, and more.

Template

Script

All

<template>
  <div class="q-pa-md">
    <q-btn label="Reset" push color="white" text-color="primary" @click="step = 1" class="q-mb-md" />

    <q-stepper
      v-model="step"
      header-nav
      ref="stepper"
      color="primary"
      animated
    >
      <q-step
        :name="1"
        title="Select campaign settings"
        icon="settings"
        :done="step > 1"
        :header-nav="step > 1"
      >
        For each ad campaign that you create, you can control how much you're willing to
        spend on clicks and conversions, which networks and geographical locations you want
        your ads to show on, and more.

        <q-stepper-navigation>
          <q-btn @click="() => { done1 = true; step = 2 }" color="primary" label="Continue" />
        </q-stepper-navigation>
      </q-step>

      <q-step
        :name="2"
        title="Create an ad group"
        caption="Optional"
        icon="create_new_folder"
        :done="step > 2"
        :header-nav="step > 2"
      >
        An ad group contains one or more ads which target a shared set of keywords.

        <q-stepper-navigation>
          <q-btn @click="() => { done2 = true; step = 3 }" color="primary" label="Continue" />
          <q-btn flat @click="step = 1" color="primary" label="Back" class="q-ml-sm" />
        </q-stepper-navigation>
      </q-step>

      <q-step
        :name="3"
        title="Create an ad"
        icon="add_comment"
        :header-nav="step > 3"
      >
        Try out different ad text to see what brings in the most customers, and learn how to
        enhance your ads using features like ad extensions. If you run into any problems with
        your ads, find out how to tell if they're running and how to resolve approval issues.

        <q-stepper-navigation>
          <q-btn color="primary" @click="done3 = true" label="Finish" />
          <q-btn flat @click="step = 2" color="primary" label="Back" class="q-ml-sm" />
        </q-stepper-navigation>
      </q-step>
    </q-stepper>
  </div>
</template>

For each ad campaign that you create, you can control how much you're willing to spend on clicks and conversions, which networks and geographical locations you want your ads to show on, and more.

头部选项

An ad group contains one or more ads which target a shared set of keywords.

For each ad campaign that you create, you can control how much you're willing to spend on clicks and conversions, which networks and geographical locations you want your ads to show on, and more.

TIP

您可以将 contracted 属性与 $q.screen 联系起来以实现响应式的行为，例如 :contracted="$q.screen.lt.md"。更多信息： Quasar 屏幕插件.

For each ad campaign that you create, you can control how much you're willing to spend on clicks and conversions, which networks and geographical locations you want your ads to show on, and more.

样式

在 QStepper 或者特定的 QStep 上使用 *-icon 和 *-color 属性进行着色。

For each ad campaign that you create, you can control how much you're willing to spend on clicks and conversions, which networks and geographical locations you want your ads to show on, and more.

您还可以为每个步骤的标题使用 prefix 属性（最多 2 个字符）来代替图标。如果步骤当前未被编辑，并且未标记为错误或“已完成”，则将显示此信息。

For each ad campaign that you create, you can control how much you're willing to spend on clicks and conversions, which networks and geographical locations you want your ads to show on, and more.

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

Select campaign settings

Create an ad group

Optional

Ad template

Create an ad

For each ad campaign that you create, you can control how much you're willing to spend on clicks and conversions, which networks and geographical locations you want your ads to show on, and more.

消息插槽

Template

Script

All

<template>
  <div class="q-pa-md">

    <q-stepper
      v-model="step"
      ref="stepper"
      color="primary"
      animated
    >
      <q-step
        :name="1"
        title="Select campaign settings"
        icon="settings"
        :done="step > 1"
        style="min-height: 200px;"
      >
        For each ad campaign that you create, you can control how much you're willing to
        spend on clicks and conversions, which networks and geographical locations you want
        your ads to show on, and more.
      </q-step>

      <q-step
        :name="2"
        title="Create an ad group"
        caption="Optional"
        icon="create_new_folder"
        :done="step > 2"
        style="min-height: 200px;"
      >
        An ad group contains one or more ads which target a shared set of keywords.
      </q-step>

      <q-step
        :name="3"
        title="Ad template"
        icon="assignment"
        disable
        style="min-height: 200px;"
      >
        This step won't show up because it is disabled.
      </q-step>

      <q-step
        :name="4"
        title="Create an ad"
        icon="add_comment"
        style="min-height: 200px;"
      >
        Try out different ad text to see what brings in the most customers, and learn how to
        enhance your ads using features like ad extensions. If you run into any problems with
        your ads, find out how to tell if they're running and how to resolve approval issues.
      </q-step>

      <template v-slot:navigation>
        <q-stepper-navigation>
          <q-btn @click="$refs.stepper.next()" color="primary" :label="step === 4 ? 'Finish' : 'Continue'" />
          <q-btn v-if="step > 1" flat color="primary" @click="$refs.stepper.previous()" label="Back" class="q-ml-sm" />
        </q-stepper-navigation>
      </template>

      <template v-slot:message>
        <q-banner v-if="step === 1" class="bg-purple-8 text-white q-px-lg">
          Campaign settings are important...
        </q-banner>
        <q-banner v-else-if="step === 2" class="bg-orange-8 text-white q-px-lg">
          The ad group helps you to...
        </q-banner>
        <q-banner v-else-if="step === 3" class="bg-green-8 text-white q-px-lg">
          The Ad template is disabled - this won't be displayed
        </q-banner>
        <q-banner v-else class="bg-blue-8 text-white q-px-lg">
          The final step is creating the ad...
        </q-banner>
      </template>
    </q-stepper>

  </div>
</template>

Campaign settings are important...

For each ad campaign that you create, you can control how much you're willing to spend on clicks and conversions, which networks and geographical locations you want your ads to show on, and more.

发现了一处错误？帮助改进提交问题

鄂ICP备2022014971号-1

免责声明本站点所包含的任何跳转链接均为第三方广告内容，站点对这些广告内容的准确性、合法性、真实性不承担任何责任。用户点击跳转链接进入第三方网站后，应自行判断广告内容的真实性和合法性，并自行承担因使用广告内容而产生的风险和责任。任何因使用第三方广告内容而导致的损失或损害，本站点概不负责。