shadow
Checkboxを使用すると、一連のオプションから複数のオプションを選択できます。選択すると、チェックマークが付いた状態(checked)で表示されます。checkboxをクリックすると、 checked プロパティーが切り替わります。checked プロパティを設定して、プログラムで checked を切り替えることもできます。
開発者は labelPlacement プロパティを使用して、ラベルをコントロールに対してどのように配置するかを制御できます。このプロパティはフレックスボックスの flex-direction プロパティを反映しています。
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 checkboxes 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 が正しく機能するために必須ではありません。
Checkbox labels can sometimes be accompanied with links. These links can provide more information related to the checkbox. However, clicking the link should not check the checkbox. To achieve this, we can use stopPropagation to prevent the click event from bubbling. When using this approach, the rest of the label still remains clickable.
Helper & Error Text
Helper and error text can be used inside of a checkbox 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-checkbox. 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.
interface CheckboxChangeEventDetail<T = any> {
value: T;
checked: boolean;
}
必須ではありませんが、このコンポーネントから発行される Ionic イベントでより強く型付けを行うために、CustomEvent インターフェースの代わりにこのインターフェースを使用することが可能です。
interface CheckboxCustomEvent<T = any> extends CustomEvent {
detail: CheckboxChangeEventDetail<T>;
target: HTMLIonCheckboxElement;
}
| Description | How to control the alignment of the checkbox 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 checkbox display to block. |
| Attribute | alignment |
| Type | "center" ｜ "start" ｜ undefined |
| Default | undefined |
| Description | trueの場合、チェックボックスが選択される。 |
| Attribute | checked |
| Type | boolean |
| Default | false |
| 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 |
errorText
| Description | Text that is placed under the checkbox label and displayed when an error is detected. |
| Attribute | error-text |
| Type | string ｜ undefined |
| Default | undefined |
helperText
| Description | Text that is placed under the checkbox label and displayed when no error is detected. |
| Attribute | helper-text |
| Type | string ｜ undefined |
| Default | undefined |
| Description | trueの場合、チェックボックスは視覚的に不定形と表示されます。 |
| Attribute | indeterminate |
| Type | boolean |
| Default | false |
| Description | How to pack the label and checkbox within a line. "start": The label and checkbox will appear on the left in LTR and on the right in RTL. "end": The label and checkbox will appear on the right in LTR and on the left in RTL. "space-between": The label and checkbox will appear on opposite ends of the line with space between the two elements. Setting this property will change the checkbox display to block. |
| Attribute | justify |
| Type | "end" ｜ "space-between" ｜ "start" ｜ undefined |
| Default | undefined |
| Description | Where to place the label relative to the checkbox. "start": The label will appear to the left of the checkbox in LTR and to the right in RTL. "end": The label will appear to the right of the checkbox 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 checkbox 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 | If true, screen readers will announce it as a required field. This property works only for accessibility purposes, it will not prevent the form from submitting if the value is invalid. |
| Attribute | required |
| Type | boolean |
| Default | false |
| Description | The value of the checkbox does not mean if it's checked or not, use the checked property for that.
The value of a checkbox is analogous to the value of an <input type="checkbox">, it's only used when the checkbox participates in a native <form>. |
| Attribute | value |
| Type | any |
| Default | 'on' |
| Name | Description | Bubbles |
|---|
ionBlur | チェックボックスのフォーカスが外れたときに発行されます。 | true |
ionChange | Emitted when the checked property has changed as a result of a user action such as a click.
This event will not emit when programmatically setting the checked property. | true |
ionFocus | チェックボックスにフォーカスが当たったときに発行されます。 | true |
No public methods available for this component.
| Name | Description |
|---|
container | チェックボックスマークのコンテナです。 |
error-text | Supporting text displayed beneath the checkbox label when the checkbox is invalid and touched. |
helper-text | Supporting text displayed beneath the checkbox label when the checkbox is valid. |
label | チェックボックスを表すラベルテキスト。 |
mark | チェックされた状態を示すために使用されるチェックマークです。 |
supporting-text | Supporting text displayed beneath the checkbox label. |
| Name | Description |
|---|
--border-color | チェックボックスアイコンのボーダーカラー |
--border-color-checked | チェックボックスのアイコンがチェックされたときのボーダーカラー |
--border-radius | チェックボックスアイコンの境界半径 |
--border-style | チェックボックスアイコンのボーダースタイル |
--border-width | チェックボックスアイコンのボーダー幅 |
--checkbox-background | チェックボックスアイコンの背景 |
--checkbox-background-checked | チェックしたときのチェックボックスアイコンの背景 |
--checkmark-color | チェックボックスのチェックマークがチェックされたときの色 |
--checkmark-width | チェックボックス・チェックマークのストローク幅 |
--size | チェックボックスの アイコンの大きさ |
--transition | チェックボックスアイコンの遷移 |
| Name | Description |
|---|
--border-color | チェックボックスアイコンのボーダーカラー |
--border-color-checked | チェックボックスのアイコンがチェックされたときのボーダーカラー |
--border-radius | チェックボックスアイコンの境界半径 |
--border-style | チェックボックスアイコンのボーダースタイル |
--border-width | チェックボックスアイコンのボーダー幅 |
--checkbox-background | チェックボックスアイコンの背景 |
--checkbox-background-checked | チェックしたときのチェックボックスアイコンの背景 |
--checkmark-color | チェックボックスのチェックマークがチェックされたときの色 |
--checkmark-width | チェックボックス・チェックマークのストローク幅 |
--size | チェックボックスのアイコンの大きさ |
--transition | チェックボックスアイコンの遷移 |
| Name | Description |
|---|
| `` | チェックボックスと関連付けるラベルテキスト。"labelPlacement" プロパティを使用して、チェックボックスに対するラベルの配置を制御します。 |