Toggle

Form Components 表单组件
Checkbox 复选框
Form Components 表单组件
Option Group 选项组
Form Components 表单组件
Radio 单选框
Form Components 表单组件
Button Toggle 按钮开关

QToggle 组件是采集用户输入的一个基本元素。您可以使用它为用户提供设置开关切换或者真假值输入功能。

TIP

关于创建一组选项框的其他可能性，请参阅 QOptionGroup。

QToggle API

QToggle API
name
: String
说明
用于指定控件的名称；如果处理直接提交到 URL 的表单时很有用
toggle-order
: String
说明
确定两个状态的切换顺序（'t' 代表 true 状态，'f' 代表 false 状态）；如果 'toggle-indeterminate' 是 true，则顺序为：indet -> 第一个状态 -> 第二个状态 -> indet（循环），否则：indet -> 第一个状态 -> 第二个状态 -> 第一个状态 -> 第二个状态 -> ...
toggle-indeterminate
: Boolean
说明
当用户点击/触摸组件时，我们是否应该通过不确定状态进行切换？
keep-color
: Boolean
说明
当组件取消选中/关闭时，是否保留颜色（如果指定了任何颜色）？

用法

基础

使用 color 属性来控制开关的颜色

<template>
  <div class="q-pa-md">
    <q-toggle v-model="value" />

    <q-toggle
      v-model="value"
      color="green"
    />

    <q-toggle
      v-model="value"
      color="yellow"
    />

    <q-toggle
      v-model="value"
      color="red"
    />
  </div>
</template>

带有标签

<template>
  <div class="q-pa-md q-gutter-lg">
    <div>
      <q-toggle
        v-model="value"
        label="On Right"
      />

      <q-toggle
        v-model="value"
        color="green"
        label="On Right"
      />

      <q-toggle
        v-model="value"
        color="yellow"
        label="On Right"
      />

      <q-toggle
        v-model="value"
        color="red"
        label="On Right"
      />
    </div>

    <div>
      <q-toggle
        v-model="value"
        label="On Left"
        left-label
      />

      <q-toggle
        v-model="value"
        color="green"
        label="On Left"
        left-label
      />

      <q-toggle
        v-model="value"
        color="yellow"
        label="On Left"
        left-label
      />

      <q-toggle
        v-model="value"
        color="red"
        label="On Left"
        left-label
      />
    </div>
  </div>
</template>
On Right
On Right
On Right
On Right
On Left
On Left
On Left
On Left

保留颜色

<template>
  <div class="q-pa-md">
    <q-toggle
      v-model="value"
      color="primary"
      keep-color
    />

    <q-toggle
      v-model="value"
      color="green"
      keep-color
    />

    <q-toggle
      v-model="value"
      color="orange"
      keep-color
    />

    <q-toggle
      v-model="value"
      color="red"
      keep-color
      readonly
    />
  </div>
</template>

带有图标

<template>
  <div class="q-pa-md q-gutter-sm">
    <div>
      <q-toggle
        v-model="first"
        icon="alarm"
      />
      <q-toggle
        v-model="second"
        color="pink"
        icon="mail"
        label="Same Icon for each state"
      />
    </div>

    <div>
      <q-toggle
        v-model="third"
        checked-icon="check"
        color="green"
        unchecked-icon="clear"
      />
      <q-toggle
        v-model="fourth"
        checked-icon="check"
        color="red"
        label="Different icon for each state"
        unchecked-icon="clear"
      />
    </div>
  </div>
</template>
Same Icon for each state
Different icon for each state

自定义 model 值

您可以自定义 model 的值来替换默认的 true/false。

<template>
  <div class="q-pa-md q-gutter-y-sm column">
    <q-toggle
      :label="`Model is ${blueModel} (default behaviour)`"
      v-model="blueModel"
    />

    <q-toggle
      :label="pinkModel"
      color="pink"
      false-value="Disagreed"
      true-value="Agreed"
      v-model="pinkModel"
    />

    <q-toggle
      :false-value="13"
      :label="`Model is number ${greenModel}`"
      :true-value="42"
      color="green"
      v-model="greenModel"
    />

    <q-toggle
      :false-value="true"
      :label="`Model is ${redModel} (flipped boolean)`"
      :true-value="false"
      color="red"
      v-model="redModel"
    />
  </div>
</template>
Model is true (default behaviour)
Agreed
Model is number 42
Model is true (flipped boolean)

不定状态

