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

The Ignite UI for Angular Checkbox component is a selection control that allows users to make a binary choice for a certain condition. It behaves similarly to the native browser checkbox. Some of the features it offers are styling options, themes, checked, unchecked, and indeterminate states, and others.

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/checkbox';
// 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/checkbox';
// 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 テーマのプロパティ マップ

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

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

チェックボックスのスタイル設定を始めるには、すべてのテーマ関数とコンポーネント 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
);

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

:host {
    @include tokens($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>

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

API リファレンス

• Checkbox
• IgxCheckboxComponent スタイル
• LabelPosition

テーマの依存関係

• IgxRipple テーマ

その他のリソース

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

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