ion-checkbox
Checkboxを使用すると、一連のオプションから複数のオプションを選択できます。選択すると、チェックマークが付いた状態(checked)で表示されます。checkboxをクリックすると、 checked
プロパティーが切り替わります。checked
プロパティを設定して、プログラムで checked
を切り替えることもできます。
基本的な使い方
Label Placement
開発者は labelPlacement
プロパティを使用して、ラベルをコントロールに対してどのように配置するかを制御できます。このプロパティはフレックスボックスの flex-direction
プロパティを反映しています。
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 checkboxes 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
が正しく機能するために必須ではありません。
Indeterminate Checkboxes
Links inside of Labels
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.
テーマ
CSSカスタムプロパティ
Interfaces
CheckboxChangeEventDetail
interface CheckboxChangeEventDetail<T = any> {
value: T;
checked: boolean;
}
CheckboxCustomEvent
必須ではありませんが、このコンポーネントから発行される Ionic イベントでより強く型付けを行うために、CustomEvent
インターフェースの代わりにこのインターフェースを使用することが可能です。
interface CheckboxCustomEvent<T = any> extends CustomEvent {
detail: CheckboxChangeEventDetail<T>;
target: HTMLIonCheckboxElement;
}