テーマ

Ignite UI for Angular を使用すると、CSS 変数を使用してすべてのコンポーネント テーマのスタイルを変更できます。本当に深く掘り下げたい場合は、強力な Sass テーマ エンジンを提供します。これにより、特定のデザイン言語に合わせた、最新のすべてのブラウザーで機能するグローバル コンポーネント テーマを作成できます。

基本的な使用方法

Ignite UI for Angular には、パッケージの一部として次のテーマが含まれています:

• Material
• Bootstrap
• Fluent
• Indigo

すべてのテーマには、ライト バリエーションとダーク バリエーションがあり、デフォルトで左から右 (LTR) および右から左 (RTL) のコンテンツがサポートされています。アプリケーションでバンドルされているテーマの使用を開始する最も簡単な方法は、angular.json 構成で CSS テーマ ファイルへのパスを指定することです。たとえば、ダーク マテリアル テーマを使用する場合は、次のようにテーマ ファイルへのパスを含めます:

"styles": [
  "node_modules/igniteui-angular/styles/igniteui-angular-dark.css",
  "src/styles.css"
]

styles フォルダーに含まれるテーマの完全なリストは次のとおりです:

ご覧のとおり、かなりの量のテーマを備えた Ignite UI for Angular を提供しています。

ただし、これでテーマの話は終わりではありません。すべてのテーマは Sass ソースからコンパイルされ、強力なテーマ エンジンを使用して構築されています。このエンジンには Sass の mixins と functions が含まれており、その多くは公開されているため、アプリケーションのすべてのコンポーネントを完全に再設計できます。

Sass が適切でない場合は、カスタム CSS プロパティ、または CSS 変数として知られているものを使用してコンパイルされたテーマを簡単に変更できるようにしました。Sass を CSS 変数と組み合わせて使用することもできます。

グローバル変数

上記の CSS テーマのいずれかを調べると、:root ルール スコープにかなりの数の CSS 変数が含まれていることがわかります。colors、shadows、typography、および configuration の変数が含まれています。これらの変数のいずれかを変更すると、テーマの全体的なルック アンド フィールをカスタマイズでき、逆にコンポーネントをカスタマイズできます。

テーマを変更するときにほとんどの人が探しているのは、コンポーネントで使用されるデフォルト カラーを変更することです。

プライマリ カラーとセカンダリ カラーを変更したい場合は、styles.css ファイルに次のように入力するだけです。

/* styles.css */
:root {
  --ig-primary-500: #09f;
  --ig-secondary-500: red;
  --ig-surface-500: rgb(221 211 211);
}

これらのカラー変数の名前を分解してみましょう。ig プレフィックスは、この変数が Ignite UI for Angular テーマの一部であることを示す一意の識別子として存在し、primary はカラー変数名、500 はカラーのバリエーションを表します。ドキュメントのパレット セクションでパレットについて詳しく見ていきます。今のところ知っておく必要があるのは、メインのカラー バリエーションから生成されるさまざまな色合いまたはバリアントを含む、いくつかの基本カラー変数 (primary、secondary、surface、success、info など) があることだけです。上記の例で設定した 500 カラー バリエーションはメイン変数カラーと見なされ、指定されたカラー変数の他のすべてのバリアントは 500 バリアントから生成されます。

これらのバリエーションを変更すると、パレット全体を完全に見直すことができます。

同様に、エレベーション (シャドウ) の変更も同様に簡単です。25 のエレベーション レベル (0〜24) が含まれています。 これらの変数がどのように見えるかを簡略化したバージョンを次に示します。

/* styles.css */
:root {
  --ig-elevation-0: none;
  --ig-elevation-1: 0 1px 3px 0 rgba(0, 0, 0, 0.26),
                    0 1px 1px 0 rgba(0, 0, 0, 0.12),
                    0 2px 1px -1px rgba(0, 0, 0, 0.08);
  /* ... */
  --ig-elevation-24: 0 11px 15px -7px rgba(0, 0, 0, 0.26),
                  0 24px 38px 3px rgba(0, 0, 0, 0.12),
                  0 9px 46px 8px rgba(0, 0, 0, 0.08);
}

