ion-radio
单选按钮应在 单选按钮组 内使用。按下单选按钮将选中它并取消选中先前选中的单选按钮（如果有）。它们也可以通过将父单选按钮组的 value 属性设置为单选按钮的值来以编程方式选中。
当单选按钮在单选按钮组内时，一次只允许选中一个单选按钮。如果应选择多个项目，则应使用 复选框。可以在组内禁用单选按钮以防止与它们进行交互。
基本用法
标签位置
开发人员可以使用 labelPlacement 属性来控制标签相对于控件的位置。此属性反映了 flexbox flex-direction 属性。
对象值引用
默认情况下，单选按钮组使用严格相等 (===) 来确定是否选中了选项。可以通过向 compareWith 属性提供属性名称或函数来覆盖此行为。
控制台从上面的示例中记录时，控制台消息将显示在此处。对齐方式
开发人员可以使用 alignment 属性来控制标签和控件在横轴上的对齐方式。此属性反映了 flexbox align-items 属性。
可以使用 alignment 属性对齐堆叠的单选按钮。当标签和控件需要水平居中时，这将很有用。
对齐
开发人员可以使用 justify 属性来控制标签和控件在一行上的排列方式。此属性反映了 flexbox justify-content 属性。
ion-item 仅用于演示以强调 justify 的工作原理。justify 正确运行不需要它。
取消选中单选按钮
默认情况下，一旦选中了单选按钮，就无法取消选中；再次按下它将保持选中状态。可以使用父单选按钮组的 allowEmptySelection 属性来修改此行为，从而允许取消选中单选按钮。
主题
颜色
CSS 自定义属性
CSS 阴影部分
从旧版单选按钮语法迁移
Ionic 在 Ionic 7.0 中引入了一种更简单的单选按钮语法。这种新语法减少了设置单选按钮所需的样板代码，解决了可访问性问题，并改善了开发人员体验。
开发人员可以一次迁移一个单选按钮。虽然开发人员可以继续使用旧版语法，但我们建议尽快迁移。
使用现代语法
使用现代语法包括删除 ion-label 并直接将标签传递到 ion-radio 内。可以使用 ion-radio 上的 labelPlacement 属性来配置标签的位置。可以使用 ion-radio 上的 justify 属性来控制标签和控件在一行上的排列方式。
- JavaScript
- Angular
- React
- Vue
<!-- Basic -->
<!-- Before -->
<ion-item>
<ion-label>Radio Label</ion-label>
<ion-radio></ion-radio>
</ion-item>
<!-- After -->
<ion-item>
<ion-radio>Radio Label</ion-radio>
</ion-item>
<!-- Fixed Labels -->
<!-- Before -->
<ion-item>
<ion-label position="fixed">Radio Label</ion-label>
<ion-radio></ion-radio>
</ion-item>
<!-- After -->
<ion-item>
<ion-radio label-placement="fixed">Radio Label</ion-radio>
</ion-item>
<!-- Radio at the start of line, Label at the end of line -->
<!-- Before -->
<ion-item>
<ion-label slot="end">Radio Label</ion-label>
<ion-radio></ion-radio>
</ion-item>
<!-- After -->
<ion-item>
<ion-radio label-placement="end">Radio Label</ion-radio>
</ion-item>
<!-- Basic -->
<!-- Before -->
<ion-item>
<ion-label>Radio Label</ion-label>
<ion-radio></ion-radio>
</ion-item>
<!-- After -->
<ion-item>
<ion-radio>Radio Label</ion-radio>
</ion-item>
<!-- Fixed Labels -->
<!-- Before -->
<ion-item>
<ion-label position="fixed">Radio Label</ion-label>
<ion-radio></ion-radio>
</ion-item>
<!-- After -->
<ion-item>
<ion-radio labelPlacement="fixed">Radio Label</ion-radio>
</ion-item>
<!-- Radio at the start of line, Label at the end of line -->
<!-- Before -->
<ion-item>
<ion-label slot="end">Radio Label</ion-label>
<ion-radio></ion-radio>
</ion-item>
<!-- After -->
<ion-item>
<ion-radio labelPlacement="end">Radio Label</ion-radio>
</ion-item>
{/* Basic */}
{/* Before */}
<IonItem>
<IonLabel>Radio Label</IonLabel>
<IonRadio></IonRadio>
</IonItem>
{/* After */}
<IonItem>
<IonRadio>Radio Label</IonRadio>
</IonItem>
{/* Fixed Labels */}
{/* Before */}
<IonItem>
<IonLabel position="fixed">Radio Label</IonLabel>
<IonRadio></IonRadio>
</IonItem>
{/* After */}
<IonItem>
<IonRadio labelPlacement="fixed">Radio Label</IonRadio>
</IonItem>
{/* Radio at the start of line, Label at the end of line */}
{/* Before */}
<IonItem>
<IonLabel slot="end">Radio Label</IonLabel>
<IonRadio></IonRadio>
</IonItem>
{/* After */}
<IonItem>
<IonRadio labelPlacement="end">Radio Label</IonRadio>
</IonItem>
<!-- Basic -->
<!-- Before -->
<ion-item>
<ion-label>Radio Label</ion-label>
<ion-radio></ion-radio>
</ion-item>
<!-- After -->
<ion-item>
<ion-radio>Radio Label</ion-radio>
</ion-item>
<!-- Fixed Labels -->
<!-- Before -->
<ion-item>
<ion-label position="fixed">Radio Label</ion-label>
<ion-radio></ion-radio>
</ion-item>
<!-- After -->
<ion-item>
<ion-radio label-placement="fixed">Radio Label</ion-radio>
</ion-item>
<!-- Radio at the start of line, Label at the end of line -->
<!-- Before -->
<ion-item>
<ion-label slot="end">Radio Label</ion-label>
<ion-radio></ion-radio>
</ion-item>
<!-- After -->
<ion-item>
<ion-radio label-placement="end">Radio Label</ion-radio>
</ion-item>
在 Ionic 的早期版本中，ion-item 是 ion-radio 正确运行所必需的。从 Ionic 7.0 开始，ion-radio 仅在将项目放置在 ion-list 中时才应在 ion-item 中使用。此外，ion-radio 正确运行不再需要 ion-item。
使用旧版语法
Ionic 使用启发式方法来检测应用程序是否使用的是现代单选按钮语法。在某些情况下，可能更喜欢继续使用旧版语法。开发人员可以在 ion-radio 上将 legacy 属性设置为 true 以强制该单选按钮实例使用旧版语法。
属性
alignment
| 描述 | 如何控制单选按钮和标签在横轴上的对齐方式。"start"：标签和控件将出现在 LTR 横轴的左侧，在 RTL 中出现在右侧。"center"：标签和控件将出现在 LTR 和 RTL 横轴的中心。设置此属性将更改单选按钮 display 为 block。 |
| 属性 | alignment |
| 类型 | "center" ｜ "start" ｜ undefined |
| 默认 | undefined |
color
| 描述 | 要从应用程序的颜色调色板中使用的颜色。默认选项为："primary"、"secondary"、"tertiary"、"success"、"warning"、"danger"、"light"、"medium" 和 "dark"。有关颜色的更多信息，请参阅 主题。 |
| 属性 | color |
| 类型 | "danger" ｜ "dark" ｜ "light" ｜ "medium" ｜ "primary" ｜ "secondary" ｜ "success" ｜ "tertiary" ｜ "warning" ｜ string ｜ undefined |
| 默认 | undefined |
disabled
| 描述 | 如果为 true，用户将无法与单选按钮进行交互。 |
| 属性 | disabled |
| 类型 | boolean |
| 默认 | false |
justify
| 描述 | 如何在行内排列标签和单选按钮。"start"：标签和单选按钮将出现在 LTR 的左侧，在 RTL 中出现在右侧。"end"：标签和单选按钮将出现在 LTR 的右侧，在 RTL 中出现在左侧。"space-between"：标签和单选按钮将出现在线的两端，两元素之间留有空间。设置此属性将更改单选按钮 display 为 block。 |
| 属性 | justify |
| 类型 | "end" ｜ "space-between" ｜ "start" ｜ undefined |
| 默认 | undefined |
labelPlacement
| 描述 | 标签相对于单选按钮的放置位置。"start": 标签将出现在单选按钮左侧（LTR）或右侧（RTL）。"end": 标签将出现在单选按钮右侧（LTR）或左侧（RTL）。"fixed": 标签的行为与 "start" 相同，但它还具有固定宽度。长文本将被省略号（"..."）截断。"stacked": 无论方向如何，标签都将出现在单选按钮上方。标签的对齐方式可以通过 alignment 属性控制。 |
| 属性 | label-placement |
| 类型 | "end" ｜ "fixed" ｜ "stacked" ｜ "start" |
| 默认 | 'start' |
mode
| 描述 | 模式决定使用哪个平台样式。 |
| 属性 | mode |
| 类型 | "ios" ｜ "md" |
| 默认 | undefined |
name
| 描述 | 控件的名称，它与表单数据一起提交。 |
| 属性 | name |
| 类型 | string |
| 默认 | this.inputId |
value
| 描述 | 单选按钮的值。 |
| 属性 | value |
| 类型 | any |
| 默认 | undefined |
事件
| 名称 | 描述 | 冒泡 |
|---|---|---|
ionBlur | 单选按钮失去焦点时发出。 | true |
ionFocus | 单选按钮获得焦点时发出。 | true |
方法
此组件没有公开方法。
CSS 阴影部分
| 名称 | 描述 |
|---|---|
container | 单选按钮标记的容器。 |
label | 描述单选按钮的标签文本。 |
mark | 用于指示选中状态的复选标记或点。 |
CSS 自定义属性
- iOS
- MD
| 名称 | 描述 |
|---|---|
--border-radius | 单选按钮的边框半径 |
--color | 单选按钮的颜色 |
--color-checked | 选中单选按钮的颜色 |
--inner-border-radius | 选中单选按钮内部的边框半径 |
| 名称 | 描述 |
|---|---|
--border-radius | 单选按钮的边框半径 |
--color | 单选按钮的颜色 |
--color-checked | 选中单选按钮的颜色 |
--inner-border-radius | 选中单选按钮内部的边框半径 |
插槽
| 名称 | 描述 |
|---|---|
| `` | 与单选按钮关联的标签文本。使用 "labelPlacement" 属性控制标签相对于单选按钮的放置位置。 |