Angular Checkbox (チェックボックス) コンポーネントの概要

Angular Checkbox は、標準の HTML 入力タイプのチェックボックスの拡張であり、同様の機能を提供しますが、アニメーションや Material Design のスタイル設定などでのみ強化されています。これにより、ユーザーは主にフォームや調査で、1 つまたは複数の事前定義されたオプションを選択できます。

Ignite UI for Angular Checkbox コンポーネントは、特定の条件のバイナリ選択を可能にする選択コントロールです。ネイティブブラウザーのチェックボックスと同様に動作します。提供される機能には、スタイル設定オプション、テーマ、チェック状態、チェックなし状態、不確定状態などがあります。

Angular Checkbox の例

以下の Angular Checkbox の例で、実際のチェックボックスを参照してください。

Ignite UI for Angular Checkbox を使用した作業の開始

Ignite UI for Angular Checkbox コンポーネントを使用した作業を開始するには、Ignite UI for Angular をインストールする必要があります。既存の Angular アプリケーションで、以下のコマンドを入力します。

ng add igniteui-angular

Ignite UI for Angular については、「はじめに」トピックをご覧ください。

次に、app.module.ts ファイルに IgxCheckboxModule をインポートします。

// app.module.ts

import { IgxCheckboxModule } from 'igniteui-angular';
// import { IgxCheckboxModule } from '@infragistics/igniteui-angular'; for licensed package

@NgModule({
    ...
    imports: [..., IgxCheckboxModule],
    ...
})
export class AppModule {}

あるいは、16.0.0 以降、IgxCheckboxComponent をスタンドアロンの依存関係としてインポートできます。

// home.component.ts

import { IgxCheckboxComponent } from 'igniteui-angular';
// import { IgxCheckboxComponent } from '@infragistics/igniteui-angular'; for licensed package

@Component({
    selector: 'app-home',
    template: `
    <igx-checkbox [checked]="true">
        Simple checkbox
    </igx-checkbox>
    `,
    styleUrls: ['home.component.scss'],
    standalone: true,
    imports: [IgxCheckboxComponent]
})
export class HomeComponent {}

Ignite UI for Angular Checkbox モジュールまたはコンポーネントをインポートしたので、igx-checkbox コンポーネントの使用を開始できます。

Angular Checkbox コンポーネントの使用

デモのチェックボックスを作成するには、コンポーネントのテンプレートで以下のコードを追加します。

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

Checkbox プロパティ

チェックボックスプロパティをデータにバインドし、上記のコードを拡張します。たとえば、description および done の 2 つのプロパティを持つタスクオブジェクトの配列がある場合では、チェックボックスコンポーネントの checked プロパティをその元となるタスクオブジェクトの done プロパティにバインドできます。同様に、value プロパティを description にバインドします。オプションに change イベントをバインドし、イベントハンドラーメソッドでカスタムロジックを追加できます。

// tasks.component.ts
@Component({...})
export class HomeComponent {
    public tasks = [
        { done: true, description: 'Research' },
        { done: true, description: 'Implement' },
        { done: false, description: 'Test' }
    ];

    public statusChanged() {
        // event handler logic
    }
}

各タスクにチェックボックスを追加し、対応するプロパティバインディングを設定してコンポーネントテンプレートを拡張します。

<!--tasks.component.html-->
<igx-checkbox *ngFor="let task of tasks" [checked]="task.done">
    {{ task.description }}
</igx-checkbox>

スタイルを追加します。

//task.component.scss
:host {
    display: flex;
    flex-flow: column nowrap;
    padding: 16px;
}
igx-checkbox {
    margin-top: 16px;
}

以下は結果です。

ラベル配置

チェックボックスの labelPosition プロパティを使用してラベル位置を指定することができます。

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

labelPosition が設定されていない場合、ラベルはチェックボックスの後に配置されます。

Angular の未確定状態のチェックボックス

オンとオフに加えて、チェックボックスの 3 番目の状態があります: 未確定。この状態では、チェックボックスはオンでもオフでもありません。チェックボックスの indeterminate プロパティを使用して設定します。

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

実行する必要があるタスクのリストと、すべてのタスクが完了した場合にのみチェックされる Angular のマスターチェックボックスのアプリを作成できます。上記のサンプルを更新しましょう。まず、テンプレート:

<!-- app.component.html -->
<igx-checkbox
    [readonly]="true"
    [(ngModel)]="masterCheckbox.checked"
    [(indeterminate)]="masterCheckbox.indeterminate"
    (click)="toggleAll()"
>
All done
</igx-checkbox>
<igx-checkbox class="tasks" *ngFor="let task of tasks" [(ngModel)]="task.done">
    {{ task.description }}
</igx-checkbox>

次に、同じグループの一部であることを表示するには、サブタスクをインデントします。

// app.component.scss
:host {
    display: flex;
    flex-flow: column nowrap;
    padding: 16px;
}
igx-checkbox {
    margin-top: 16px;
}
igx-checkbox.tasks {
    padding-left: 10px;
}

