構成
レガシーのサポート
Ignite UI for Angular の開発は、Internet Explorer 11 がまだ関連していた 2016 年に始まりました。一部のユーザーはまだ IE11 に依存しています。私たちのテーマ エンジンは、同じ API を使用して、エバーグリーンのブラウザと古いブラウザのスタイルを同じように作成できるように構築されています。単一のグローバル変数 $igx-legacy-support に基づいて、エンジンの動作を構成できます。デフォルトでは false に設定されていますが、宣言をシャドウすることができます。この変数の値は、theme ミックスインで $legacy-support パラメーターを指定するときにも暗黙的に設定されます。
Warning
$legacy-support オプションは igniteui-angular 13.0.x で削除されました。IE11 およびレガシー ブラウザーのサポートはバージョン 13 で削除され、このオプションは無効になりました。
例:
// グローバルな $igx-legacy-support 変数を true に設定します
@include theme(
$legacy-support: true
);
これは、styles.scss ファイルで作成しているテーマのレガシー サポートをオフにするデフォルトの方法です。app.component.scss ファイルなど、特定のコンポーネントにスコープされたスタイルがある場合は、そこでもレガシー サポートを指定する必要があります。
// app.component.scss
$igx-legacy-support: true;
$color: color($light-material-palette, 'primary', 900);
すべてのグローバル構成変数を格納するプロジェクトの styles ディレクトリに _variables.scss ファイルを作成することをお勧めします。このようにして、すべてのスタイル ファイルに構成をインポートするだけです。
グローバル変数
メインのテーマ モジュールで転送されるグローバル Sass 変数のリストは以下のとおりです。
| 変数名 | 説明 |
|---|---|
$components |
すべてのコンポーネント テーマのレジスタを格納します。tree-shaking に使用されます。 |
$dropped-themes |
ドロップされたテーマのレジスタを格納します。tree-shaking に使用されます。 |
スクロールバーのスタイル設定
Ignite UI for Angular テーマには、アプリケーション内のすべてのスクロールバーの幅や色を変更できるカスタム スクロールバー スタイルが付属しています。含まれているスタイルを適用するには、ルート アプリ コンポーネントを含む要素に ig-scrollbar クラスを設定してください。
スクロールバーをさらにカスタマイズするには、既存の scrollbar-theme を拡張し、$schema、$thumb-background、$track-background、および $scrollbar-size パラメーターを受け入れる新しいテーマを作成できます。
// app.component.scss
$my-scrollbar-theme: scrollbar-theme($thumb-background: black, $track-background: gray);
@include scrollbar($my-scrollbar-theme);
パラメーターをスクロールバー関数に直接適用して、追加のテーマの作成を防ぐこともできます。
// app.component.scss
@include scrollbar(scrollbar-theme($scrollbar-size: 16px));
その他のリソース
概念の学習:
アプリケーション全体のテーマを作成する方法の詳細:
コンポーネント固有のテーマを作成する方法の詳細:
コミュニティに参加して新しいアイデアをご提案ください。
GitHub