構成
レガシーのサポート
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));
その他のリソース
概念の学習:
アプリケーション全体のテーマを作成する方法の詳細:
コンポーネント固有のテーマを作成する方法の詳細:
コミュニティに参加して新しいアイデアをご提案ください。