Angular Checkbox コンポーネント

Angular Checkbox は、Angular アプリにチェックボックスを追加できるコンポーネントです。これは標準の HTML チェックボックスとして動作し、ユーザーが基本的なチェック状態とチェックなし状態、または追加の不確定状態を選択できるようにします。また、Angular Checkbox コンポーネントのスタイルと、フォームで使用する機能を完全に制御できます。

ライブ デモ

構成

Angular Checkbox は、オプションのラベルを持つ選択可能なコントロールをレンダリングします。

Angular Checkbox は、インジケーターとオプションのラベル コンテンツで構成されます。ラベルをインジケーターの前または後に表示する場合は、ラベルの位置を設定します。

Checkbox
├── Checkbox Indicator
└── Label (optional)

作業の開始

Angular Checkbox を使用するには、基本的なプロジェクトのセットアップについて、Ignite UI for Angular 作業の開始トピックに従い、対象プラットフォームに合わせてコンポーネントをインストールまたは登録します。

igniteui-angular パッケージを使用して、パッケージをインストールし、Checkbox コンポーネントをインポートします:

npm install igniteui-angular

import { IgxCheckboxComponent } from 'igniteui-angular/checkbox';

IgxCheckboxComponent をコンポーネントの imports コレクションに追加し、テンプレートで igx-checkbox 要素を使用します。

登録後、プラットフォーム固有の要素またはラッパーを使用して Checkbox をレンダリングします:

<igx-checkbox></igx-checkbox>

使用方法

Checkbox は、基本的に選択状態と未選択状態のどちらかを選択でき、オプションが部分的な選択を表す場合は不確定状態もサポートします。

チェックボックスの LabelPosition 属性を設定することにより、チェックボックスの切り替えの前または後にラベルを配置するかどうかを指定できます。許可される値は、before と after (デフォルト) です:

<igx-checkbox labelPosition="before">Label</igx-checkbox>

チェックボックスは、チェックボックスの外部の要素でラベル付けすることもできます。この場合、ユーザーはニーズに応じてラベルの位置とスタイルを完全に制御できます。

<span id="checkbox-label">Label</span>
<igx-checkbox aria-labelledby="checkbox-label"></igx-checkbox>

状態

Checkbox は、さまざまな状態関連の属性をサポートします。checked 属性を使用して、チェックボックスの初期状態をオンまたはオフに設定できます。

<igx-checkbox [checked]="true"></igx-checkbox>

indeterminate 属性を使用して、チェックボックスの値を true にも false にも設定しません。

<igx-checkbox [indeterminate]="true"></igx-checkbox>

disabled 属性を使用して、Checkbox を無効にできます。

<igx-checkbox [disabled]="true"></igx-checkbox>

invalid 属性を使用して、Checkbox を無効 (invalid) としてマークできます。

<igx-checkbox [invalid]="true"></igx-checkbox>

required プロパティを使用して、Checkbox を必須としてマークできます。

<igx-checkbox [required]="true"></igx-checkbox>

推奨/非推奨

多くのチェックボックスが必要な場合は、ユーザーがリストをすばやく確認できるように、1 列のグループに配置します。チェックボックスの数が少ない場合は 1 行に並べて配置できますが、複数の列に配置することは避けてください。

プロパティ

次のプロパティは、このページで説明する Checkbox の主な構成オプションです。生成された完全な一覧については、API リファレンスを参照してください。

スタイル設定

Angular Checkbox は、Ignite UI for Angular Sass テーマ システムと、それが生成する CSS 変数によってスタイル設定されます。

Sass テーマ

Ignite UI for Angular テーマ システムを使用して、アプリケーションの他の部分と一貫した Checkbox のスタイルを設定します。カスタム テーマを追加する前に、API ドキュメントで利用可能な Sass テーマ パラメーターを確認してください。

checkbox-theme は、次のパラメーターを公開します:

カスタム スタイル設定

Checkbox のテーマをカスタマイズするには、必要な Sass プロパティを指定してカスタム テーマを作成します:

