グローバル テーマ

グローバル テーマは、カスタム カラー パレットを使用するテーマをすばやく生成します。カラー パレットは、コンポーネント専用に作成されたカスタム テーマを持たないすべてのコンポーネントにプロパゲートされます。

概要

アプリケーション プロジェクトに igniteui-angular.css ファイルを追加した場合、削除してください。My-app-theme.scss ファイルを使用してアプリケーションのすべてのコンポーネント用にグローバル テーマを生成します。

Ignite UI for Angular は、コンポーネント全体のテーマにグローバル テーマをデフォルトで使用します。アプリでユース ケースに合わせてコンポーネントにスコープしたテーマを作成できます。ここでは 1 ファイルにすべてのテーマを含みます。グローバル テーマを生成するために 2 つの mixins igx-coreigx-theme を含みます。igx-core は引数を受け取りません。igx-theme は数個受け取ります。

名前 デフォルト 説明
$palette map undefined パレット マップは、すべてのコンポーネントのデフォルト テーマで使用されます。
$schema map $light-schema コンポーネントのスタイル設定に基づいて使用されるスキーマ。
$exclude list ( ) グローバル テーマから除外されるコンポーネント テーマのリスト。
$legacy-support boolean true テーマ設定の方法を決定 - false に設定し、テーマは CSS 変数で設定します。

企業のプライマリおよびセカンダリの色を使用するカスタム グローバル テーマを作成します。

// Import the IgniteUI themes library first
@import '~igniteui-angular/lib/core/styles/themes/index';

$primary-color: #2ab759; // Some green shade I like
$secondary-color: #f96a88; // Watermelon pink

$my-color-palette: igx-palette(
    $primary: $primary-color,
    $secondary: $secondary-color
);

// IMPORTANT: Make sure you always include igx-core first!
@include igx-core();
// Pass the color palette we generated to the igx-theme mixin
@include igx-theme($my-color-palette);

次に igx-coreigx-theme mixins について説明します。igx-core mixin は、グローバル エレベーション、グローバル タイポグラフィなどすべての必須パーツを読み込みます。igx-theme は、グローバル変数 $default-palette をパレット マップに設定します。また、グローバル変数 $igx-legacy-support$legacy-support の値に設定します。igx-theme mixin は、コンポーネントの $exclude リストに載っていない各コンポーネント スタイルも含みます。

Important

igx-theme の前に igx-core を含むと効果的です。igx-coreigx-theme に必要なすべての基本定義を提供します。

コンポーネントの除外

igx-theme mixin は、グローバル テーマ スタイルから除外されるコンポーネント名のリストを提供します。例えば、igx-avatar および igx-badge に含まれるすべてのスタイルを完全に削除してカスタム スタイルを提供したい場合、コンポーネントのリストを渡して達成することができます。

// ...
$unnecessary: (igx-avatar, igx-badge);

@include igx-theme($my-color-palette, $exclude: $unnecessary);

更にアプリで使用しないコンポーネントがある場合、$exclude のリストに追加して生成される CSS のサイズを縮小することができます。

Light と Dark テーマ

Igx-theme mixin に加えグローバル テーマ mixins を追加しました。light および dark テーマのブート ストラップにグローバル テーマ mixins が含まれます。これらの mixins は igx-light-themeigx-dark-theme です。

以下は light と dark テーマを作成する方法を示すショーケースです。

.light-theme {
    @include igx-light-theme($default-palette);
}

.dark-theme {
    background: #333;
    color: #fff;

    @include igx-dark-theme($default-palette);
}

アプリケーション DOM ツリーの上位にある .light-theme.dark-theme の CSS クラスを適用し、app-root 要素が推奨されます。

Material から Fluent テーマへの切り替え

バージョン 8.2 以降、インフラジスティックスのコンポーネントでは、Microsoft フルーエント デザイン システムに基づいて構築された新しいテーマをサポートします。
マテリアルからフルーエントへ切り替えるには、新しく作成された mixins の 1 つを使用する必要があります。

Excel パレットを使用したフルーエント テーマwhite バージョンの場合、以下のコードを使用します。

// Replace
@include igx-theme($default-palette);
// With     
@include igx-fluent-theme($fluent-excel-palette);

Excel パレットを使用したフルーエント テーマDark バージョンの場合、以下のコードを使用します。

// replace
@include igx-dark-theme($default-palette);
// With 
@include igx-fluent-dark-theme($fluent-excel-palette);

また、Microsoft word パレットを追加しました。使用するには、$fluent-excel-palette$fluent-word-palette に置き換えるだけです。

// for the white version    
@include igx-fluent-theme($fluent-word-palette);

// for the dark version
@include igx-fluent-dark-theme($fluent-word-palette);

ブラウザー サポート

$igx-legacy-support の値は、コンポーネントのテーマが動作する方法を決定するため大変重要です。値を true に設定した場合、各コンポーネント スタイルのルールの値がビルド時にテーマで定義されたハード値に設定されます。$igx-legacy-support の値をfalse に設定した場合もスタイル ルールは :root スコープまたは一番近いブロック スコープで定義された CSS 変数を検索します。

一般的なルールは、Internet Explorer 11 をサポートするかどうかに基づいて $legacy-support の値を設定します。IE11 をサポートする場合、$legacy-support 値を true (デフォルト) に設定します。それ以外の場合、値を false に設定すると、テーマで CSS 変数が必要です。

API

その他のリソース

コンポーネント テーマの作成方法:

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