オーバーレイ スタイリング
IgxOverlayService は、ページ コンテンツの上にコンテンツを表示するために使用されます。Ignite UI for Angular コンポーネントの多くは、ドロップダウン、コンボ、日付ピッカーなどのオーバーレイを使用しているため、オーバーレイがコンテンツを表示する方法を理解することが重要です。
他の要素上にコンテンツを表示するために、サービスはコンテンツを特別なアウトレット コンテナーに移します (デフォルトではドキュメントの本文の最後にアタッチされています)。この動作は、特定のコンテナーにスコープされた スタイルに影響を与える可能性があります。
オーバーレイ コンポーネントのスタイル設定
ほとんどの場合、グローバル テーマのスタイルはオーバーレイ アウトレットの影響を受けません。例として、グローバル css-vars ミックスインでスタイル設定されたドロップダウンを見てみましょう。
<!-- 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(
$palette: $my-custom-palette
);
@include css-vars($my-drop-down-theme);
グローバル スタイルはスコープされたルール下では生成されず、カプセル化の影響も受けないため、サービスがオーバーレイ アウトレットに移動した igx-drop-down-item など、ページ上の任意の要素と一致できます。
スコープ コンポーネント スタイル
オーバーレイに表示される要素のスタイルをスコーピングする際に DOM のオーバーレイ アウトレットの位置を指定する必要があります。スコープが設定された CSS ルールには、要素の特定の階層構造が必要です - オーバーレイ コンテンツが、適用するスタイルの正しいコンテキストで表示されることを確認してください。
たとえば、igx-combo を取り上げます。コンボは独自のビュー内でコンテンツを定義するため、項目のスタイル設定は igx-drop-down テーマを使用します。
Note
スタイルが他に影響しないようにするには、スタイルのスコープを :host セレクター内にしてください。
// overlay-styling.component.scss
:host {
@include css-vars($my-drop-down-theme);
}
テーマの $legacy-support 変数が true に設定されている場合、コンポーネントのテーマ関数を使用してスタイル設定します。
Note
コンポーネントが Emulated ViewEncapsulation を使用している場合、::ng-deep を使用してこのカプセル化を解除する必要があります。
// overlay-styling.component.scss
:host {
::ng-deep{
@include drop-down($my-drop-down-theme);
}
}
コンボのリスト内項目は、コンポーネント ホストの子孫ではありません。現在、ドキュメント本文の最後にあるデフォルトのオーバーレイ アウトレットに表示されています。変更するには、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)
);
@include css-vars($my-overlay-theme);
テーマの $legacy-support 変数が true に設定されている場合、オーバーレイのテーマ関数を使用してコンポーネントをスタイル設定します。
// styles.scss
...
@include overlay($my-overlay-theme);
これで、すべてのモーダル オーバーレイの背景が紫色になります。
スコープ オーバーレイ スタイル
特定のコンポーネントの下にのみ特定の背景をオーバーレイに表示したい場合は、テーマをスコープできます。モーダル オーバーレイをスコープする場合、オーバーレイ アウトレットを移動する必要がありますが、これにはいくつかの制限があります。 オーバーフロークリッピング、z-index、およびビューポートの問題のリスクを最小限に抑えるために、より高いレベルのコンポーネントでのみモーダルオーバーレイのアウトレットを使用することをお勧めします。
// styles.scss
...
.purple {
@include 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 css-vars($my-overlay-theme);
}
Note
コンポーネントが Emulated ViewEncapsulation を使用していて、$legacy-support が true に設定されている場合、オーバーレイのテーマ関数を使用して ::ng-deep によってこのカプセル化を解除します。
API リファレンス
その他のリソース
GitHub