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 | 十字軸上のチェックボックスとラベルの配置を制御する方法。"start"：ラベルとコントロール はLTRでは横軸の左側に、RTLでは右側に表示されます。"center"：ラベルとコントロールはLTRでもRTLでも横軸の中央に表示されます。このプロパティを設定すると、チェックボックス display が block に変更されます。 |
| Attribute | alignment |
| Type | "center" ｜ "start" ｜ undefined |
| Default | undefined |
| Description | trueの場合、チェックボックスが選択される。 |
| Attribute | checked |
| Type | boolean |
| Default | false |
| 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 |
| Description | trueの場合、ユーザはチェックボックスと対話することができません。 |
| Attribute | disabled |
| Type | boolean |
| Default | false |
errorText
| Description | チェックボックスのラベルの下に配置され、エラーが検出されたときに表示されるテキスト。 |
| Attribute | error-text |
| Type | string ｜ undefined |
| Default | undefined |
helperText
| Description | チェックボックスのラベルの下に配置され、エラーが検出されなかった場合に表示されるテキスト。 |
| Attribute | helper-text |
| Type | string ｜ undefined |
| Default | undefined |
| Description | trueの場合、チェックボックスは視覚的に不定形と表示されます。 |
| Attribute | indeterminate |
| Type | boolean |
| Default | false |
| Description | ラベルとチェックボックスを1行にまとめる方法。"start"：ラベルとチェックボックスはLTRでは左に、RTLでは右に表示されます。"end"：ラベルとチェックボックスはLTRでは右に、RTLでは左に表示されます。"space-between"：ラベルとチェックボックスは行の反対側に表示され、2つの要素の間にはスペースが入ります。このプロパティを設定すると、チェックボックスの display が block に変更されます。 |
| Attribute | justify |
| Type | "end" ｜ "space-between" ｜ "start" ｜ undefined |
| Default | undefined |
| Description | チェックボックスに対するラベルの位置。"start"：ラベルはLTRではチェックボックスの左に、RTLでは右に表示されます。"end"：ラベルはLTRではチェックボックスの右、RTLでは左に表示されます。"fixed"：ラベルの幅が固定される以外は "start" と同じ動作をします。長いテキストは省略記号("...")で切り捨てられます。"stacked"：ラベルは向きに関係なくチェックボックスの上に表示されます。ラベルの整列は alignment プロパティで制御できます。 |
| Attribute | label-placement |
| Type | "end" ｜ "fixed" ｜ "stacked" ｜ "start" |
| Default | 'start' |
| 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 |
| Description | フォームデータとともに送信されるコントロールの名前。 |
| Attribute | name |
| Type | string |
| Default | this.inputId |
| Description | true の場合、スクリーンリーダーは必須項目として読み上げます。このプロパティはアクセシビリティ目的でのみ機能し、値が無効でもフォーム送信は妨げません。 |
| Attribute | required |
| Type | boolean |
| Default | false |
| Description | チェックボックス の値は、チェックされているかどうかを意味するものではなく、checkedプロパティを使用します。 チェックボックスの値は <input type="checkbox"> の値に似ており、チェックボックスがネイティブの <form> に参加する場合にのみ使用されます。 |
| Attribute | value |
| Type | any |
| Default | 'on' |
| Name | Description | Bubbles |
|---|
ionBlur | チェックボックスのフォーカスが外れたときに発行されます。 | true |
ionChange | クリックなどのユーザーアクションの結果、checkedプロパティが変更されたときに発行される。 プログラムで checked プロパティを設定した場合は、このイベントは発生しません。 | true |
ionFocus | チェックボックスにフォーカスが当たったときに発行されます。 | true |
No public methods available for this component.
| Name | Description |
|---|
container | チェックボックスマークのコンテナです。 |
error-text | チェックボックスが無効かつ操作されたときに、ラベルの下に表示される補助テキスト。 |
helper-text | チェックボックスが有効なときに、ラベルの下に表示される補助テキスト。 |
label | チェックボックスを表すラベルテキスト。 |
mark | チェックされた状態を示すために使用されるチェックマークです。 |
supporting-text | チェックボックスのラベルの下に表示される補助テキスト。 |
| 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"プロパティを使用して、チェックボックスに対するラベルの配置を制御します。 |