QRadio 组件是另一个用于用户输入的基本元素。你可以使用它们为用户提供一种从多个选项中选择一个选项的方式。
¥The QRadio component is another basic element for user input. You can use this to supply a way for the user to pick an option from multiple choices.
提示
另请参阅 QOptionGroup,了解创建单选按钮组的其他可能性。
¥Please also refer to the QOptionGroup on other possibilities for creating groups of Radios.
用法(Usage)
¥Usage
标准式(Standard)
¥Standard
使用自定义图标 v2.5+(With custom icons v2.5+)
¥With custom icons
密集(Dense)
¥Dense
着色(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 radio button is not in a toggled state.
强制暗黑模式(Force dark mode)
¥Force dark mode
禁用(Disable)
¥Disable
标签左侧(Label on left-side)
¥Label on left-side
尺寸(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
提示
你还可以使用 QOptionGroup,当你有一组单选按钮时,它可以简化使用,如下例所示。
¥You can also use QOptionGroup, which simplifies the usage when you have groups of radios, like in example below.
使用 QItem(With QItem)
¥With QItem
在下面的示例中,我们渲染了一个 <label>
标签(注意 tag="label"
),以便 QRadio 能够响应 QItem 上的点击来更改切换状态。
¥In the example below, we are rendering a <label>
tag (notice tag="label"
) so the QRadio will respond to clicks on QItems to change toggle state.
原生表单提交(Native form submit)
¥Native form submit
当处理具有 action
和 method
的原生表单时(例如,将 Quasar 与 ASP.NET 控制器结合使用时),你需要在 QRadio 上指定 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 QRadio, otherwise formData will not contain it (if it should) - all value are converted to string (native behaviour, so do not use Object values):