本文へスキップ
バージョン: v8

ion-checkbox

シャドウ

チェックボックスを使用すると、オプションのセットから複数のオプションを選択できます。アクティブになると、チェック済み（チェックマーク付き）として表示されます。チェックボックスをクリックすると、checkedプロパティが切り替わります。checkedプロパティを設定することで、プログラムによってチェックすることもできます。

基本的な使用方法​

ラベルの位置​

開発者は、labelPlacementプロパティを使用して、コントロールに対するラベルの位置を制御できます。このプロパティは、flexboxのflex-directionプロパティを反映しています。

配置​

開発者は、alignmentプロパティを使用して、ラベルとコントロールを横軸上でどのように配置するかを制御できます。このプロパティは、flexboxのalign-itemsプロパティを反映しています。

注記

積み重ねられたチェックボックスは、alignmentプロパティを使用して配置できます。これは、ラベルとコントロールを水平方向に中央揃えする必要がある場合に役立ちます。

調整​

開発者は、justifyプロパティを使用して、ラベルとコントロールを1行にどのように配置するかを制御できます。このプロパティは、flexboxのjustify-contentプロパティを反映しています。

注記

ion-itemは、justifyの動作を強調するためにデモでのみ使用されます。justifyが正しく機能するために必要ではありません。

不定チェックボックス​

チェックボックスのラベルには、リンクが付いている場合があります。これらのリンクは、チェックボックスに関する詳細情報を提供できます。ただし、リンクをクリックしてもチェックボックスがチェックされるべきではありません。これを実現するには、stopPropagationを使用して、クリックイベントのバブリングを防ぐことができます。この方法を使用すると、ラベルの残りの部分はクリック可能なままです。

テーマ​

CSSカスタムプロパティ​

インターフェース​

CheckboxChangeEventDetail​

interface CheckboxChangeEventDetail<T = any> {
  value: T;
  checked: boolean;
}

CheckboxCustomEvent​

必須ではありませんが、このインターフェースはCustomEventインターフェースの代わりに使用して、このコンポーネントから発行されるIonicイベントの型付けを強化できます。

interface CheckboxCustomEvent<T = any> extends CustomEvent {
  detail: CheckboxChangeEventDetail<T>;
  target: HTMLIonCheckboxElement;
}

従来のチェックボックス構文からの移行​

Ionic 7.0では、よりシンプルなチェックボックス構文が導入されました。この新しい構文により、チェックボックスの設定に必要なボイラープレートが削減され、アクセシビリティの問題が解決され、開発者エクスペリエンスが向上します。

開発者は、一度に1つのチェックボックスずつこの移行を実行できます。従来の構文を引き続き使用できますが、できるだけ早く移行することをお勧めします。

最新の構文の使用​

最新の構文を使用するには、ion-labelを削除し、ラベルをion-checkbox内に直接渡します。ラベルの位置は、ion-checkboxのlabelPlacementプロパティを使用して設定できます。ラベルとコントロールが1行にどのように配置されるかは、ion-checkboxのjustifyプロパティを使用して制御できます。

<!-- Basic -->

<!-- Before -->
<ion-item>
  <ion-label>Checkbox Label</ion-label>
  <ion-checkbox></ion-checkbox>
</ion-item>

<!-- After -->
<ion-item>
  <ion-checkbox>Checkbox Label</ion-checkbox>
</ion-item>

<!-- Fixed Labels -->

<!-- Before -->
<ion-item>
  <ion-label position="fixed">Checkbox Label</ion-label>
  <ion-checkbox></ion-checkbox>
</ion-item>

<!-- After -->
<ion-item>
  <ion-checkbox label-placement="fixed">Checkbox Label</ion-checkbox>
</ion-item>

<!-- Checkbox at the start of line, Label at the end of line -->

<!-- Before -->
<ion-item>
  <ion-label slot="end">Checkbox Label</ion-label>
  <ion-checkbox></ion-checkbox>
</ion-item>

<!-- After -->
<ion-item>
  <ion-checkbox label-placement="end">Checkbox Label</ion-checkbox>
</ion-item>
注記

以前のバージョンのIonicでは、ion-checkboxが正しく機能するためにion-itemが必要でした。Ionic 7.0以降、ion-checkboxは、アイテムがion-listに配置されている場合にのみion-item内で使用する必要があります。また、ion-checkboxが正しく機能するためにion-itemは不要になりました。

従来の構文の使用​

Ionicは、アプリが最新のチェックボックス構文を使用しているかどうかを検出するためのヒューリスティックを使用します。場合によっては、従来の構文を引き続き使用することが望ましい場合があります。開発者は、ion-checkboxのlegacyプロパティをtrueに設定して、チェックボックスのそのインスタンスで従来の構文を使用するように強制できます。

