ion-radio
ラジオは、ラジオグループの中で使用する必要があります。ラジオを押すと、そのラジオがチェックされ、前に選択されていたラジオがある場合は、そのチェックが解除されます。また、親ラジオグループのvalueプロパティをラジオの値に設定することで、プログラム的にチェックすることもできます。
ラジオがラジオグループの中にある場合、いつでもチェックされるのは1つのラジオだけです。複数の項目を選択する場合は、checkboxesを代わりに使用する必要があります。ラジオをグループ内で無効にすると、ラジオとの相互作用を防ぐことができます。
基本的な使い方
Label Placement
開発者は labelPlacement プロパティを使用して、ラベルをコントロールに対してどのように配置するかを制御できます。 このプロパティはフレックスボックスの flex-direction プロパティを反映しています。
Label Wrapping
ラベルの配置に関係なく、長いテキストはデフォルトで折り返されません。ラジオの幅が制約されている場合、オーバーフローしたテキストは省略記号で切り詰められます。ラジオテキストの周りのラッパーにion-text-wrapクラスを追加するか、::part()セレクタを使用してlabelシャドウパーツをスタイリングすることで、テキストの折り返しを有効にできます。
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.
ConsoleConsole messages will appear here when logged from the example above.Alignment
開発者はalignmentプロパティを使用して、ラベルとコントロールがクロス軸上でどのように配置されるかを制御できます。このプロパティは、flexboxのalign-itemsプロパティを反映しています。
スタックされたラジオは、alignmentプロパティを使用して配置できます。ラベルとコントロールを水平方向に中央揃えする必要がある場合に便利です。
Justification
開発者は justify プロパティを使用して、ラベルとコントロールの行の詰め方を制御することができます。このプロパティはフレックスボックスの justify-content プロパティを反映しています。
ion-itemは、justifyがどのように機能するかを強調するためにデモで使用されているだけです。 justify が正しく機能するために必須ではありません。
ラジオの選択を解除する
デフォルトでは、一度選択されたラジオは選択を解除することができず、もう一度押すと選択されたままになります。この動作は、親ラジオグループの allowEmptySelection プロパティを使用することで変更することができ、ラジオを非選択にすることができます。
Helper & Error Text
ヘルパーテキストとエラーテキストは、helperTextとerrorTextプロパティを使用してラジオグループ内で使用できます。エラーテキストは、ion-invalidとion-touchedクラスがion-radio-groupに追加されていない限り表示されません。これにより、ユーザーがデータを入力する前にエラーが表示されることはありません。
Angularでは、これはフォームバリデーションによって自動的に行われます。JavaScript、React、Vueでは、独自のバリデーションに基づいてクラスを手動で追加する必要があります。
テーマ
Colors
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 |
イベント
| 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. |