单选按钮组件

shadow

单选按钮应放置在 radio group（单选组） 内部使用。点击一个单选按钮会选中它，并取消选中之前被选中的那个（如果存在）。也可以通过编程方式，将父级单选组的值属性设置为该单选按钮的值来选中它。

当单选按钮处于单选组内部时，任何时刻都只能有一个被选中。如果需要选中多个选项，则应使用 复选框。组内的单选按钮可以设置为禁用状态以防止交互。

基本用法

标签位置

开发者可以使用 labelPlacement 属性来控制标签相对于控件的放置位置。此属性与 flexbox 的 flex-direction 属性功能对应。

标签换行

无论标签位置如何，默认情况下长文本不会自动换行。如果单选按钮的宽度受到限制，溢出的文本将被截断并显示省略号。你可以通过在单选按钮文本的包装元素上添加 ion-text-wrap 类，或者使用 ::part() 选择器为 label 阴影部件添加样式来启用文本换行。

对象值引用

默认情况下，单选组使用严格相等 (===) 来判断一个选项是否被选中。可以通过为 compareWith 属性提供属性名或函数来覆盖此行为。

Console

Console messages will appear here when logged from the example above.

对齐方式

开发者可以使用 alignment 属性来控制标签和控件在交叉轴上的对齐方式。此属性与 flexbox 的 align-items 属性功能对应。

备注

堆叠的单选按钮可以使用 alignment 属性进行对齐。当标签和控件需要水平居中对齐时，这很有用。

主轴对齐

开发者可以使用 justify 属性来控制标签和控件在主轴上的排列方式。此属性与 flexbox 的 justify-content 属性功能对应。

备注

ion-item 仅在演示中用于强调 justify 的工作原理。justify 的正常工作并不需要它。

取消选中单选按钮

默认情况下，一旦单选按钮被选中就无法取消选择；再次点击它仍会保持选中状态。可以通过在父级单选组上使用 allowEmptySelection 属性来修改此行为，该属性允许单选按钮被取消选中。

辅助与错误文本

可以在单选组内部使用 helperText 和 errorText 属性来显示辅助文本和错误文本。除非将 ion-invalid 和 ion-touched 类添加到 ion-radio-group，否则错误文本不会显示。这确保了在用户有机会输入数据之前不会显示错误。

在 Angular 中，这通过表单验证自动完成。在 JavaScript、React 和 Vue 中，需要根据你自己的验证逻辑手动添加这些类。

主题定制

颜色

CSS 自定义属性

CSS 阴影部件

属性

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

事件

Name	Description	Bubbles
ionBlur	Emitted when the radio button loses focus.	true
ionFocus	Emitted when the radio button has focus.	true

方法

No public methods available for this component.

CSS 阴影部件

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 自定义属性

iOS

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

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
``	The label text to associate with the radio. Use the "labelPlacement" property to control where the label is placed relative to the radio.