在下面的示例中，只要单击第一个 QToggle，它就开始在真/假之间切换。然而，第二个 QToggle 通过设置toggle-indeterminate 属性可以在三种状态（不确定/真/假）之间切换。您可以选择设置 indeterminate-value，否则不确定的值将被视为 null

<template>
  <div class="q-pa-md">
    <div class="q-gutter-sm">
      <q-toggle indeterminate-value="maybe" v-model="theModel2" label="Did you eat lunch today?" />
    </div>

    <div class="q-px-sm">
      The model data: <strong>{{ JSON.stringify(theModel2) }}</strong>
    </div>

    <div class="q-gutter-sm">
      <q-toggle toggle-indeterminate v-model="theModel" label="Did you eat lunch today?" />
    </div>

    <div class="q-px-sm row no-wrap items-center">
      <div class="col">
        The model data: <strong>{{ JSON.stringify(theModel) }}</strong>
      </div>
      <q-btn color="primary" label="Reset" @click="reset" class="q-ml-md" />
    </div>
  </div>
</template>
Did you eat lunch today?
The model data: "maybe"
Did you eat lunch today?
The model data: null

切换顺序

默认情况下，QToggle 在点击时按照下述顺序切换值：indeterminate -> checked -> unchecked。但是您可以通过 toggle-order 属性来修改此行为。这个属性决定了切换状态的顺序是 tf（默认），或者 ft（t 表示 true/checked 状态，f 表示 false/unchecked 状态）

切换顺序：

  • 如果 toggle-indeterminate 是 true，那么：indet -> first state -> second state -> indet （依次循环）
  • 否则： indet -> first state -> second state -> first state -> second state -> …
<template>
  <div class="q-pa-md">
    <q-btn class="q-mb-md" color="primary" label="Reset models" @click="resetModels" />

    <div class="q-gutter-sm">
      <q-toggle v-model="teal" label="'tf' order" color="teal" />
      <q-toggle toggle-order="ft" v-model="orange" label="'ft' order" color="orange" />
      <q-toggle toggle-indeterminate v-model="red" label="'tf' order + toggle-indeterminate" color="red" />
      <q-toggle toggle-indeterminate toggle-order="ft" v-model="cyan" label="'ft' order + toggle-indeterminate" color="cyan" />
    </div>
  </div>
</template>
'tf' order
'ft' order
'tf' order + toggle-indeterminate
'ft' order + toggle-indeterminate

数组 model

如果有多个开关，则可以使用数组作为所有开关的 数据 model，并在每个开关上指定 val 属性。如果勾选该开关，其 val 将插入数组，反之亦然。

<template>
  <div class="q-pa-md q-gutter-sm">
    <q-toggle color="blue" label="Blue" v-model="selection" val="blue" />
    <q-toggle color="yellow" label="Yellow" v-model="selection" val="yellow" />
    <q-toggle color="green" label="Green" v-model="selection" val="green" />
    <q-toggle color="red" label="Red" v-model="selection" val="red" />
    <div>
      Model: {{selection}}
    </div>
  </div>
</template>
Blue
Yellow
Green
Red
Model: [ "yellow", "red" ]

黑色和禁用

<template>
  <div class="q-pa-md bg-grey-10 text-white">
    <q-toggle
      color="blue"
      dark
      v-model="blue"
    />

    <q-toggle
      color="green"
      dark
      v-model="green"
    />

    <q-toggle
      color="yellow"
      dark
      v-model="yellow"
    />

    <q-toggle
      color="red"
      dark
      v-model="red"
    />
  </div>
</template>
<template>
  <div class="q-pa-md">
    <q-toggle
      v-model="value"
      color="primary"
      disable
    />

    <q-toggle
      v-model="value"
      color="green"
      disable
    />

    <q-toggle
      v-model="value"
      color="yellow"
      disable
    />

    <q-toggle
      v-model="value"
      color="red"
      disable
    />
  </div>
</template>

大小

除了下面的标准尺寸，您可以通过 size 属性定义自己的尺寸（最后一个示例是自定义尺寸）。

<template>
  <div class="q-pa-md">
    <div class="q-gutter-sm">
      <q-toggle size="xs" v-model="shape" val="xs" label="Size 'xs'" />
      <q-toggle size="sm" v-model="shape" val="sm" label="Size 'sm'" />
      <q-toggle size="md" v-model="shape" val="md" label="Size 'md'" />
      <q-toggle size="lg" v-model="shape" val="lg" label="Size 'lg'" />
      <q-toggle size="xl" v-model="shape" val="xl" label="Size 'xl'" />

      <!-- custom size -->
      <q-toggle size="150px" v-model="shape" val="150px" label="Size '150px'" />
    </div>

    <div class="q-px-sm">
      Your selection is: <strong>{{ shape }}</strong>
    </div>
  </div>
