Checkbox

Ignite UI for Angular Checkbox コンポーネントは、特定の条件のバイナリ選択を可能にする選択コントロールです。ネイティブ ブラウザーのチェックボックスと同様に動作します。

Angular Checkbox の例

このサンプルが気に入りましたか? 完全な Angular ツールキットにアクセスして、すばやく独自のアプリの作成を開始します。無料でダウンロードできます。

codesandbox で表示 StackBlitz で表示

使用方法

チェックボックス コンポーネントは、選択/選択解除の状態の選択ができます。デフォルトのスタイル設定はマテリアル デザイン ガイドラインの選択コントロールの仕様に基づきます。

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

// app.module.ts

...
import { IgxCheckboxModule } from 'igniteui-angular';

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

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

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

Checkbox プロパティ

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

// tasks.component.ts
...
public tasks = [
  { done: true, description: 'Research' },
  { done: true, description: 'Implement' },
  { done: false, description: 'Test' },
];

...
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;
}

以下は結果です。

codesandbox で表示 StackBlitz で表示

ラベル配置

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

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

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

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

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

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

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

<!-- app.component.html -->

<igx-checkbox 
    [readonly]="true" 
    [(ngModel)]="masterCheckbox.checked" 
    [(indeterminate)]="masterCheckbox.indeterminate" 
    (click)="toggleAll()"
>
すべて完了しました。
</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;
        }
    }
}

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

codesandbox で表示 StackBlitz で表示

スタイル設定

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

@import '~igniteui-angular/lib/core/styles/themes/index';

チェックボックスはカレンダーのテーマを使用するため、igx-checkbox-theme を拡張する新しいテーマを作成し、そのパラメーターを使用してチェックボックスの項目をスタイル設定します。

// in styles.scss
$custom-checkbox-theme: igx-checkbox-theme(
    $border-radius: 10px,
    $label-color: #011627,
    $empty-color: #ECAA53,
    $fill-color: #ECAA53,
    $tick-color: #011627,
);

テーマを含む

最後にコンポーネントのテーマをアプリケーションに含めます。

$legacy-support が true に設定されている場合、コンポーネントのテーマを以下のように含めます。

 @include igx-checkbox($custom-checkbox-theme);

Note

コンポーネントが Emulated ViewEncapsulation を使用している場合、::ng-deep を使用してこのカプセル化を解除する必要があります。

:host {
     ::ng-deep {
        @include igx-checkbox($custom-checkbox-theme);
    }
}

$legacy-support が false (デフォルト) に設定されている場合、css 変数 を以下のように含めます。

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

Note

コンポーネントが Emulated ViewEncapsulation を使用している場合においても、変数をオーバーライドするにはグローバル セレクターが必要なため、:host を使用する必要があります。

:host {
    @include igx-css-vars($custom-checkbox-theme);
}

Demo

codesandbox で表示 Stackblitz で表示

API リファレンス

• IgxCheckboxComponent
• IgxCheckboxComponent スタイル
• LabelPosition

その他のリソース

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

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