グローバル テーマ

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

概要

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

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

igx-core

名前 デフォルト 説明
$print-layout boolean true 印刷にスタイルを含めるか除外します。
$direction Keyword ltr すべてのコンポーネントのコンテンツの向きを指定します。 ltr または rtl に指定できます。

igx-theme

名前 デフォルト 説明
$palette map 未定義 パレット マップは、すべてのコンポーネントのデフォルト テーマで使用されます。
$schema map $light-schema コンポーネントのスタイル設定に基づいて使用されるスキーマ。
$exclude list ( ) グローバル テーマから除外されるコンポーネント テーマのリスト。
$legacy-support boolean false テーマ設定の方法を決定 - true の場合、テーマはハードコーディングされた値で設定されます。
$roundness Number null すべてのコンポーネントのグローバルな丸み係数 (値は0〜1の任意の小数にすることができます) を設定します。
$elevation boolean true エレベーションが構成されたコンポーネントのグローバル エレベーションを設定します。

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

// 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
);

//重要: 必ず最初に igx-core を含めてください。
@include igx-core();
//生成したカラーパレットを 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 要素が推奨されます。

使用可能なテーマ

Ignite UI for Angular には、事前定義されたテーマのセットから選択するオプションがあります。 以下の表では、すぐに使用できるすべての定義済みテーマを示します。

テーマ Mixin スキーマ カラーパレット 利用可能バージョン
Material (base) igx-theme() $light-schema $default-palette all
Material (light) igx-light-theme() $light-schema $default-palette 6.2 +
Material (dark) igx-dark-theme() $dark-schema $dark-palette 6.2 +
Fluent igx-fluent-theme() $light-fluent-schema $fluent-excel-palette
$fluent-word-palette
8.2 +
Fluent (dark) igx-fluent-dark-theme() $dark-fluent-schema $fluent-excel-dark-palette
$fluent-word-dark-palette
8.2 +
Bootstrap igx-bootstrap-theme() $light-bootstrap-schema $bootstrap-palette 9.0 +
Bootstrap (dark) igx-bootstrap-dark-theme() $dark-bootstrap-schema $bootstrap-dark-palette 9.0 +
Note

すべてのハイレベルなテーマ mixin は、基本の igx-theme mixin をラップすることに注意してください。

すべてのテーマ mixin は、独自のテーマを作成するための開始ポイントとして使用できます。igx-bootstrap-theme mixin を使用して、新しいテーマを作成しましょう。

//最初に Ignite UI テーマ ライブラリをインポートします。
@import '~igniteui-angular/lib/core/styles/themes/index';

$primary-color: #b71053;
$secondary-color: #6c757d; 

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

//重要: 必ず最初に igx-core を含めてください。
@include igx-core();
//生成したカラーパレットを igx-bootstrap-theme mixin に渡します。
@include igx-bootstrap-theme($my-color-palette);

ブラウザー サポート

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

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

API の概要

その他のリソース

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

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