グローバル テーマ
概要
アプリケーション プロジェクトに 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 の概要
その他のリソース
各コンポーネント テーマの作成する方法:
コミュニティに参加して新しいアイデアをご提案ください。