复选框

QCheckbox组件是用户输入的另一个基本元素。 您可以使用它为用户提供一种切换选项的方法。

TIP

另请参阅QOptionGroup,以了解创建复选框组的其他可能性。

安装

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

用法

标准

Standard

标签

Label

着色

在下面示例的第二行中,当复选按钮未处于切换状态时,将使用属性keep-color来保留传入的颜色。

Coloring

稠密和暗色

Dense
On a dark background

尺寸

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

Standard sizes

不确定状态

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

Indeterminate state

切换顺序

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

切换顺序为:

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

数组模型

Array as model

自定义模型值

Custom model values

使用QOptionGroup

TIP

您还可以使用QOptionGroup,当您有复选框组时,它可以简化用法,如下例所示。

Usage with QOptionGroup

使用QItem

在下面的示例中,我们渲染了一个<label>标签(注意tag="label"),因此QCheckbox将响应QItems的单击以更改切换状态。

With QItem

禁用

Disable

本地表单提交

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

Native form

QCheckbox API

Loading API...
Please wait...