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):