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

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

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

<!-- 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: drop-down-theme(
  $background-color: #efefef
);

:host {
  @include tokens($my-drop-down-theme);
}

グローバル スタイルはスコープされたルール下では生成されず、カプセル化の影響も受けないため、サービスがオーバーレイ アウトレットに移動した igx-drop-down-item など、ページ上の任意の要素と一致できます。

スコープ コンポーネント スタイル

オーバーレイに表示される要素のスタイルをスコーピングする際に DOM のオーバーレイ アウトレットの位置を指定する必要があります。スコープが設定された CSS ルールには、要素の特定の階層構造が必要です - オーバーレイ コンテンツが、適用するスタイルの正しいコンテキストで表示されることを確認してください。

たとえば、igx-combo を取り上げます。コンボは独自のビュー内でコンテンツを定義するため、項目のスタイル設定は igx-drop-down テーマを使用します。

// overlay-styling.component.scss

:host {
  @include tokens($my-drop-down-theme);
}

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

コンボのリスト内項目は、コンポーネント ホストの子孫ではありません。現在、ドキュメント本体の最後にあるデフォルトのオーバーレイ アウトレットに表示されています。変更するには、overlaySettings の OverlaySettings.outlet プロパティを使用します。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 プロパティとどのように連携するかを説明しました。次にオーバーレイ ラッパー自体のスタイルを設定する方法を示します。 overlay-theme は、単一のプロパティ - $background-color を公開します。これは、オーバーレイが modal: true に設定されている場合、背景の色に影響します。

グローバル スタイル

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

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

:host {
  @include tokens($my-overlay-theme);
}

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

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

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

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

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

API リファレンス

• IgniteUI for Angular - テーマ ライブラリ
• IgxOverlay スタイル

その他のリソース

• IgniteUI for Angular - テーマ ライブラリ
• オーバーレイ メイン トピック
• 配置ストラテジ
• スクロール ストラテジ