ion-radio

shadow

Radio 应在单选按钮组内部使用。按下某个单选按钮将选中它，并取消选中之前选中的单选按钮（如果有）。也可以通过将父级单选按钮组的 value 属性设置为该单选按钮的 value 值，以编程方式选中它。

当单选按钮位于单选按钮组中时，任何时候只有一个单选按钮会被选中。如果应选择多个项目，则应使用复选框。单选按钮可以在组中禁用，以防止与其交互。

基本用法

标签位置

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

标签换行

无论标签位置如何，长文本默认不会换行。如果单选按钮的宽度受限，溢出的文本将被截断并显示省略号。您可以通过在单选按钮文本的包装器上添加 ion-text-wrap 类，或使用 ::part() 选择器设置 label shadow part 的样式来启用文本换行。

对象值引用

默认情况下，单选按钮组使用严格相等（===）来确定某个选项是否被选中。这可以通过向 compareWith 属性提供属性名或函数来覆盖。

控制台

控制台消息将在上方示例中调用 console.log 时显示在此处。

对齐

开发者可以使用 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 Shadow Parts

属性

alignment

说明	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.
属性	alignment
类型	"center" ｜ "start" ｜ undefined
默认值	undefined

color

说明	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.
属性	color
类型	"danger" ｜ "dark" ｜ "light" ｜ "medium" ｜ "primary" ｜ "secondary" ｜ "success" ｜ "tertiary" ｜ "warning" ｜ string ｜ undefined
默认值	undefined

disabled

说明	If true, the user cannot interact with the radio.
属性	disabled
类型	boolean
默认值	false

justify

说明	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.
属性	justify
类型	"end" ｜ "space-between" ｜ "start" ｜ undefined
默认值	undefined

labelPlacement

说明	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.
属性	label-placement
类型	"end" ｜ "fixed" ｜ "stacked" ｜ "start"
默认值	'start'

mode

说明	The mode determines which platform styles to use. 这是一个虚拟属性，在初始化时设置一次，之后更改其值不会更新组件。
属性	mode
类型	"ios" ｜ "md"
默认值	undefined

name

说明	The name of the control, which is submitted with the form data.
属性	name
类型	string
默认值	this.inputId

value

说明	the value of the radio.
属性	value
类型	any
默认值	undefined

事件

Name	说明	冒泡
ionBlur	Emitted when the radio button loses focus.	true
ionFocus	Emitted when the radio button has focus.	true

方法

该组件没有可用的公共方法。

CSS Shadow Parts

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