API 浏览器
选项组

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.

Loading QOptionGroup API...

用法(Usage)

¥Usage

标准式(Standard)

¥Standard

Standard



使用 QCheckbox 或 QToggle(With QCheckbox or QToggle)

¥With QCheckbox or QToggle

With checkboxes



警告

复选框/切换按钮的模型必须是数组。

¥The model for checkboxes/toggles must be an array.

With toggles



使用标签槽
v2.2+
(Using label slots
v2.2+
)

¥Using label slots

v2.2+

插槽有两种类型。一个通用函数 (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.

Label slots



带左侧标签(With labels on left side)

¥With labels on left side

With option labels on the left side



内联(Inline)

¥Inline

Inline



密集(Dense)

¥Dense

Dense and inline



禁用(Disable)

¥Disable

Disabled



提示

options 数组中的对象可以保存 QToggle、QCheckbox 或 QRadio 中的任何属性,例如 disableleftLabel。请参阅下面的示例。

¥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

Disable Certain Options



自定义标签、值和禁用属性
v2.17+
(Custom Label, Value and Disable props
v2.17+
)

¥Custom Label, Value and Disable props

v2.17+

默认情况下,QOptionGroup 从选项数组对象中查看每个选项的 labelvaluedisable 属性。但是你可以覆盖这些:

¥By default, QOptionGroup looks at label, value, disable props of each option from the options array Objects. But you can override those:

Custom Label, Value and Disable props



强制暗黑模式(Force dark mode)

¥Force dark mode

Force dark mode



原生表单提交(Native form submit)

¥Native form submit

处理具有 actionmethod 的原生表单时(例如,将 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):

Native form