プロパティ​

alignment​

説明チェックボックスとラベルの横軸上の配置を制御する方法。"start": ラベルとコントロールは、LTRでは横軸の左側に、RTLでは右側に表示されます。"center": ラベルとコントロールは、LTRとRTLの両方で横軸の中央に表示されます。このプロパティを設定すると、チェックボックスのdisplayがblockに変更されます。
属性alignment
型"center"｜"start"｜undefined
デフォルトundefined

checked​

説明trueの場合、チェックボックスは選択されています。
属性checked
型boolean
デフォルトfalse

color​

説明アプリケーションの色パレットから使用する色。デフォルトのオプションは、"primary"、"secondary"、"tertiary"、"success"、"warning"、"danger"、"light"、"medium"、"dark"です。色の詳細については、テーマを参照してください。
属性color
型"danger"｜"dark"｜"light"｜"medium"｜"primary"｜"secondary"｜"success"｜"tertiary"｜"warning"｜文字列｜undefined
デフォルトundefined

disabled​

説明trueの場合、ユーザーはチェックボックスと対話できません。
属性disabled
型boolean
デフォルトfalse

indeterminate​

説明trueの場合、チェックボックスは視覚的に不定として表示されます。
属性indeterminate
型boolean
デフォルトfalse

justify​

説明ラベルとチェックボックスを一行内に配置する方法。"start": LTRではラベルとチェックボックスが左側に、RTLでは右側に表示されます。"end": LTRではラベルとチェックボックスが右側に、RTLでは左側に表示されます。"space-between": ラベルとチェックボックスは行の両端に配置され、両要素間にスペースが入ります。このプロパティを設定すると、チェックボックスのdisplayがblockに変更されます。
属性justify
型"end" ｜ "space-between" ｜ "start" ｜ undefined
デフォルトundefined

labelPlacement​

説明チェックボックスに対するラベルの配置場所。"start": LTRではラベルがチェックボックスの左側に、RTLでは右側に表示されます。"end": LTRではラベルがチェックボックスの右側に、RTLでは左側に表示されます。"fixed": 幅が固定される点を除き、"start"と同じ動作をします。長いテキストは省略記号("...")で切り詰められます。"stacked": 方向に関係なく、ラベルがチェックボックスの上に表示されます。ラベルの配置はalignmentプロパティで制御できます。
属性label-placement
型"end" ｜ "fixed" ｜ "stacked" ｜ "start"
デフォルト'start'

mode​

説明どのプラットフォームのスタイルを使用するかを決定します。
属性mode
型"ios" ｜ "md"
デフォルトundefined

name​

説明フォームデータと共に送信されるコントロールの名前。
属性name
型文字列
デフォルトthis.inputId

value​

説明チェックボックスの値は、チェックされているかどうかを示すものではありません。そのためにはcheckedプロパティを使用してください。

チェックボックスの値は、<input type="checkbox">の値と同様で、チェックボックスがネイティブの<form>に関与する場合にのみ使用されます。
属性value
型任意
デフォルト'on'

Events​

名前説明バブル
ionBlurチェックボックスがフォーカスを失ったときに発生します。true
ionChangeクリックなどのユーザー操作の結果、checkedプロパティが変更されたときに発生します。

プログラムでcheckedプロパティを設定した場合は、このイベントは発生しません。		true
ionFocusチェックボックスがフォーカスされたときに発生します。true

Methods​

このコンポーネントで使用できる公開メソッドはありません。

CSS Shadow Parts​

名前説明
containerチェックボックスマークのコンテナ。
labelチェックボックスを表すラベルテキスト。
markチェック済みの状態を示すチェックマーク。

CSS Custom Properties​

名前説明
--border-colorチェックボックスアイコンの枠線の色
--border-color-checkedチェック済みの場合のチェックボックスアイコンの枠線の色
--border-radiusチェックボックスアイコンの角丸の半径
--border-styleチェックボックスアイコンの枠線のスタイル
--border-widthチェックボックスアイコンの枠線の幅
--checkbox-backgroundチェックボックスアイコンの背景
--checkbox-background-checkedチェック済みの場合のチェックボックスアイコンの背景
--checkmark-colorチェック済みの場合のチェックボックスチェックマークの色
--checkmark-widthチェックボックスチェックマークの線の太さ
--sizeチェックボックスアイコンのサイズ
--transitionチェックボックスアイコンのトランジション

Slots​

名前説明
``チェックボックスに関連付けるラベルテキスト。"labelPlacement"プロパティを使用して、チェックボックスに対するラベルの配置場所を制御します。

目次

このページを編集