Checkbox

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

    Angular Checkbox の例

    使用方法

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

    はじめに、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;
    }
    

    以下は結果です。

    ラベル配置

    チェックボックスの 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;
            }
        }
    }
    

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

    スタイル設定

    チェックボックスのスタイル設定を始めるには、すべてのテーマ関数とコンポーネント ミックスインが存在する 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-supporttrue に設定されている場合、コンポーネントのテーマを以下のように含めます。

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

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

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

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

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

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

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

    Demo

    API リファレンス

    テーマの依存関係

    その他のリソース

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