テーマ

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

    Note

    このドキュメントでは、バージョン 12 以降の Ignite UI for Angular のテーマ システムについて説明します。バージョン 12 以降、CSS 変数は、グローバルおよびコンポーネント テーマを変更するための推奨される方法です。 バージョン 12 より前のバージョンと同様に、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"
]
    Note

    ng add igniteui-angular パッケージをインストールした場合は、すでに igniteui-angular.css が styles 配列に追加されていることに気付くでしょう。

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

    テーマ名 パス
    Material Light node_modules/igniteui-angular/styles/igniteui-angular.css
    Material Dark node_modules/igniteui-angular/styles/igniteui-angular-dark.css
    Bootstrap Light node_modules/igniteui-angular/styles/igniteui-bootstrap-light.css
    Bootstrap Dark node_modules/igniteui-angular/styles/igniteui-bootstrap-dark.css
    Material Dark Green node_modules/igniteui-angular/styles/igniteui-dark-green.css
    Fluent Light node_modules/igniteui-angular/styles/igniteui-fluent-light.css
    Fluent Dark node_modules/igniteui-angular/styles/igniteui-fluent-dark.css
    Fluent Light Excel node_modules/igniteui-angular/styles/igniteui-fluent-light-excel.css
    Fluent Dark Excel node_modules/igniteui-angular/styles/igniteui-fluent-dark-excel.css
    Fluent Light Word node_modules/igniteui-angular/styles/igniteui-fluent-light-word.css
    Fluent Dark Word node_modules/igniteui-angular/styles/igniteui-fluent-dark-word.css
    Indigo Light node_modules/igniteui-angular/styles/igniteui-indigo-light.css
    Indigo Dark node_modules/igniteui-angular/styles/igniteui-indigo-dark.css

    ご覧のとおり、かなりの量のテーマを備えた 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-h: 105deg;
  --ig-primary-s: 29%;
  --ig-primary-l: 56%;

  --ig-secondary-h: 259deg;
  --ig-secondary-s: 63%;
  --ig-secondary-l: 24%;
}

    これらのカラー変数の名前を分解してみましょう。ig プレフィックスは、この変数が Ignite UI for Angular テーマの一部であることを示す一意の識別子としてあり、primary は color パレットの名前であり、h、s、および l 色相、彩度、明度です。ドキュメントの パレット セクションでパレットについて詳しく見ていきます。今のところ知っておく必要があるのは、色相、彩度、および明度の CSS 変数からすべて生(成されるさまざまな色合いまたは variants を含むいくつかの基本色 (primary、secondary、success、info など) があることだけです。500 のカラー バリエーションは、色相、彩度、および明度の主要な表現値と見なされます。たとえば、プライマリ 500 カラー バリアントは --ig-primary-500: hsla(var(--ig-primary-h), var(--ig-primary-s), var(--ig-primary-l), var(--ig-primary-a)) として宣言されます。

    このアプローチに従うと、パレット全体を完全に見直すことができます。

    Warning

    一部のコンポーネントは、パレットのカラーを使用しません。そのような場合、カラーを変更するには、コンポーネントの CSS 変数を直接ターゲットにする必要があります。 どのパレットのカラーがどのコンポーネントで使用されているかを確認するには、コンポーネントのドキュメントを参照してください。

    同様に、エレベーション (シャドウ) の変更も同様に簡単です。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 {
  --igx-avatar-background: black;
}

igx-avatar {
  --background: orange;
}

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

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

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

    igx-avatar {
  --background: var(--igx-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 {
  --igx-avatar-background: lavender;
}

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

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

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

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

    その他のリソース

    関連トピック:

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