ion-radio
ラジオは、ラジオグループの中で使用する必要があります。ラジオを押すと、そのラジオがチェックされ、前に選択されていたラジオがある場合は、そのチェックが解除されます。また、親ラジオグループのvalueプロパティをラジオの値に設定することで、プログラム的にチェックすることもできます。
ラジオがラジオグループの中にある場合、いつでもチェックされるのは1つのラジオだけです。複数の項目を選択する場合は、checkboxesを代わりに使用する必要があります。ラジオをグループ内で無効にすると、ラジオとの相互作用を防ぐことができます。
基本的な使い方
Label Placement
開発者は labelPlacement プロパティを使用して、ラベルをコントロールに対してどのように配置するかを制御できます。 このプロパティはフレックスボックスの flex-direction プロパティを反映しています。
Label Wrapping
Regardless of label placement, long text will not wrap by default. If the width of the radio is constrained, overflowing text will be truncated with an ellipsis. You can enable text wrapping by adding the ion-text-wrap class to a wrapper around the radio text or styling the label shadow part using the ::part() selector.
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
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.
Justification
開発者は 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.
テーマ
Colors
CSSカスタムプロパティ
CSS Shadow Parts
Properties
alignment
| Description | Radioとラベルの十字軸上の配置を制御する方法。"start"：ラベルとコントロールはLTRでは横軸の左側に、RTLでは右側に表示されます。"center"：ラベルとコントロールはLTRでもRTLでも横軸の中央に表示されます。このプロパティを設定すると、Radioの display が block に変更されます。 |
| Attribute | alignment |
| Type | "center" ｜ "start" ｜ undefined |
| Default | undefined |
color
| Description | アプリケーションのカラーパレットから使用する色を指定します。デフォルトのオプションは以下の通りです。 "primary", "secondary", "tertiary", "success", "warning", "danger", "light", "medium", と "dark" です．色に関する詳しい情報は theming を参照してください。 |
| Attribute | color |
| Type | "danger" ｜ "dark" ｜ "light" ｜ "medium" ｜ "primary" ｜ "secondary" ｜ "success" ｜ "tertiary" ｜ "warning" ｜ string ｜ undefined |
| Default | undefined |
disabled
| Description | trueの場合、ユーザはRadioと対話することができません。 |
| Attribute | disabled |
| Type | boolean |
| Default | false |
justify
| Description | ラベルとRadioを1行にまとめる方法。"start"：ラベルとRadioはLTRでは左に、RTLでは右に表示されます。"end"：ラベルとRadioはLTRでは右に、RTLでは左に表示されます。"space-between"：ラベルとRadioは行の反対側に表示され、2つの要素の間にはスペースが入ります。このプロパティを設定すると、Radioの display が block に変更されます。 |
| Attribute | justify |
| Type | "end" ｜ "space-between" ｜ "start" ｜ undefined |
| Default | undefined |
labelPlacement
| Description | Radioに対してラベルを配置する位置。start"：ラベルはLTRではRadioの左に、RTLでは右に表示されます。end"：ラベルはLTRではRadioの右、RTLでは左に表示される。fixed"：ラベルの幅が固定される以外は "start" と同じ動作をします。長いテキストは省略記号("...")で切り捨てられます。stacked"：ラベルは向きに関係なくRadioの上に表示されます。ラベルの整列は alignment プロパティで制御できます。 |
| Attribute | label-placement |
| Type | "end" ｜ "fixed" ｜ "stacked" ｜ "start" |
| Default | 'start' |
mode
| Description | modeは、どのプラットフォームのスタイルを使用するかを決定します。 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 | フォームデータとともに送信されるコントロールの名前。 |
| Attribute | name |
| Type | string |
| Default | this.inputId |
value
| Description | Radioの値です。 |
| Attribute | value |
| Type | any |
| Default | undefined |
イベント
| Name | Description | Bubbles |
|---|---|---|
ionBlur | Radioボタンのフォーカスが外れたときに発行されます。 | true |
ionFocus | Radioボタンにフォーカスが当たったときに発行されます。 | true |
メソッド
No public methods available for this component.
CSS Shadow Parts
| Name | Description |
|---|---|
container | Radioマークの入れ物です。 |
label | Radioを説明するラベルテキスト。 |
mark | チェックされた状態を示すために使用されるチェックマークまたはドットです。 |
CSSカスタムプロパティ
- iOS
- MD
| Name | Description |
|---|---|
--border-radius | Radioのボーダー半径 |
--color | Radioのカラー |
--color-checked | チェックしたRadioの色 |
--inner-border-radius | 内側のチェック付きRadioのボーダー半径 |
| Name | Description |
|---|---|
--border-radius | Radioのボーダー半径 |
--color | Radioのカラー |
--color-checked | チェックしたRadioの色 |
--inner-border-radius | 内側のチェック付きRadioのボーダー半径 |
Slots
| Name | Description |
|---|---|
| `` | Radioに関連付けるラベルテキストです。"labelPlacement"プロパティを使用して、Radioに対するラベルの相対的な配置を制御します。 |