shadow
ラジオは、ラジオグループの中で使用する必要があります。ラジオを押すと、そのラジオがチェックされ、前に選択されていたラジオがある場合は、そのチェックが解除されます。また、親ラジオグループのvalueプロパティをラジオの値に設定することで、プログラム的にチェックすることもできます。
ラジオがラジオグループの中にある場合、いつでもチェックされるのは1つのラジオだけです。複数の項目を選択する場合は、checkboxesを代わりに使用する必要があります。ラジオをグループ内で無効にすると、ラジオとの相互作用を防ぐことができます。
開発者は labelPlacement プロパティを使用して、ラベルをコントロールに対してどのように配置するかを制御できます。 このプロパティはフレックスボックスの flex-direction プロパティを反映しています。
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 messages will appear here when logged from the example above.
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.
開発者は justify プロパティを使用して、ラベルとコントロールの行の詰め方を制御することができます。このプロパティはフレックスボックスの justify-content プロパティを反映しています。
ion-itemは、justifyがどのように機能するかを強調するためにデモで使用されているだけです。 justify が正しく機能するために必須ではありません。
デフォルトでは、一度選択されたラジオは選択を解除することができず、もう一度押すと選択されたままになります。この動作は、親ラジオグループの allowEmptySelection プロパティを使用することで変更することができ、ラジオを非選択にすることができます。
Helper & Error Text
Helper and error text can be used inside of a radio group with the helperText and errorText property. The error text will not be displayed unless the ion-invalid and ion-touched classes are added to the ion-radio-group. This ensures errors are not shown before the user has a chance to enter data.
In Angular, this is done automatically through form validation. In JavaScript, React and Vue, the class needs to be manually added based on your own validation.
| 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 |
| 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 |
| Description | trueの場合、ユーザはラジオと対話することができません。 |
| Attribute | disabled |
| Type | boolean |
| Default | false |
| 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 |
| 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' |
| Description | modeは、どのプラットフォームのスタイルを使用するかを決定します。 |
| Attribute | mode |
| Type | "ios" ｜ "md" |
| Default | undefined |
| Description | フォームデータとともに送信されるコントロールの名前。 |
| Attribute | name |
| Type | string |
| Default | this.inputId |
| Description | ラジオの値です。 |
| Attribute | value |
| Type | any |
| Default | undefined |
| Name | Description | Bubbles |
|---|
ionBlur | ラジオボタンのフォーカスが外れたときに発行されます。 | true |
ionFocus | ラジオボタンにフォーカスが当たったときに発行されます。 | true |
No public methods available for this component.
| Name | Description |
|---|
container | ラジオマークの入れ物です。 |
label | ラジオを説明するラベルテキスト。 |
mark | チェックされた状態を示すために使用されるチェックマークまたはドットです。 |
| Name | Description |
|---|
--border-radius | ラジオのボーダー半径 |
--color | ラジオのカラー |
--color-checked | チェックしたラジオの色 |
--inner-border-radius | 内側のチェック付きラジオのボーダー半径 |
| Name | Description |
|---|
--border-radius | ラジオ のボーダー半径 |
--color | ラジオのカラー |
--color-checked | チェックしたラジオの色 |
--inner-border-radius | 内側のチェック付きラジオのボーダー半径 |
| Name | Description |
|---|
| `` | ラジオに関連付けるラベルテキストです。"labelPlacement"プロパティを使用して、ラジオに対するラベルの相対的な配置を制御します。 |