グローバル テーマ
概要
アプリケーション プロジェクトに igniteui-angular.css
ファイルを追加した場合、削除してください。my-app-theme.scss
ファイルを使用してアプリケーションのすべてのコンポーネント用にグローバル テーマを生成します。
Ignite UI for Angular は、コンポーネント全体のテーマにグローバル テーマをデフォルトで使用します。アプリでユース ケースに合わせてコンポーネントにスコープしたテーマを作成できます。ここでは 1 ファイルにすべてのテーマを含みます。
グローバル テーマの生成には 2 つのミックスイン core
と theme
を含みます。両方のミックスインは数個の引数を受け取ります。
core
名前 | タイプ | デフォルト設定 | 説明 |
---|---|---|---|
$print-layout |
boolean | true | 印刷にスタイルを含めるか除外します。 |
$direction |
Keyword | ltr | すべてのコンポーネントのコンテンツの向きを指定します。ltr または rtl に指定できます。 |
$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 の概要
その他のリソース
各コンポーネント テーマの作成する方法:
コミュニティに参加して新しいアイデアをご提案ください。