</template>
Size 'xs'
Size 'sm'
Size 'md'
Size 'lg'
Size 'xl'
Size '150px'
Your selection is: [ "line" ]

搭配 QOptionGroup

TIP

您还可以使用 QOptionGroup，当您有多组开关时，它可以简化使用，如下面的示例所示。

<template>
  <div class="q-pa-md">
    <q-option-group
      :options="options"
      type="toggle"
      v-model="group"
    />
  </div>
</template>
Battery too low
Friend request
Picture uploaded

搭配 QItem

<template>
  <div class="q-pa-md">
    <q-list>
      <q-item tag="label" v-ripple>
        <q-item-section>
          <q-item-label>Battery too low</q-item-label>
        </q-item-section>
        <q-item-section avatar>
          <q-toggle color="blue" v-model="notifications" val="battery" />
        </q-item-section>
      </q-item>

      <q-item tag="label" v-ripple>
        <q-item-section>
          <q-item-label>Friend request</q-item-label>
          <q-item-label caption>Allow notification</q-item-label>
        </q-item-section>
        <q-item-section avatar>
          <q-toggle color="green" v-model="notifications" val="friend" />
        </q-item-section>
      </q-item>

      <q-item tag="label" v-ripple>
        <q-item-section>
          <q-item-label>Picture uploaded</q-item-label>
          <q-item-label caption>Allow notification when uploading images</q-item-label>
        </q-item-section>
        <q-item-section avatar>
          <q-toggle color="red" v-model="notifications" val="picture" />
        </q-item-section>
      </q-item>
    </q-list>
  </div>
</template>

原生表单提交

当处理一个带有 action 和 method 的原生表单时（如：使用 Quasar 和 ASP.NET 控制器时），您需要为 QToggle 声明 name 属性，否则表单数据中不会包含它：

<template>
  <div class="q-pa-md">
    <q-form @submit="onSubmit" class="q-gutter-md">
      <div class="bg-grey-2 q-pa-sm rounded-borders">
        <q-toggle
          name="music_active"
          v-model="activateMusic"
          label="Activate music"
        />

        <q-toggle
          name="light_active"
          v-model="activateLights"
          label="Activate lights"
          true-value="YES"
        />
      </div>

      <div class="bg-grey-2 q-pa-sm rounded-borders">
        <q-toggle
          name="music_genre"
          v-model="genreRock"
          true-value="rock"
          label="Rock"
        />

        <q-toggle
          name="music_genre"
          v-model="genreFunk"
          true-value="funk"
          label="Funk"
        />

        <q-toggle
          name="music_genre"
          v-model="genrePop"
          true-value="pop"
          label="Pop"
        />
      </div>

      <div>
        <q-btn label="Submit" type="submit" color="primary"/>
      </div>
    </q-form>

    <q-card v-if="submitEmpty" flat bordered class="q-mt-md bg-grey-2">
      <q-card-section>
        Submitted form contains empty formData.
      </q-card-section>
    </q-card>
    <q-card v-else-if="submitResult.length > 0" flat bordered class="q-mt-md bg-grey-2">
      <q-card-section>Submitted form contains the following formData (key = value):</q-card-section>
      <q-separator />
      <q-card-section class="row q-gutter-sm items-center">
        <div
          v-for="(item, index) in submitResult"
          :key="index"
          class="q-px-sm q-py-xs bg-grey-8 text-white rounded-borders text-center text-no-wrap"
        >{{ item.name }} = {{ item.value }}</div>
      </q-card-section>
    </q-card>
  </div>
</template>
Activate music
Activate lights
Rock
Funk
Pop
查看更多？
Form Components 表单组件
Checkbox 复选框
Form Components 表单组件
Button Toggle 按钮开关
发现了一处错误？帮助改进提交问题
Privacy Policy | Quasar Artwork
版权声明 本中文文档内容版权为站长个人所有，保留所有权利。
免责声明 本站点所包含的任何跳转链接均为第三方广告内容，站点对这些广告内容的准确性、合法性、真实性不承担任何责任。用户点击跳转链接进入第三方网站后，应自行判断广告内容的真实性和合法性，并自行承担因使用广告内容而产生的风险和责任。任何因使用第三方广告内容而导致的损失或损害，本站点概不负责。