グローバル テーマ
概要
アプリケーション プロジェクトに 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-material-schema |
コンポーネントのスタイル設定に基づいて使用されるスキーマ。 |
$exclude |
list | () | グローバル テーマから除外されるコンポーネント テーマのリスト。 |
$roundness |
Number | 1 | すべてのコンポーネントのグローバルな丸み係数 (値は 0〜1 の任意の小数にすることができます) を設定します。 |
$elevation |
boolean | true |
テーマのすべてのコンポーネントのエレベーションのオン/オフを切り替えます。 |
$elevations |
Map | $material-elevations |
すべてのコンポーネント テーマで使用されるエレベーション マップ。 |
企業のプライマリおよびセカンダリの色を使用するカスタム グローバル テーマを作成します。
// Import the theming module
@use "igniteui-angular/theming" as *;
// IMPORTANT: Prior to Ignite UI for Angular version 13 use:
// @import '~igniteui-angular/lib/core/styles/themes/index';
$primary-color: #2ab759;
$secondary-color: #f96a88;
$my-color-palette: palette(
$primary: $primary-color,
$secondary: $secondary-color
);
// IMPORTANT: Make sure you always includecore first!
@include core();
// Add the typography styles before the main theme.
@include typography();
// Pass the color palette we generated to thetheme mixin.
@include theme($my-color-palette);
core と theme ミックスインが何をするか説明しましょう。core ミックスインは、強化されたアクセシビリティ (色弱ユーザーに適した色など) やすべてのコンポーネントの印刷スタイルの追加など、いくつかの構成を処理します。theme ミックスインには、個々のコンポーネント スタイル (除外リストにあるものを除く) が含まれ、コンポーネントの $exclude リストにリストされていないパレット、スキーマ、エレベーション、および丸みを構成します。
Important
theme の前に core と typography を含めることが不可欠です。core および typography ミックスインは、theme ミックスインが正しく機能するために必要なすべての基本定義を提供します。
コンポーネントの除外
theme ミックスインは、グローバル テーマ スタイルから除外されるコンポーネント名のリストを提供します。たとえば、igx-avatar および igx-badge に含まれるすべてのスタイルを完全に削除したい場合は (生成される CSS の量を減らすか、独自のカスタム スタイルを提供する場合)、以下のようなコンポーネントのリストを渡すことで可能です。
// ...
$unnecessary: (igx-avatar, igx-badge);
@include theme($my-color-palette, $exclude: $unnecessary);
アプリが一部のコンポーネントを使用しない場合は、$exclude リストに追加することをお勧めします。
逆を行うことができます - 以下の方法を使用して、必要なコンポーネント スタイルのみを含めます。
@use 'sass:map';
@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 ミックスインに加えグローバル テーマ ミックスインを追加しました。明暗テーマのブート ストラップにグローバル テーマ ミックスインが含まれます。これらのミックスイン は 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-material-schema |
null | すべて |
| Material (light) | 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-palette $light-fluent-excel-palette $light-fluent-word-palette |
8.2 + |
| Fluent (dark) | fluent-dark-theme() | $dark-fluent-schema |
$dark-fluent-palette $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 ミックスインをラップすることに注意してください。
すべてのテーマ ミックスインは、独自のテーマを作成するための開始ポイントとして使用できます。bootstrap-light-theme ミックスインを使用して、新しいテーマを作成しましょう。
// Import the theming module
@use "igniteui-angular/theming" as *;
// IMPORTANT: Prior to Ignite UI for Angular version 13 use:
// @import '~igniteui-angular/lib/core/styles/themes/index';
$primary-color: #b71053;
$secondary-color: #6c757d;
$my-color-palette: palette(
$primary: $primary-color,
$secondary: $secondary-color
);
// IMPORTANT: Make sure you always includecore first!
@include core();
// Pass the color palette we generated to thebootstrap-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