コンポーネント テーマ

    コンポーネント テーマは、テーマをグローバルに定義して特定のコンポーネント インスタンスのスタイルを変更できます。

    概要

    Ignite UI for Angular でコンポーネント テーマを設定する方法、次にコンポーネント レベル テーマの作成方法について説明します。IE 11 などの古いブラウザーをサポートするためにコンポーネントのテーマ設定に 2 つの方法があります。

    • 1 つ目の方法は、コンポーネント インスタンスを CSS 変数 を使用してスタイル設定する方法です。CSS 変数を使用するとスタイルを繰り返し定義することなくコンポーネント テーマを作成できます。この方法は、CSS 変数の値をランタイムで変更できます。
    • 2 つ目の方法は、特定のコンポーネントで既に宣言されている CSS ルールを上書きする新しいルールを作成することです。この方法は古いブラウザーに適切なテーマをサポートする簡単で唯一の方法ですが、多くの追加 CSS ルールを生成した CSS テーマに追加するため理想的ではありません。

    これらの方法を実際に使用する方法やコンポーネント レベルのテーマを作成する場合にどちらか一方を使用する方法について説明します。

    テーマの作成

    コンポーネント テーマは複数のパーツで構成されます。

    • コンポーネント テーマ関数 - Sass 関数は、渡した引数を正規化して コンポーネント ミックスインでテーマを作成します。
    • CSS 変数 mixin - コンポーネント テーマを使用し、特定コンポーネントのスタイルに使用される CSS 変数を生成する Sass mixin。
    • コンポーネント mixin - コンポーネント テーマを使用し、特定コンポーネントのスタイルに使用される CSS ルールを生成する Sass mixin。

    アバターのデフォルトテーマに設定するテーマと異なる背景色を持つ新規のグローバル アバター テーマを作成する場合、概要セクションのようにコンポーネント テーマを作成する 2 つの一般的な方法があります。 コンポーネントテーマを体系化し、スコープする方法があります。最も簡単な方法は、グローバル テーマを定義した同じファイルで行う方法です。

    アバター テーマの定義:

    // Some place after @include igx-theme(...);
    
    // Change the background of the avatar to purple.
    $new-avatar-theme: igx-avatar-theme(
        $background: purple
    );
    
    // Pass the css-vars to the `igx-css-vars` mixin
    @include igx-css-vars($new-avatar-theme);
    

    上記のコードは、igx-avatar コンポーネントに対して新しい CSS 変数を生成します。これらの新しい CSS 変数は、デフォルトのアバター ルールを上書きします。 同様に、グローバルな scss ファイルに igx-css-vars ミックスインを追加した場合、ミックスイン は定義済みのテーマを再び上書きします。

    次に例を示します。

    // ...
    @include igx-css-vars($new-avatar-theme);
    
    // Later
    $another-avatar-theme: igx-avatar-theme(
        $background: royalblue
    );
    
    @include igx-css-vars($another-avatar-theme);
    

    上記コードでは、以前の igx-css-vars ミックスインはすべて上書きされるため、事実上のグローバル テーマは $another-avatar-theme なります。

    ここで次のポイントに移ります。

    テーマのスコープ

    前の例のように同じコンポーネントをターゲットにした複数のテーマを同じレベルに追加する場合、最後のテーマ ミックスインが優先されます。これは CSS のカスケードの動作に起因します。同じコンポーネントタイプをターゲットにした 2 つ以上のテーマが必要な場合、セレクターにスコープする必要があります。例えば、複数の igx-avatar テーマを作成して特定の CSS セレクターにスコープし、後でコンポーネントマークアップに使用できます。

    // ...
    // CSS class selectors
    .avatar-royalblue {
        @include igx-css-vars($avatar-royalblue-theme);
    }
    
    .avatar-purple {
        @include igx-css-vars($avatar-green-theme);
    }
    

    コンポーネント テンプレート:

    <div class="avatar-royalblue">
        <igx-avatar initials="AZ"></igx-avatar>
    </div>
    
    <div class="avatar-purple">
        <igx-avatar icon="home"></igx-avatar>
    </div>
    

    表示のカプセル化

    グローバルにスコープし、単一の Sass ファイルに含まれるテーマを作成する方法について説明しました。ただし最適な方法ではないため、Sass ファイルを特定のコンポーネントにバインドした方がよい場合があります。この場合、表示のカプセル化、特に Angular で発生させる方法を考慮する必要があります。

    Angular では、表示のカプセル化に 3 つの方法 Emulated (デフォルト)、Shadow DOM、None を採用しています。各方法の詳細については、Angular ヘルプ をご覧ください。表示をカプセル化した親コンポーネントの一部である Ignite UI for Angular コンポーネントのテーマを処理する方法について詳しく説明します。

    エミュレートされた表示のカプセル化とは?このタイプの表示のカプセル化は、Shadow DOM 仕様の利点を享受しませんが、ホスト要素に適用された一意の属性識別子を使用してコンポーネントとその子のスタイルをバインドする方法を利用します。インナー セレクターをターゲットにした表示のカプセル化コンポーネントのスタイルシートに追加したスタイルのルールは、ホスト要素の一意の属性を参照しないため適用されません。このカプセル化をペネトレーションするには、View Encapsulation ペネトレーション ストラテジーをいくつか使用する必要があります。現在の Angular でこれを行うのは ::ng-deep です。ホスト要素でカプセル化された内部のセレクターをターゲットにできます。CSS 変数の代わりに CSS ルールを扱っている場合やコンポーネントの単一のインスタンスをカスタマイズする場合は、:: ng-deep の使用をお勧めします。次のセクションで例を示します。

    以下は CSS 変数を使用する例です。特定の親コンポーネントにバインドするアバター テーマを作成します。

    シンプルなコンポーネントです。

    import { Component, Input } from '@angular/core';
    
    @Component({
        selector: 'app-avatar',
        styleUrls: ['./app-avatar.component.scss'],
        template: `<igx-avatar [initials]="initials"></igx-avatar>`
    })
    export class AvatarComponent extends Component {
        @Input() public initials = 'AZ';
    }
    

    以下は Sass スタイルシートの例です。

    // app-avatar.component.scss
    
    // Import all required functions and mixins
    @import '~igniteui-angular/lib/core/styles/themes/utilities';
    @import '~igniteui-angular/lib/core/styles/components/avatar/avatar-theme';
    @import '~igniteui-angular/lib/core/styles/components/avatar/avatar-component';
    
    $avatar-theme: igx-avatar-theme($background: royalblue);
    
    :host {
        @include igx-css-vars($avatar-theme);
    }
    

    CSS 変数を使用する間は、:: ng-deep 擬似セレクターは必要ありません。上記コードで背景色に常に royalblue が含まれる igx-avatar の CSS 変数を作成しました。カスタム アバターのテーマは、その他の igx-avatar コンポーネントに影響しないため、カスタムの app-avatar コンポーネント内でカプセル化されたままです。

    $igx-legacy-supportfalse に設定してビルドした Ignite UI for Angular テーマは、プロジェクトで Sass を使用せずにコンポーネントのスタイルを設定できます。たとえば、上記は --igx-avatar-background CSS 変数に色の値を設定することにより実現できます。

    /* app-avatar.component.css */
    :host {
        --igx-avatar-background: royalblue;
    }
    

    古いブラウザーの場合

    概要セクションの説明にあったように、$igx-legacy-support グローバル変数を true に設定することにより、ハードコーディングされた値をコンポーネントのスタイル設定に使用できます。igx-theme ミックスインを使用して $legacy-supporttrue を渡した場合、$igx-legacy-support もまた true に設定されます。

    グローバル テーマの使用

    以下は、ハードコーディングされた値で複数コンポーネントをスタイル設定する方法の例です。

    // Import the IgniteUI themes library first
    @import '~igniteui-angular/lib/core/styles/themes/index';
    
    @include igx-core();
    @include igx-theme(
        $palette: $default-palette,
        $legacy-support: true
    );
    
    // Overwrite the default themes for igx-avatar using hard-coded values:
    $avatar-theme: igx-avatar-theme($background: royalblue);
    
    @include igx-avatar($avatar-theme);
    

    カプセル化した表示の使用

    以下のサンプルは、表示のカプセル化セクションのサンプルを開始点として使用しています。

    @import '~igniteui-angular/lib/core/styles/themes/utilities';
    @import '~igniteui-angular/lib/core/styles/components/avatar/avatar-theme';
    @import '~igniteui-angular/lib/core/styles/components/avatar/avatar-component'; 
    
    // Enable legacy support first.
    $igx-legacy-support: true;
    $avatar-theme: igx-avatar-theme($initials-background: royalblue);
    
    :host ::ng-deep {
        @include igx-avatar($avatar-theme);
    }
    

    API の概要

    その他のリソース

    グローバル テーマの設定方法:

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