QToggle 组件是另一个用于用户输入的基本元素。你可以使用它们来打开或关闭设置、功能或真/假输入。

¥The QToggle component is another basic element for user input. You can use this for turning settings, features or true/false inputs on and off.

用法(Usage)

¥Usage

基本(Basic)

¥Basic

使用 color 属性控制切换按钮的颜色。

¥Use the color prop to control the toggle’s color.

带标签(With labels)

¥With labels

保持颜色(Keeping color)

¥Keeping color

带图标(With icons)

¥With icons

自定义模型值(Custom model values)

¥Custom model values

你可以使用自定义值，而不是默认的 true/false 值。

¥Instead of the default true / false values, you can use custom ones.

不确定状态(Indeterminate state)

¥Indeterminate state

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

¥In the example below, as soon as you click on the first QToggle it starts toggling between true/false. The second QToggle, 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.

切换顺序(Toggle order)

¥Toggle order

默认情况下，QToggle 在切换时遵循以下流程：indeterminate -> checked -> unchecked。但是，你可以通过 toggle-order 属性更改此行为。此属性决定状态的顺序，可以是 tf（默认）或 ft（t 代表 true/checked 状态，f 代表 false/unchecked 状态）。

¥By default, QToggle 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 -> …

数组模型(Array model)

¥Array model

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

¥If you have a number of toggles for a selection, use can use an Array as the model for all of them and specify val prop on each toggle. If the toggle is ticked, its val will be inserted into the array and vice versa.

暗黑设计(Dark design)

¥Dark design

禁用(Disable)

¥Disable

尺寸(Sizes)

¥Sizes

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

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

使用 QOptionGroup(With QOptionGroup)

¥With QOptionGroup

使用 QItem(With QItem)

¥With QItem

原生表单提交(Native form submit)

¥Native form submit

处理具有 action 和 method 的原生表单时（例如，将 Quasar 与 ASP.NET 控制器结合使用时），你需要在 QToggle 上指定 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 QToggle, otherwise formData will not contain it (if it should) - all value are converted to string (native behaviour, so do not use Object values):