オーバーレイ スタイリング

    IgxOverlayService は、ページ コンテンツの上にコンテンツを表示するために使用されます。Ignite UI for Angular コンポーネントの多くは、ドロップダウンコンボ日付ピッカーなどのオーバーレイを使用しているため、オーバーレイがコンテンツを表示する方法を理解することが重要です。 他の要素上にコンテンツを表示するために、サービスはコンテンツを特別なアウトレット コンテナーに移します (デフォルトではドキュメントの本文の最後にアタッチされています)。この動作は、特定のコンテナーにスコープされた スタイルに影響を与える可能性があります。

    オーバーレイ コンポーネントのスタイル設定

    ほとんどの場合、グローバル テーマのスタイルはオーバーレイ アウトレットの影響を受けません。例として、グローバル igx-css-vars mixin でスタイル設定されたドロップダウンを見てみましょう。

    <!-- overlay-styling.component.html -->
    <igx-drop-down #customDropDown height="350px">
        <igx-drop-down-item *ngFor="let item of items" [value]="item.id">
            {{ item.name }}
        </igx-drop-down-item>
    </igx-drop-down>
    
    @use "igniteui-angular/theming" as *;
    
    // 重要: Ignite UI for Angular 13 より前のバージョンは、次を使用してください。
    // @import '~igniteui-angular/lib/core/styles/themes/index';
    

    $my-drop-down-theme: igx-drop-down-theme( $palette: $my-custom-palette );

    @include igx-css-vars($my-drop-down-theme);

    
    グローバル スタイルはスコープされたルール下では生成されず、カプセル化の影響も受けないため、サービスがオーバーレイ アウトレットに移動した `igx-drop-down-item` など、ページ上の任意の要素と一致できます。
    
    ## スコープ コンポーネント スタイル
    
    オーバーレイに表示される要素のスタイルをスコーピングする際に DOM のオーバーレイ `アウトレット`の位置を指定する必要があります。スコープが設定された CSS ルールには、要素の特定の階層構造が必要です - オーバーレイ コンテンツが、適用するスタイルの正しいコンテキストで表示されることを確認してください。
    
    たとえば、`igx-combo` を取り上げます。コンボは独自のビュー内でコンテンツを定義するため、項目の[スタイル設定](combo.md#angular-combobox-スタイル設定)は `igx-drop-down` テーマを使用します。
    
    > [!NOTE]
    > スタイルが他に影響しないようにするには、スタイルのスコープを `:host` セレクター内にしてください。
    
    ```scss
    // overlay-styling.component.scss
    :host {
        @include igx-css-vars($my-drop-down-theme);
    }
    

    テーマの $legacy-support 変数が true に設定されている場合、コンポーネントのテーマ関数を使用してスタイル設定します。

    Note

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

    // overlay-styling.component.scss
    :host {
       ::ng-deep{ 
            @include igx-drop-down($my-drop-down-theme);
        }
    }
    

    コンボのリスト内項目は、コンポーネント ホストの子孫ではありません。現在、ドキュメント本文の最後にあるデフォルトのオーバーレイ アウトレットに表示されています。変更するには、overlaySettingsoutlet プロパティを使用します。outlet は、オーバーレイ コンテナーをレンダリングする場所を制御します。

    以下でコンテナーを配置する要素への参照を渡すことができます。

    <igx-combo [data]="items" valueKey="name" displayKey="name" [overlaySettings]="{ outlet: element, modal: true }">
    </igx-combo>
    
    export class OverlayStylingComponent {
        ...
        constructor(public element: ElementRef) {
        }
    }
    

    コンボのアイテムのリストがコンポーネントのホストに適切にレンダリングされます。つまり、カスタムテーマが有効になります。

    オーバーレイのスタイル設定

    ViewEncapsulation がオーバーレイの outlet プロパティとどのように連携するかを説明しました。次にオーバーレイ ラッパー自体のスタイルを設定する方法を示します。 igx-overlay-theme は、単一のプロパティ - $background-color を公開します。これは、オーバーレイが modal: true に設定されている場合、背景の色に影響します。

    グローバル スタイル

    オーバーレイ モーダルをスタイル設定する最も簡単な方法は、アプリのグローバル スタイルにテーマを含める方法です。

    //  styles.scss
    $my-overlay-theme: igx-overlay-theme(
      $background-color: rgba(0, 153, 255, 0.3)
    );
    
    @include igx-css-vars($my-overlay-theme);
    

    テーマの $legacy-support 変数が true に設定されている場合、オーバーレイのテーマ関数を使用してコンポーネントをスタイル設定します。

    // styles.scss
    ...
    @include igx-overlay($my-overlay-theme);
    

    これで、すべてのモーダル オーバーレイの背景が紫色になります。

    スコープ オーバーレイ スタイル

    特定のコンポーネントの下にのみ特定の背景をオーバーレイに表示したい場合は、テーマをスコープできます。モーダル オーバーレイをスコープする場合、オーバーレイ アウトレットを移動する必要がありますが、これにはいくつかの制限があります。 オーバーフロークリッピング、z-index、およびビューポートの問題のリスクを最小限に抑えるために、より高いレベルのコンポーネントでのみモーダルオーバーレイのアウトレットを使用することをお勧めします。

    //  styles.scss
    ...
    .purple {
        @include igx-css-vars($my-overlay-theme);
    }
    

    テーマがアプリの他のコンポーネントに影響を与えないように、:host セレクターを使用します。

    // overlay-styling.component.scss
    @use "igniteui-angular/theming" as *;
    
    // 重要: Ignite UI for Angular 13 より前のバージョンは、次を使用してください。
    // @import '~igniteui-angular/lib/core/styles/themes/index';
    ...
    :host {
        @include igx-css-vars($my-overlay-theme);
    }
    
    Note

    コンポーネントが Emulated ViewEncapsulation を使用していて、$legacy-supporttrue に設定されている場合、オーバーレイのテーマ関数を使用して ::ng-deep によってこのカプセル化をペネトレーションします

    API リファレンス

    その他のリソース