グローバル テーマ
概要
アプリケーション プロジェクトに igniteui-angular.css ファイルを追加した場合、削除してください。my-app-theme.scss ファイルを使用してアプリケーションのすべてのコンポーネント用にグローバル テーマを生成します。
Ignite UI for Angular は、コンポーネント全体のテーマにグローバル テーマをデフォルトで使用します。アプリでユース ケースに合わせてコンポーネントにスコープしたテーマを作成できます。ここでは 1 ファイルにすべてのテーマを含みます。
グローバル テーマの生成には 2 つのミックスイン core と theme を含みます。両方のミックスインは数個の引数を受け取ります。
core
| 名前 | タイプ | デフォルト設定 | 説明 |
|---|---|---|---|
$print-layout |
boolean | true | 印刷にスタイルを含めるか除外します。 |
$enhanced-accessibility |
boolean | false | コンポーネントの色およびその他のプロパティをアクセスしやすい値に切り替えます。 |
theme
| 名前 | タイプ | デフォルト設定 | 説明 |
|---|---|---|---|
$palette |
map | null | パレット マップは、すべてのコンポーネントのデフォルト テーマで使用されます。 |
$schema |
map | $light-schema | コンポーネントのスタイル設定に基づいて使用されるスキーマ。 |
$exclude |
list | ( ) | グローバル テーマから除外されるコンポーネント テーマのリスト。 |
$legacy-support |
boolean | false |
テーマ設定の方法を決定 - true に設定し、テーマはハード値で設定します。 |
$roundness |
Number | null | すべてのコンポーネントのグローバルな丸み係数 (値は 0〜1 の任意の小数にすることができます) を設定します。 |
$elevation |
boolean | true |
テーマのすべてのコンポーネントのエレベーションのオン/オフを切り替えます。 |
$elevations |
Map | true |
すべてのコンポーネント テーマで使用されるエレベーション マップ。 |
企業のプライマリおよびセカンダリの色を使用するカスタム グローバル テーマを作成します。
// テーマ モジュールをインポートします
@use "igniteui-angular/theming" as *;
// 重要: Ignite UI for Angular 13 より前のバージョンは、次を使用してください。
// @import '~igniteui-angular/lib/core/styles/themes/index';
$primary-color: #2ab759;
$secondary-color: #f96a88;
$my-color-palette: palette(
$primary: $primary-color,
$secondary: $secondary-color
);
// 重要: 必ず最初に core を含めてください。
@include core();
// Add the typography styles before the main theme.
@include typography();
// 生成したカラー パレットを theme ミックスインに渡します.
@include theme($my-color-palette);
core および theme ミックスインの機能を説明します。core ミックスインは、方向、アクセシビリティ、可変コンポーネントの印刷スタイルの追加など、グローバル テーマ構成を処理します。theme は、$default-palette グローバル変数を渡すパレットに設定します。また、グローバル変数 $igx-legacy-support を $legacy-support の値に設定します。theme ミックスインは、コンポーネントの $exclude リストに載っていない各コンポーネント スタイルも含みます。
Important
theme の前に core と typography を含める必要があります。core ミックスインは theme の基本定義を提供します。
コンポーネントの除外
theme ミックスインは、グローバル テーマ スタイルから除外されるコンポーネント名のリストを提供します。たとえば、igx-avatar および igx-badge に含まれるすべてのスタイルを完全に削除したい場合は (生成される CSS の量を減らすか、独自のカスタム スタイルを提供する場合)、以下のようなコンポーネントのリストを渡すことで可能です。
// ...
$unnecessary: (igx-avatar, igx-badge);
@include theme($my-color-palette, $exclude: $unnecessary);
アプリが一部のコンポーネントを使用しない場合は、$exclude リストに追加することをお勧めします。
逆を行うことができます - 以下の方法を使用して、必要なコンポーネント スタイルのみを含めます。
@function include($items, $register) {
@return map-keys(map-remove($register, $items...));
}
$allowed: (igx-avatar, igx-badge);
@include theme(
$exclude: include($allowed, $components)
);
明暗テーマ (Light/Dark)
theme ミックスインに加えグローバル テーマ ミックスインを追加しました。明暗テーマのブート ストラップにグローバル テーマ ミックスインが含まれます。これらのミックスイン は igx-light-theme と dark-theme です。
明暗テーマを作成する方法を示すショーケースです。
.light-theme {
@include light-theme($light-material-palette);
}
.dark-theme {
background: #333;
color: #fff;
@include dark-theme($light-material-palette);
}
理想的には、アプリケーション DOM ツリーの上位要素に .light-theme または .dark-theme クラスを設定します。app-root 要素が適切です。
使用可能なテーマ
Ignite UI for Angular には、事前定義されたテーマのセットから選択するオプションがあります。 以下の表では、すぐに使用できるすべての定義済みテーマを示します。
| テーマ | ミックスイン | スキーマ | カラー パレット | 利用可能バージョン |
|---|---|---|---|---|
| Material (base) | theme() | $light-schema |
$default-palette | すべて |
| Material (light) | igx-light-theme() | $light-material-schema |
$light-material-palette | 6.2 + |
| Material (dark) | dark-theme() | $dark-material-schema |
$dark-material-palette | 6.2 + |
| Fluent | fluent-light-theme() | $light-fluent-schema |
$light-fluent-excel-palette $light-fluent-word-palette |
8.2 + |
| Fluent (dark) | fluent-dark-theme() | $dark-fluent-schema |
$dark-fluent-excel-palette $dark-fluent-word-palette |
8.2 + |
| Bootstrap | bootstrap-light-theme() | $light-bootstrap-schema |
$light-bootstrap-palette | 9.0 + |
| Bootstrap (dark) | bootstrap-dark-theme() | $dark-bootstrap-schema |
$dark-bootstrap-palette | 9.0 + |
| Indigo | indigo-light-theme() | $light-indigo-schema |
$light-indigo-palette | 10.1 + |
| Indigo (dark) | indigo-dark-theme() | $dark-indigo-schema |
$dark-indigo-palette | 10.1 + |
Note
すべてのハイレベルなテーマ ミックスインは、基本の theme ミックスインをラップすることに注意してください。
すべてのテーマ ミックスインは、独自のテーマを作成するための開始ポイントとして使用できます。igx-bootstrap-theme ミックスインを使用して、新しいテーマを作成しましょう。
// テーマ モジュールをインポートします
@use "igniteui-angular/theming" as *;
// 重要: Ignite UI for Angular 13 より前のバージョンは、次を使用してください。
// @import '~igniteui-angular/lib/core/styles/themes/index';
$primary-color: #b71053;
$secondary-color: #6c757d;
$my-color-palette: palette(
$primary: $primary-color,
$secondary: $secondary-color
);
// 重要: 必ず最初に core を含めてください。
@include core();
// Pass the color palette we generated to the bootstrap-theme mixin
@include bootstrap-light-theme($my-color-palette);
ブラウザー サポート
Ignite UI for Angular 13 より前のバージョンでは、$igx-legacy-support の値が、コンポーネントのテーマの動作を決定するため大変重要です。値を true に設定した場合、各コンポーネントのスタイルのルールの値はビルド時にテーマで定義されたハードコーディングされた値に設定されます。$igx-legacy-support の値を false に設定した場合も、スタイル ルールは :root スコープまたは一番近いブロックのスコープで定義された CSS 変数を検索します。
$legacy-support の値を設定する一般的なルールは、Internet Explorer 11 をサポートするかどうかによって決定されます。IE11 をサポートする場合、$legacy-support 値を true に設定します。それ以外の場合、値を false (デフォルト) に設定すると、テーマで CSS 変数が必要です。IE11 以前のブラウザーのサポートは、Ignite UI for Angular 13 で削除されました。
API の概要
その他のリソース
各コンポーネント テーマの作成する方法:
コミュニティに参加して新しいアイデアをご提案ください。
GitHub