最後に、アプリケーションのロジックを作成します。

// app.component.ts
public tasks = [
    { done: true, description: 'Research' },
    { done: true, description: 'Implement' },
    { done: false, description: 'Test' }
];
public get masterCheckbox() {
    return this.tasks.reduce(
        (acc, curr, idx, arr) => {
            acc.checked = acc.checked && curr.done;
            acc.done = curr.done ? acc.done + 1 : acc.done;
            acc.indeterminate = acc.done === arr.length ? false : !!acc.done;
            return acc;
        },
        {
            checked: true,
            done: 0,
            indeterminate: false
        }
    );
}
public toggleAll() {
    if (this.masterCheckbox.checked) {
        for (const task of this.tasks) {
            task.done = false;
        }
    } else {
        for (const task of this.tasks) {
            task.done = true;
        }
    }
}

すべて設定できると、アプリケーションは以下のようになります。

スタイル設定

Checkbox テーマのプロパティマップ

プライマリプロパティを変更すると、関連するすべての依存プロパティが自動的に更新されます。

プライマリプロパティ	依存プロパティ	説明
$empty-color	$empty-color-hover	ホバー時の未チェック境界線の色
	$focus-outline-color (indigo バリエーションのみ)	Indigo バリエーションのフォーカスアウトライン色
$fill-color	$fill-color-hover	ホバー時にチェックされた境界線と塗りつぶしの色
	$tick-color	チェックされたマークの色
	$focus-border-color	フォーカス境界線の色
	$disabled-indeterminate-color	不確定な状態時の無効な境界線と塗りつぶし色
	$focus-outline-color (bootstrap バリエーションのみ)	Bootstrap バリエーションのフォーカスアウトライン色
	$focus-outline-color-focused (indigo バリエーションのみ)	Indigo バリエーションのフォーカス状態のフォーカスアウトライン色
$error-color	$error-color-hover	ホバー時に無効な状態の境界線と塗りつぶしの色
	$focus-outline-color-error	エラー状態のフォーカスアウトライン色
$label-color	$label-color-hover	ホバー時のラベルのテキストの色

注: 実際の結果はテーマのバリエーションによって異なる場合があります。

チェックボックスのスタイル設定を始めるには、すべてのテーマ関数とコンポーネント mixins が存在する index ファイルをインポートする必要があります。

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

// 重要: Ignite UI for Angular 13 より前のバージョンは、次を使用してください。
// @import '~igniteui-angular/lib/core/styles/themes/index';

次に、checkbox-theme を拡張して新しいテーマを作成し、チェックボックス要素をスタイリングします。$empty-color と $fill-color を指定することで、必要な状態色やコントラストのある前景の色が自動的に計算されます。必要に応じて、他のパラメーターをカスタム値でオーバーライドすることもできます。

// in styles.scss
$custom-checkbox-theme: checkbox-theme(
    $empty-color: #ecaa53,
    $fill-color: #ecaa53,
    $border-radius: 5px
);

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

@include css-vars($custom-checkbox-theme);

以下のサンプルでは、カスタマイズした CSS 変数を使用したチェックボックスコンポーネントが、SAP UI5 デザインシステムのチェックボックスに視覚的に似たデザインを実現している様子を確認できます。

Tailwind によるスタイル設定

カスタム Tailwind ユーティリティクラスを使用して checkbox をスタイル設定できます。まず Tailwind を設定してください。

グローバルスタイルシートに Tailwind をインポートした上で、以下のように必要なテーマユーティリティを適用します:

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

ユーティリティファイルには、light テーマと dark テーマの両方のバリエーションが含まれています。

light-* クラスはライトテーマ用です。
dark-* クラスはダークテーマ用です。
プレフィックスの後にコンポーネント名を追加します (例: light-checkbox、dark-checkbox)。

これらのクラスを適用すると、動的なテーマの計算が可能になります。そこから、任意のプロパティを使用して、生成された CSS 変数をオーバーライドできます。コロンの後に、有効な CSS カラー形式 (HEX、CSS 変数、RGB など) を指定します。

プロパティの完全なリストは、checkbox-theme で確認できます。構文は次のとおりです:

<igx-checkbox
class="!light-checkbox
![--empty-color:#7B9E89]
![--fill-color:#7B9E89]"
[checked]="true">
    Styled checkbox
</igx-checkbox>

Note

ユーティリティクラスが優先されるようにするには、感嘆符 (!) が必要です。Tailwind はスタイルをレイヤーに適用しますが、これらのスタイルを重要としてマークしないと、コンポーネントのデフォルトのテーマによってオーバーライドしてしまいます。

最終的に、checkbox は次のようになります:

API リファレンス

テーマの依存関係

IgxRipple テーマ

その他のリソース

コミュニティに参加して新しいアイデアをご提案ください。