グローバル テーマ
概要
アプリケーション プロジェクトに 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 | null |
すべてのコンポーネントのグローバルな丸み係数 (値は 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;
$surface-color: #fff;
$my-color-palette: palette(
$primary: $primary-color,
$secondary: $secondary-color,
$surface: $surface-color
);
// IMPORTANT: Make sure you always include core first!
@include core();
@include typography();
// Pass the color palette we generated to the theme mixin.
@include theme($my-color-palette);
scss
core
と theme
ミックスインが何をするか説明しましょう。core
ミックスインは、強化されたアクセシビリティ (色弱ユーザーに適した色など) やすべてのコンポーネントの印刷スタイルの追加など、いくつかの構成を処理します。theme
ミックスインには、個々のコンポーネント スタイル (除外リストにあるものを除く) が含まれ、コンポーネントの $exclude
リストにリストされていないパレット、スキーマ、エレベーション、および丸みを構成します。
theme
の前に core
を含めることが不可欠です。core
ミックスインは、theme
ミックスインが正しく機能するために必要なすべての基本定義を提供します。
コンポーネントの除外
theme
ミックスインは、グローバル テーマ スタイルから除外されるコンポーネント名のリストを提供します。たとえば、igx-avatar
および igx-badge
に含まれるすべてのスタイルを完全に削除したい場合は (生成される CSS の量を減らすか、独自のカスタム スタイルを提供する場合)、以下のようなコンポーネントのリストを渡すことで可能です。
// ...
$unnecessary: (igx-avatar, igx-badge);
@include theme($my-color-palette, $exclude: $unnecessary);
scss
アプリが一部のコンポーネントを使用しない場合は、$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)
);
scss
明暗テーマ (Light/Dark)
また、Material、Fluent、Indigo、Bootstrap の 4 つのテーマには、light バージョンと dark バージョンも用意されています。
いずれかのバージョンを使用するには、theme ミックスインに渡すだけです。
Light
@include core();
@include typography(
$font-family: $material-typeface,
$type-scale: $material-type-scale
);
@include theme(
$schema: $light-material-schema,
$palette: $light-material-palette,
);
scss
Dark
@include core();
@include typography(
$font-family: $material-typeface,
$type-scale: $material-type-scale
);
@include theme(
$schema: $dark-material-schema,
$palette: $dark-material-palette,
);
scss
使用可能なテーマ
Ignite UI for Angular には、事前定義されたテーマのセットから選択するオプションがあります。 以下の表では、すぐに使用できるすべての定義済みテーマを示します。
テーマ | スキーマ | カラー パレット |
---|---|---|
Material Light | $light-material-schema |
$light-material-palette |
Material Dark | $dark-material-schema |
$dark-material-palette |
Fluent Light | $light-fluent-schema |
$light-fluent-palette $light-fluent-excel-palette $light-fluent-word-palette |
Fluent Dark | $dark-fluent-schema |
$dark-fluent-palette $dark-fluent-excel-palette $dark-fluent-word-palette |
Bootstrap Light | $light-bootstrap-schema |
$light-bootstrap-palette |
Bootstrap Dark | $dark-bootstrap-schema |
$dark-bootstrap-palette |
Indigo Light | $light-indigo-schema |
$light-indigo-palette |
Indigo Dark | $dark-indigo-schema |
$dark-indigo-palette |
その他のリソース
各コンポーネント テーマの作成する方法:
コミュニティに参加して新しいアイデアをご提案ください。