QCheckbox 组件是另一个用于用户输入的基本元素。您可以使用它为用户提供一种切换选项的方式。
提示
请参考 QOptionGroup 了解创建复选框组的其他可能性。
用法
标准
带自定义图标v2.5+
标签
着色
在下面示例中的第二行中,属性 keep-color
用于在复选框未处于切换状态时保留传入的颜色。
密集
强制暗模式
尺寸
除了下面的标准尺寸外,您还可以通过 size
属性定义自己的尺寸(最后一个是自定义尺寸)。
不确定状态
在下面的示例中,一旦您单击第一个复选框,它就开始在 true/false 之间切换。另一方面,第二个复选框借助 toggle-indeterminate
在三种状态(不确定/true/false)之间切换。您可以选择设置属性 indeterminate-value
,否则不确定值将被视为 null
。
切换顺序
默认情况下,QCheckbox 在切换时遵循以下链:不确定 -> 已选中 -> 未选中。但是,您可以通过 toggle-order
属性更改此行为。此属性决定状态的顺序,可以是 tf
(默认)或 ft
(t
代表 true/选中状态,而 f
代表 false/未选中状态)。
切换顺序是
- 如果
toggle-indeterminate
为 true,则:indet -> 第一种状态 -> 第二种状态 -> indet(并重复) - 否则(没有 toggle-indeterminate):indet -> 第一种状态 -> 第二种状态 -> 第一种状态 -> 第二种状态 -> ...
数组模型
自定义模型值
带 QOptionGroup
提示
您也可以使用 QOptionGroup,它简化了当您有复选框组时的使用,如以下示例所示。
带 QItem
在下面的示例中,我们正在渲染一个 <label>
标签(注意 tag="label"
),因此 QCheckbox 将响应对 QItem 的点击以更改切换状态。
禁用
原生表单提交
当处理具有 action
和 method
的原生表单时(例如,在将 Quasar 与 ASP.NET 控制器一起使用时),您需要在 QCheckbox 上指定 name
属性,否则 formData 将不包含它(如果应该) - 所有值都转换为字符串(原生行为,因此不要使用对象值)