これらは基本的に積層された CSS box-shadow 宣言です。それらを他の有効な box-shadow 値に置き換えることができます。エレベーション レベルの数値が高いほど、シャドウが大きくなります。この場合も、コンポーネントごとに異なるエレベーション レベルが使用されます。コンポーネントが使用するエレベーション レベルを確認するには、コンポーネントのドキュメントを参照してください。ドキュメントのエレベーションでエレベーションを詳しく見ていきます。

構成

テーマのグローバルな動作を構成できる変数がいくつかあります:

丸み

すべてのコンポーネントの半径係数を構成するには、--ig-radius-factor 変数の値を変更できます。デフォルト値は 1 です。これは、コンポーネント テーマ全体でデフォルトの半径係数が使用されることを意味します。

例:

/* Makes all components appear blocky in shape */
:root {
  --ig-radius-factor: 0;
}

エレベーション係数

すべてのコンポーネントのエレベーション係数を構成するには、--ig-elevation-factor 変数の値を変更できます。デフォルト値は 1 です。これは、コンポーネント テーマ全体でデフォルトのエレベーションが使用されることを意味します。

例:

/* Makes all components appear flat (no-shadows) */
:root {
  --ig-elevation-factor: 0;
}

コンポーネント変数

すべてのコンポーネントは、コンポーネント固有の CSS 変数を使用してテーマを変更する機能を提供します。各コンポーネントは、同じプロパティを変更する 2 つの変数を公開します。公開された変数は、global および local と考えることができます。どちらも同じ方法でコンポーネントのテーマを変更します。唯一の違いは、global 変数には igx-[component-name] プレフィックスが変数名に付加されており、親セレクターから子コンポーネントのスタイルを設定するために使用できますが、local 変数は、コンポーネント インスタンスに固有です。

例を見てみましょう。アバターの背景を変更したいとします。アバターは、背景を変更する次の CSS 変数を探します。

/* styles.css */
:root {
  --ig-avatar-background: black;
}

igx-avatar {
  --background: orange;
}

上記のスニペットは、すべてのアバターの背景を orange カラーに設定します。

アバター コンポーネントは、最初に --background 変数を探します。明示的に設定されている場合は、その値を取ります。つまり、local 変数の優先度は高く、タグ セレクターまたは igx-avatar をターゲットとするその他のセレクターを使用して、igx-avatar に直接適用された場合にのみ機能します。 グローバル --ig-avatar-background はフォールバック変数と考えることができます。ローカルの --background が明示的にオーバーライドされていない場合にのみ使用されます。

好奇心旺盛な方のために、これがアバターの内部でどのように実装されているかを次に示します:

igx-avatar {
  --background: var(--ig-avatar-background, var(--ig-gray-400));
  background: var(--background);
}

通常、コンポーネントのすべてのインスタンスに変更を適用する場合は global 変数を使用しますが、local 変数は特定のコンポーネント インスタンスを対象とし、常にグローバル変数をオーバーライドします。

次の例を見てみましょう。

<!-- app.component.html -->
<igx-avatar>AB</igx-avatar>
<igx-avatar>CD</igx-avatar>
<app-contacts></app-contacts>

<!-- contacts.component.html -->
<igx-avatar>EF</igx-avatar>
<igx-avatar>GH</igx-avatar>

/* styles.css */
:root {
  --ig-avatar-background: lavender;
}

/* contacts.component.css */
igx-avatar {
  --background: purple;
}

アバター AB と CD は、グローバルに設定された lavender カラーを背景として使用しますが、アバター EF と GH は purple 背景を持ちます。

各コンポーネントには、コンポーネント ドキュメントのスタイル セクションにすべてのテーマ プロパティが記載されています。

テーマ設定を開始するために必要なのはこれだけです。グローバルおよびローカル コンポーネント テーマを作成することにより、グローバル パレットのカラー、高さを変更したり、コンポーネント テーマのプロパティを変更したりできます。詳細を知りたい場合は、パレット、エレベション、タイポグラフィ、Sass を使用したテーマなどのトピックをご覧ください。

その他のリソース

関連トピック:

• パレット
• エレベーション
• タイポグラフィ
• Sass のテーマ

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

• Ignite UI for Angular フォーラム (英語)
• Ignite UI for Angular GitHub (英語)