QOptionGroup 组件是一个辅助组件,可让你更好地控制二进制(开或关、真或假、1 或 0)表单输入组件(例如复选框、单选按钮或切换按钮)的分组。一个好的用途此组件提供一组可开启和关闭的选项或设置。
¥The QOptionGroup component is a helper component that allows you better control for grouping binary (on or off, true or false, 1 or 0) form input components like checkboxes, radios or toggles. A good use for this component is for offering a set of options or settings to turn on and off.
用法(Usage)
¥Usage
标准式(Standard)
¥Standard
使用 QCheckbox 或 QToggle(With QCheckbox or QToggle)
¥With QCheckbox or QToggle
警告
复选框/切换按钮的模型必须是数组。
¥The model for checkboxes/toggles must be an array.
使用标签槽 v2.2+(Using label slots v2.2+)
¥Using label slots
插槽有两种类型。一个通用函数 (label
),适用于所有选项,除非使用更具体的基于索引的函数(label-N
,其中 N 是从 0 开始的选项索引)。两种类型的插槽都接收相应的选项作为参数。
¥There are two types of slots. A generic one (label
) which applies to all options, unless a more specific index-based one is used (label-N
where N is the 0-based index of the option). Both types of slots receive the respective option as parameter.
请注意,我们如何为第一个选项(索引 0 处的选项)使用特定的标签槽,并且我们还添加了 QTooltip。
¥Notice how we use the specific label slot for first option (option at index 0) and we also add a QTooltip.
带左侧标签(With labels on left side)
¥With labels on left side
内联(Inline)
¥Inline
密集(Dense)
¥Dense
禁用(Disable)
¥Disable
提示
options
数组中的对象可以保存 QToggle、QCheckbox 或 QRadio 中的任何属性,例如 disable
或 leftLabel
。请参阅下面的示例。
¥The objects within the options
array can hold any of the props found in QToggle, QCheckbox or QRadio for instance disable
or leftLabel
. See below for an example.
禁用某些选项(Disable Certain Options)
¥Disable Certain Options
自定义标签、值和禁用属性 v2.17+(Custom Label, Value and Disable props v2.17+)
¥Custom Label, Value and Disable props
默认情况下,QOptionGroup 从选项数组对象中查看每个选项的 label
、value
、disable
属性。但是你可以覆盖这些:
¥By default, QOptionGroup looks at label
, value
, disable
props of each option from the options array Objects. But you can override those:
强制暗黑模式(Force dark mode)
¥Force dark mode
原生表单提交(Native form submit)
¥Native form submit
处理具有 action
和 method
的原生表单时(例如,将 Quasar 与 ASP.NET 控制器),你需要在 QOptionGroup 上指定 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 QOptionGroup, otherwise formData will not contain it (if it should) - all value are converted to string (native behaviour, so do not use Object values):