おはこんばんちは
私が「Ignite UI for Angular のテーマ」について、ある程度理解するまでに1週間くらいかかってしまったので、これから学ばれる方が効率的に学習できるようにまとめたいと思います。
項目
- テーマとは
- グローバルテーマとコンポーネントテーマ
- グローバルテーマの設定方法
- コンポーネントテーマの設定方法
- 両方を使用した例
- 参照
テーマとは
- 最小限のコードで、コンポーネントのテーマを変更できるAPIです。（主に色） ※コンポーネントとは、ページを構成するUI部品のことです。補足として、入れ子に配置することができる。
グローバルテーマとコンポーネントテーマ
グローバルテーマ
カラーパレットを使用して、全てのコンポーネントにスタイルを設定できる。
設定方法
hogehoge.scss
//↓テーマを使うときに、必要↓@import'~igniteui-angular/lib/core/styles/themes/index';//グローバルテーマの引数を作成//主にパレットやグローバルテーマに含めないテーマのリストを作成//↓パレットの一部を設定した例$app-color-palette:igx-palette($primary:red,$secondary:yellow);//↓テーマを使う前に、必ず宣言するもの（お約束）引数なし↓@includeigx-core();//↓グローバルテーマを設定↓@includeigx-theme($app-color-palette);- グローバルテーマの引数
| 名前 | 型 | デフォルト | 説明 |
|---|---|---|---|
| $palette | map | undefined | メインの色やサブの色など一定パターンに沿ったカラーセット。詳しくはこちら |
| $schema | map | $light-schema | テーマで使用する全てのプロパティのリスト |
| $exclude | list | ( ) | グローバルテーマに含めない、コンポーネントテーマのリスト |
| $legacy-support | boolean | true | テーマの設定方法を決定 falseに設定した場合はCSS変数での設定 |
コンポーネントテーマ
- 個別にテーマのスタイル設定ができる。
グローバルに定義する。
設定方法（ボタンテーマの場合）
hogehoge.scss
//↓テーマを使うときに、必要↓@import'~igniteui-angular/lib/core/styles/themes/index';//ボタンテーマの引数の設定//ボタンの色を設定//↓ボタンの一部を設定した例$app-button-theme:igx-button-theme($raised-focus-text-color:green,$raised-border-radius:2px);//↓テーマを使う前に、必ず宣言するもの（お約束）引数なし↓@includeigx-core();//↓グローバルテーマを設定↓@includeigx-button($app-button-theme);- コンポーネントテーマの全量とパラメータ（今後追加）
両方を使用した例
hogehoge.scss
//↓テーマを使うときに、必要↓@import'~igniteui-angular/lib/core/styles/themes/index';$app-color-palette:igx-palette($primary:red,$secondary:yellow);$my-card-theme:igx-card-theme($background:red,$content-text-color:blue);$app-button-theme:igx-button-theme($raised-focus-text-color:green,$raised-border-radius:2px);$exclude-list:(igx-button,igx-card);//↓テーマを使う前に、必ず宣言するもの（お約束）引数なし↓@includeigx-core();//↓グローバルテーマを設定↓@includeigx-button($app-button-theme);@includeigx-card($app-card-theme);@includeigx-theme($app-color-palette,$exclude:$exclude-list);TODO
- 今後追加の追加
- 実はコンポーネントテーマはCSSのようにクラス単位でスコープを設定できるので、その詳細