@use "igniteui-angular/theming" as *;

$custom-checkbox-theme: checkbox-theme(
  $empty-color: #ecaa53,
  $fill-color: #ecaa53,
  $border-radius: 5px
);

次に、アプリケーションにカスタム テーマを含めます:

:host {
  @include tokens($custom-checkbox-theme);
}

Tailwind によるスタイル設定

igniteui-theming のカスタム Tailwind ユーティリティ クラスを使用して、Angular Checkbox のスタイルを設定できます。最初に Tailwind を設定してから、グローバル スタイルシートで Ignite UI ユーティリティをインポートしてください:

@import "tailwindcss";
@import "igniteui-theming/tailwind/utilities/material.css";

<igx-checkbox class="![--tick-color:var(--ig-secondary-500)]"></igx-checkbox>

感嘆符 (!) により、Tailwind ユーティリティが Checkbox のデフォルトのテーマ スタイルよりも優先されます。

アクセシビリティ

Angular Checkbox は、ラベルと状態を持つ選択可能なコントロールを提供します。キーボードおよび支援技術のユーザーが理解できる状態を維持する必要があります。

キーボード操作

Checkbox は、レンダリングされたコントロールが提供するキーボード動作を使用します。無効な Checkbox はキーボードで操作できず、Space キーでチェック状態が変更されます。

Checkbox が提供するキーボード操作を使用し、対象プラットフォームでのフォーカスと状態変更の動作を確認してください。

スクリーン リーダー / ARIA

Checkbox は、レンダリングされたコントロールのセマンティクスを通じて、チェック状態、無効状態、および設定されている場合は必須、無効 (invalid)、不確定の状態を公開します。

• すべての Checkbox に意味のあるラベル コンテンツを提供して、支援技術のユーザーがその目的を識別できるようにします。
• ラベルがコンポーネントの外部にある場合は、サポートされている Angular のラベル付けメカニズムで接続し、対象プラットフォームで読み上げを確認します。
• コントロールをカスタマイズまたはラップする場合は、Checkbox の状態セマンティクスを維持します。
• Change イベント ハンドラーは状態の変更を報告します。必要に応じて、アクセシブルな名前を別途追加してください。

チェック、チェックなし、必須、無効 (invalid)、無効化、不確定の各状態は、コンポーネントがサポートするセマンティクスを通じて、支援技術で引き続き利用できる必要があります。レンダリングされた読み上げ内容をプラットフォームの API ドキュメントに照らして確認してください。

アクセシビリティ準拠

レンダリングされた Angular Checkbox が、アプリケーションのアクセシビリティ要件を満たしていることを確認してください。

ユーザー側の責任:

• すべての Checkbox に意味のあるアクセシブルな名前を付けます。
• Checkbox のテーマをカスタマイズするときは、フォーカスの可視性を維持し、十分なコントラストを確保します。
• 視覚的なスタイル設定だけでは不十分な場合でも、必須、無効 (invalid)、無効化、不確定の各状態が伝わるようにします。
• レンダリングされた Checkbox を、キーボード ナビゲーションとサポートされている支援技術でテストします。

API リファレンス

Angular Checkbox の API リファレンスは、コンポーネントの完全な API を提供します。

依存関係

Angular Checkbox は、視覚的なスタイルを適用するためにテーマ スタイルシートが必要です。フレームワーク固有のセットアップについては、作業の開始を参照してください。

その他のリソース

API の詳細、例、プロジェクトのサポートについては、次の Angular リソースを参照してください:

• Ignite UI for Angular フォーラム (英語)
• Ignite UI for Angular GitHub (英語)

関連コンポーネント

Angular Checkbox は、選択可能なフォーム オプション向けです。代わりに即時のオン/オフ アクションが必要な場合は、次の関連コンポーネントを使用します:

• Switch

FAQ

これらのよくある質問では、Angular Checkbox の選択、アクセシビリティ、フォーム、検証に関する一般的なシナリオを取り上げます。