ion-radio
ラジオは、ラジオグループの中で使用する必要があります。ラジオを押すと、そのラジオがチェックされ、前に選択されていたラジオがある場合は、そのチェックが解除されます。また、親ラジオグループのvalueプロパティをラジオの値に設定することで、プログラム的にチェックすることもできます。
ラジオがラジオグループの中にある場合、いつでもチェックされるのは1つのラジオだけです。複数の項目を選択する場合は、checkboxesを代わりに使用する必要があります。ラジオをグループ内で無効にすると、ラジオとの相互作用を防ぐことができます。
基本的な使い方
- src/app/example.component.html
- src/app/example.component.ts
<ion-radio-group value="strawberries">
<ion-radio value="grapes">Grapes</ion-radio><br />
<ion-radio value="strawberries">Strawberries</ion-radio><br />
<ion-radio value="pineapple">Pineapple</ion-radio><br />
<ion-radio value="cherries">Cherries</ion-radio>
</ion-radio-group>
Label Placement
開発者は labelPlacement
プロパティを使用して、ラベルをコントロールに対してどのように配置するかを制御できます。 このプロパティはフレックスボックスの flex-direction
プロパティを反映しています。
- src/app/example.component.html
- src/app/example.component.ts
<ion-radio-group value="start">
<ion-radio value="start" labelPlacement="start">Label at the Start</ion-radio>
</ion-radio-group>
<br />
<ion-radio-group value="end">
<ion-radio value="end" labelPlacement="end">Label at the End</ion-radio>
</ion-radio-group>
<br />
<ion-radio-group value="fixed">
<ion-radio value="fixed" labelPlacement="fixed">Fixed Width Label</ion-radio>
</ion-radio-group>
<br />
<ion-radio-group value="stacked">
<ion-radio value="stacked" labelPlacement="stacked">Stacked Label</ion-radio>
</ion-radio-group>
Object Value References
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.
Console
Console messages will appear here when logged from the example above.
- src/app/example.component.html
- src/app/example.component.ts
<ion-list>
<ion-radio-group [compareWith]="compareWith" (ionChange)="handleChange($event)">
@for (food of foods; track food.id) {
<ion-item>
<ion-radio [value]="food">{{ food.name }}</ion-radio>
</ion-item>
}
</ion-radio-group>
</ion-list>
Alignment
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.
Stacked radios can be aligned using the alignment
property. This can be useful when the label and control need to be centered horizontally.
- src/app/example.component.html
- src/app/example.component.ts
<ion-list>
<ion-radio-group value="start">
<ion-item>
<ion-radio value="start" labelPlacement="stacked" alignment="start">Aligned to the Start</ion-radio>
</ion-item>
</ion-radio-group>
<ion-radio-group value="center">
<ion-item>
<ion-radio value="center" labelPlacement="stacked" alignment="center">Aligned to the Center</ion-radio>
</ion-item>
</ion-radio-group>
</ion-list>
Justification
開発者は justify
プロパティを使用して、ラベルとコントロールの行の詰め方を制御することができます。このプロパティはフレックスボックスの justify-content
プロパティを反映しています。
- src/app/example.component.html
- src/app/example.component.ts
<ion-list>
<ion-radio-group value="start">
<ion-item>
<ion-radio value="start" justify="start">Packed at the Start of Line</ion-radio>
</ion-item>
</ion-radio-group>
<ion-radio-group value="end">
<ion-item>
<ion-radio value="end" justify="end">Packed at the End of Line</ion-radio>
</ion-item>
</ion-radio-group>
<ion-radio-group value="space-between">
<ion-item>
<ion-radio value="space-between" justify="space-between">Space Between Label and Control</ion-radio>
</ion-item>
</ion-radio-group>
</ion-list>
ion-item
は、justify
がどのように機能するかを強調するためにデモで使用されているだけです。 justify
が正しく機能するために必須ではありません。
ラジオの選択を解除する
デフォルトでは、一度選択されたラジオは選択を解除することができず、もう一度押すと選択されたままになります。この動作は、親ラジオグループの allowEmptySelection
プロパティを使用することで変更することができ、ラジオを非選択にすることができます。
- src/app/example.component.html
- src/app/example.component.ts
<ion-radio-group [allowEmptySelection]="true" value="turtles">
<ion-radio value="dogs">Dogs</ion-radio><br />
<ion-radio value="cats">Cats</ion-radio><br />
<ion-radio value="turtles">Turtles</ion-radio><br />
<ion-radio value="fish">Fish</ion-radio><br />
</ion-radio-group>
テーマ
Colors
- src/app/example.component.html
- src/app/example.component.ts
<ion-radio-group value="primary">
<ion-radio aria-label="Primary" color="primary" value="primary"></ion-radio>
</ion-radio-group>
<ion-radio-group value="secondary">
<ion-radio aria-label="Secondary" color="secondary" value="secondary"></ion-radio>
</ion-radio-group>
<ion-radio-group value="tertiary">
<ion-radio aria-label="Tertiary" color="tertiary" value="tertiary"></ion-radio>
</ion-radio-group>
<ion-radio-group value="success">
<ion-radio aria-label="Success" color="success" value="success"></ion-radio>
</ion-radio-group>
<ion-radio-group value="warning">
<ion-radio aria-label="Warning" color="warning" value="warning"></ion-radio>
</ion-radio-group>
<ion-radio-group value="danger">
<ion-radio aria-label="Danger" color="danger" value="danger"></ion-radio>
</ion-radio-group>
<ion-radio-group value="light">
<ion-radio aria-label="Light" color="light" value="light"></ion-radio>
</ion-radio-group>
<ion-radio-group value="medium">
<ion-radio aria-label="Medium" color="medium" value="medium"></ion-radio>
</ion-radio-group>
<ion-radio-group value="dark">
<ion-radio aria-label="Dark" color="dark" value="dark"></ion-radio>
</ion-radio-group>
CSSカスタムプロパティ
- src/app/example.component.html
- src/app/example.component.css
- src/app/example.component.ts
<ion-radio-group value="custom-checked">
<ion-radio value="custom" aria-label="Custom checkbox"></ion-radio>
<ion-radio value="custom-checked" aria-label="Custom checkbox that is checked"></ion-radio>
</ion-radio-group>
CSS Shadow Parts
- src/app/example.component.html
- src/app/example.component.css
- src/app/example.component.ts
<ion-radio-group value="custom-checked">
<ion-radio value="custom" aria-label="Custom checkbox"></ion-radio>
<ion-radio value="custom-checked" aria-label="Custom checkbox that is checked"></ion-radio>
</ion-radio-group>
Legacy Radio Syntaxからの移行
Ionic 7.0では、よりシンプルなラジオ構文が導入されました。この新しい構文は、ラジオを設定するために必要な定型文を減らし、アクセシビリティの問題を解決し、開発者のエクスペリエンスを向上させます。
開発者は、この移行を一度に1つのラジオで実行できます。開発者はレガシー構文を使い続けることができますが、できるだけ早く移行することをお勧めします。
最新の構文の使い方
最新の構文を使用するには、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-radio
が正しく機能するためには ion-item
が必要でした。Ionic 7.0 からは、ion-radio
は ion-item
の中で、そのアイテムが ion-list
に配置される場合にのみ使用されます。また、ion-radio
が正しく機能するためには、ion-item
はもはや必須ではありません。
レガシー構文の使用
Ionicは、アプリが最新の無線構文を使用しているかどうかをヒューリスティックで検出します。場合によっては、レガシー構文を使い続けることが望ましい場合もあります。開発者は ion-radio
の legacy
プロパティを true
に設定することで、その無線機のインスタンスがレガシー構文を使用するように強制できます。
プロパティ
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. |
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 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カスタムプロパティ
- 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. |