API 浏览器
复选框

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

¥The QCheckbox component is another basic element for user input. You can use this to supply a way for the user to toggle an option.

提示

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

¥Please also refer to the QOptionGroup on other possibilities for creating groups of Checkboxes.

Loading QCheckbox API...

用法(Usage)

¥Usage

标准式(Standard)

¥Standard

Standard



使用自定义图标
v2.5+
(With custom icons
v2.5+
)

¥With custom icons

v2.5+

With icons



标签(Label)

¥Label

Label



着色(Coloring)

¥Coloring

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

¥In the second row in the example below, the property keep-color is being used to retain the passed in color when the checkbox is not in a toggled state.

Coloring



密集(Dense)

¥Dense

Dense



强制暗黑模式(Force dark mode)

¥Force dark mode

Force dark mode



尺寸(Sizes)

¥Sizes

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

¥Apart from the standard sizes below, you can define your own through the size property (last one is a custom size).

Standard sizes



不确定状态(Indeterminate state)

¥Indeterminate state

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

¥In the example below, as soon as you click on the first checkbox it starts toggling between true/false. The second checkbox, on the other hand toggles between the three states (indeterminate/true/false) with help from toggle-indeterminate. You can optionally set the property indeterminate-value, otherwise the indeterminate value will be considered null.

Indeterminate state



切换顺序(Toggle order)

¥Toggle order

默认情况下,QCheckbox 在切换时遵循以下链:indeterminate -> checked -> unchecked。但是,你可以通过 toggle-order 属性更改此行为。此属性决定状态的顺序,可以是 tf(默认)或 ftt 代表 true/checked 状态,f 代表 false/unchecked 状态)。

¥By default, QCheckbox follows this chain when toggling: indeterminate -> checked -> unchecked. However, you can change this behavior through the toggle-order prop. This property determines the order of the states and can be tf (default) or ft (t stands for state of true/checked while f for state of false/unchecked).

切换顺序为:

¥Toggling order is:

  • 如果 toggle-indeterminate 为真,则:indet -> 第一个状态 -> 第二个状态 -> indet(并重复)

    ¥if toggle-indeterminate is true, then: indet -> first state -> second state -> indet (and repeat)

  • 否则(无 toggle-indeterminate):indet -> 第一个状态 -> 第二个状态 -> 第一个状态 -> 第二个状态 -> …

    ¥otherwise (no toggle-indeterminate): indet -> first state -> second state -> first state -> second state -> …

Toggle order



数组模型(Array model)

¥Array model

Array as model



自定义模型值(Custom model values)

¥Custom model values

Custom model values



使用 QOptionGroup(With QOptionGroup)

¥With QOptionGroup

提示

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

¥You can also use QOptionGroup, which simplifies the usage when you have groups of checkboxes, like in example below.

Usage with QOptionGroup



使用 QItem(With QItem)

¥With QItem

在下面的示例中,我们渲染了一个 <label> 标签(注意 tag="label"),以便 QCheckbox 能够响应 QItem 上的点击来更改切换状态。

¥In the example below, we are rendering a <label> tag (notice tag="label") so the QCheckbox will respond to clicks on QItems to change toggle state.

With QItem



禁用(Disable)

¥Disable

Disable



原生表单提交(Native form submit)

¥Native form submit

处理具有 actionmethod 的原生表单时(例如,将 Quasar 与 ASP.NET 控制器结合使用时),你需要在 QCheckbox 上指定 name 属性,否则 formData 将不会包含该属性(如果应该包含的话)。 - 所有值都将转换为字符串(原生行为,因此请勿使用对象值):

¥When dealing with a native form which has an action and a method (eg. when using Quasar with ASP.NET controllers), you need to specify the name property on QCheckbox, otherwise formData will not contain it (if it should) - all value are converted to string (native behaviour, so do not use Object values):

Native form