切换

QToggle组件是用户输入的另一个基本元素。 您可以使用它来打开和关闭设置、功能或正确/错误输入。

TIP

另请参阅QOptionGroup,以了解创建切换开关组合的其他可能性。

安装

/*
 * No installation step is necessary.
 * It gets installed by default by @quasar/app v2+.
 */

用法

基础

使用color属性控制切换开关的颜色。

Basic

带标签

With labels

保持色彩

Keep color

带图标

Icons

自定义模型值

可以使用自定义值代替默认的true/false值。

Custom model values

不确定状态

在下面的示例中,只要您单击第一个QToggle,它就开始在true/false之间切换。另一方面,第二个QToggle在toggle-indeterminate的帮助下在三种状态(不确定/正确/错误)之间切换。您可以选择设置属性indeterminate-value,否则不确定值将被视为null

Indeterminate state

切换顺序

默认情况下,QToggle在切换时遵循以下链:不确定 -> 选中的 -> 未选中的。但是,您可以通过toggle-order属性更改此行为。此属性确定状态的顺序,可以是tf(默认值)或ftt表示true/checked的状态,而f表示false/unchecked的状态)。

切换顺序是:

  • 如果toggle-indeterminate为true,则:不确定->第一状态->第二状态->不确定(并重复)
  • 否则(无切换不确定):不确定->第一状态->第二状态->第一状态->第二状态->。。。
Toggle order

数组模型

如果您有多个切换开关可以选择,可以使用数组作为所有切换开关的模型,并在每个切换开关上指定val属性。 如果勾选了切换开关,则将其val插入数组,反之亦然。

Array model

暗色和禁用

On a dark background
Disabled state

尺寸

除了下面的标准尺寸之外,您还可以通过size属性定义自己的尺寸(最后一个是自定义尺寸)。

Standard sizes

使用QOptionGroup

TIP

您还可以使用QOptionGroup,当您有切换开关组合时,它可以简化用法,如下例所示。

Usage with QOptionGroup

使用QItem

With QItem

本地表单提交

当处理具有actionmethod的原生形式时(例如,使用Quasar和ASP.NET控制器),则需要在QToggle上指定name属性,否则formData将不包含它(如果应该的话)- 所有值都转换为字符串(本地行为,因此不要使用对象值):

Native form

QToggle API

Loading API...
Please wait...