構成
The Ignite UI for Angular theming library exposes several input arguments variables that let you configure how the theming engine works.
グローバル変数
メインのテーマ モジュールで転送されるグローバル Sass 変数のリストは以下のとおりです。
| 変数名 | 説明 |
|---|---|
$components | すべてのコンポーネント テーマのレジスタを格納します。tree-shaking に使用されます。 |
$dropped-themes | ドロップされたテーマのレジスタを格納します。tree-shaking に使用されます。 |
スクロールバーのスタイル設定
Ignite UI for Angular テーマには、アプリケーション内のすべてのスクロールバーの幅や色を変更できるカスタム スクロールバー スタイルが付属しています。含まれているスタイルを適用するには、ルート アプリ コンポーネントを含む要素に ig-scrollbar クラスを設定してください。
スクロールバーをさらにカスタマイズするには、scrollbar-theme 関数を使用して新しいスクロールバー スタイルを作成します。この関数は、スクロールバーのスタイル変更に関する引数を受け入れます。スクロールバーのサイズ、カラー、境界線、最小高さなどをカスタマイズできます。
// app.component.scss
// Here we set the scrollbar to have size of 16px, scrollbar thumb to be in color pink, and scrolblar track to be in color green
$my-scrollbar-theme: scrollbar-theme($sb-size: 16px, $sb-thumb-bg-color: pink, $sb-track-bg-color: green);
// We use 'tokens' mixin for generating the css variables with the new scrollbar values.
:host {
@include tokens($my-scrollbar-theme);
}その他のリソース
概念の学習:
アプリケーション全体のテーマを作成する方法の詳細:
コンポーネント固有のテーマを作成する方法の詳細:
コミュニティに参加して新しいアイデアをご提案ください。