コンポーネントテーマ

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

概要

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 theme(...);

// Change the background of the avatar to purple.
$avatar-purple-theme: avatar-theme(
  $background: purple,
);

// Pass the css-vars to the `css-vars` mixin
@include css-vars($avatar-purple-theme);

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

次に例を示します。

// ...
@include css-vars($avatar-purple-theme);

// Later
$avatar-royalblue-theme: avatar-theme(
  $background: royalblue,
);

@include css-vars($avatar-royalblue-theme);

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

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

テーマのスコープ

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

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

.avatar-purple {
  @include css-vars($avatar-purple-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 the theming module
@use "igniteui-angular/theming" as *;

// !IMPORTANT: Prior to Ignite UI for Angular version 13 use:
// @import '~igniteui-angular/lib/core/styles/themes/index';

$avatar-royalblue-theme: avatar-theme(
  $background: royalblue,
);

:host {
  @include css-vars($avatar-royalblue-theme);
}

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

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

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

古いブラウザーの場合

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

グローバルテーマの使用

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

// Import the theming module
@use "igniteui-angular/theming" as *;

// !IMPORTANT: Prior to Ignite UI for Angular version 13 use:
// @import '~igniteui-angular/lib/core/styles/themes/index';

@include core();
@include theme($palette: $default-palette, $legacy-support: true);

// Overwrite the default themes for igx-avatar using hard-coded values:
$avatar-royalblue-theme: avatar-theme(
  $background: royalblue,
);

@include avatar($avatar-royalblue-theme);

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

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

// Import the theming module
@use "igniteui-angular/theming" as *;

// !IMPORTANT: Prior to Ignite UI for Angular version 13 use:
// @import '~igniteui-angular/lib/core/styles/themes/index';

// Enable legacy support first.
// !IMPORTANT: Only applicable for versions older than Ignite UI for Angular 13.
$igx-legacy-support: true;
$avatar-royalblue-theme: avatar-theme(
  $initials-background: royalblue,
);

:host ::ng-deep {
  @include avatar($avatar-royalblue-theme);
}

API の概要

その他のリソース

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

グローバルテーマ

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

コンポーネント テーマ

概要