ion-radio
单选按钮应在 单选组 内使用。按下一个单选按钮将选中它，并取消选中之前选中的单选按钮（如果有的话）。它们也可以通过将父单选组的 value 属性设置为某个单选按钮的值来编程方式选中。
🌐 Radios should be used inside of a radio group. Pressing a radio will check it and uncheck the previously selected radio, if there is one. They can also be checked programmatically by setting the value property of the parent radio group to the value of the radio.
当单选按钮位于单选按钮组中时，任何时候只有一个单选按钮会被选中。如果需要选择多个项目，应使用复选框。单选按钮可以在组内被禁用，以防止与它们的交互。
🌐 When radios are inside of a radio group, only one radio will be checked at any time. If more than one item should be selected, checkboxes should be used instead. Radios can be disabled within a group to prevent interaction with them.
基本用法
🌐 Basic Usage
标签放置
🌐 Label Placement
开发者可以使用 labelPlacement 属性来控制标签相对于控件的放置方式。该属性对应于 flexbox 的 flex-direction 属性。
🌐 Developers can use the labelPlacement property to control how the label is placed relative to the control. This property mirrors the flexbox flex-direction property.
标签换行
🌐 Label Wrapping
无论标签放置位置如何，长文本默认不会换行。如果单选按钮的宽度受限，溢出的文本将被省略号截断。你可以通过将 ion-text-wrap 类添加到单选按钮文本的封装器上，或者使用 ::part() 选择器为 label 阴影部分设置样式来启用文本换行。
🌐 Regardless of label placement, long text will not wrap by default. If the width of the radio is constrained, overflowing text will be truncated with an ellipsis. You can enable text wrapping by adding the ion-text-wrap class to a wrapper around the radio text or styling the label shadow part using the ::part() selector.
对象值引用
🌐 Object Value References
默认情况下，单选组使用严格相等（===）来判断选项是否被选中。可以通过向 compareWith 属性提供属性名或函数来覆盖此行为。
🌐 By default, the radio group uses strict equality (===) to determine if an option is selected. This can be overridden by providing a property name or a function to the compareWith property.
ConsoleConsole messages will appear here when logged from the example above.对齐
🌐 Alignment
开发者可以使用 alignment 属性来控制标签和控件在交叉轴上的对齐方式。该属性对应于 flexbox 的 align-items 属性。
🌐 Developers can use the alignment property to control how the label and control are aligned on the cross axis. This property mirrors the flexbox align-items property.
可以使用 alignment 属性对堆叠的单选按钮进行对齐。当标签和控件需要水平居中时，这会很有用。
齐行
🌐 Justification
开发者可以使用 justify 属性来控制标签和控件在一行上的排列方式。该属性对应于 flexbox 的 justify-content 属性。
🌐 Developers can use the justify property to control how the label and control are packed on a line. This property mirrors the flexbox justify-content property.
ion-item 仅在演示中使用，以强调 justify 的工作原理。justify 正常工作并不需要它。
取消选择单选框
🌐 Deselecting Radios
默认情况下，一旦选择了单选按钮，它就不能被取消选择；再次按下它将保持选中状态。可以通过在父单选组上使用 allowEmptySelection 属性来修改此行为，该属性允许单选按钮被取消选择。
🌐 By default, once a radio is selected it cannot be deselected; pressing it again will keep it selected. This behavior can be modified by using the allowEmptySelection property on the parent radio group, which enables the radios to be deselected.
辅助程序和错误文本
🌐 Helper & Error Text
可以在单选组内使用帮助和错误文本，通过 helperText 和 errorText 属性实现。只有在将 ion-invalid 和 ion-touched 类添加到 ion-radio-group 后，错误文本才会显示。这可以确保在用户有机会输入数据之前不会显示错误。
🌐 Helper and error text can be used inside of a radio group with the helperText and errorText property. The error text will not be displayed unless the ion-invalid and ion-touched classes are added to the ion-radio-group. This ensures errors are not shown before the user has a chance to enter data.
在 Angular 中，这通过表单验证自动补齐。在 JavaScript、React 和 Vue 中，需要根据你自己的验证手动添加类。
🌐 In Angular, this is done automatically through form validation. In JavaScript, React and Vue, the class needs to be manually added based on your own validation.
主题化
🌐 Theming
颜色
🌐 Colors
CSS 自定义属性
🌐 CSS Custom Properties
CSS 阴影部分
🌐 CSS Shadow Parts
属性
🌐 Properties
alignment
| Description | How to control the alignment of the radio and label on the cross axis. "start": The label and control will appear on the left of the cross axis in LTR, and on the right side in RTL. "center": The label and control will appear at the center of the cross axis in both LTR and RTL. Setting this property will change the radio display to block. |
| Attribute | alignment |
| Type | "center" ｜ "start" ｜ undefined |
| Default | undefined |
color
| Description | The color to use from your application's color palette. Default options are: "primary", "secondary", "tertiary", "success", "warning", "danger", "light", "medium", and "dark". For more information on colors, see theming. |
| Attribute | color |
| Type | "danger" ｜ "dark" ｜ "light" ｜ "medium" ｜ "primary" ｜ "secondary" ｜ "success" ｜ "tertiary" ｜ "warning" ｜ string ｜ undefined |
| Default | undefined |
disabled
| Description | If true, the user cannot interact with the radio. |
| Attribute | disabled |
| Type | boolean |
| Default | false |
justify
| Description | How to pack the label and radio within a line. "start": The label and radio will appear on the left in LTR and on the right in RTL. "end": The label and radio will appear on the right in LTR and on the left in RTL. "space-between": The label and radio will appear on opposite ends of the line with space between the two elements. Setting this property will change the radio display to block. |
| Attribute | justify |
| Type | "end" ｜ "space-between" ｜ "start" ｜ undefined |
| Default | undefined |
labelPlacement
| Description | Where to place the label relative to the radio. "start": The label will appear to the left of the radio in LTR and to the right in RTL. "end": The label will appear to the right of the radio in LTR and to the left in RTL. "fixed": The label has the same behavior as "start" except it also has a fixed width. Long text will be truncated with ellipses ("..."). "stacked": The label will appear above the radio regardless of the direction. The alignment of the label can be controlled with the alignment property. |
| Attribute | label-placement |
| Type | "end" ｜ "fixed" ｜ "stacked" ｜ "start" |
| Default | 'start' |
mode
| Description | The mode determines which platform styles to use. This is a virtual property that is set once during initialization and will not update if you change its value after the initial render. |
| Attribute | mode |
| Type | "ios" ｜ "md" |
| Default | undefined |
name
| Description | The name of the control, which is submitted with the form data. |
| Attribute | name |
| Type | string |
| Default | this.inputId |
value
| Description | the value of the radio. |
| Attribute | value |
| Type | any |
| Default | undefined |
事件
🌐 Events
| Name | Description | Bubbles |
|---|---|---|
ionBlur | Emitted when the radio button loses focus. | true |
ionFocus | Emitted when the radio button has focus. | true |
方法
🌐 Methods
No public methods available for this component.
CSS 阴影部分
🌐 CSS Shadow Parts
| Name | Description |
|---|---|
container | The container for the radio mark. |
label | The label text describing the radio. |
mark | The checkmark or dot used to indicate the checked state. |
CSS 自定义属性
🌐 CSS Custom Properties
- iOS
- MD
| Name | Description |
|---|---|
--border-radius | Border radius of the radio |
--color | Color of the radio |
--color-checked | Color of the checked radio |
--inner-border-radius | Border radius of the inner checked radio |
| Name | Description |
|---|---|
--border-radius | Border radius of the radio |
--color | Color of the radio |
--color-checked | Color of the checked radio |
--inner-border-radius | Border radius of the inner checked radio |
插槽
🌐 Slots
| Name | Description |
|---|---|
| `` | The label text to associate with the radio. Use the "labelPlacement" property to control where the label is placed relative to the radio. |