Ignite UI for Angular のテーマについて

お疲れ様です。

私が「Ignite UI for Angular のテーマ」について、ある程度理解するまでに1週間くらいかかってしまったので、これから学ばれる方が効率的に学習できるようにまとめたいと思います。

項目

• テーマとは
• グローバルテーマとコンポーネントテーマ
• グローバルテーマの設定方法
• コンポーネントテーマの設定方法
• 両方を使用した例
• 参照

テーマとは

• 最小限のコードで、コンポーネントのデザインを変更できるAPIです。
  （要はIgnite UIが提供するコンポーネントのデザインを簡単に変えれるやつです。）

※コンポーネントとは、ページを構成するUI部品のことです。細かく説明しませんがIgnite UIで言うところのグリッド、ボタンなどのことです。本記事では、コンポーネントという単語がたくさん出てくるのでコンポーネント＝部品を頭にインプットしてください。

グローバルテーマとコンポーネントテーマ

グローバルテーマ

• カラーパレットを使用して、全てのコンポーネントにスタイルを設定できる。
  
  （色のパターンを決めて、一括で部品のデザインを設定できる。）

• 設定方法

hogehoge.scss

//↓テーマを使うときに、必要↓
@import '~igniteui-angular/lib/core/styles/themes/index';

//グローバルテーマの引数を作成
//主にパレットやグローバルテーマに含めないテーマのリストを作成
//↓パレットの一部を設定した例
$app-color-palette: igx-palette(
    $primary: red,
    $secondary: yellow
);

//↓テーマを使う前に、必ず宣言するもの（お約束）引数なし↓
@include igx-core();
//↓グローバルテーマを設定↓
@include igx-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
);

//↓テーマを使う前に、必ず宣言するもの（お約束）引数なし↓
@include igx-core();
//↓ボタンのコンポーネントテーマを設定↓
@include igx-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
);

//グローバルテーマの一括設定から除外するテーマを指定(テーマの設定はCSSのルールと同じなので、宣言順によっては除外しなくても、想定通りのデザインになる。上書きするのが分かっているなら除外させた方が個人的にはスッキリすると考えてる。)
$exclude-list:(igx-button,igx-card);

//↓テーマを使う前に、必ず宣言するもの（お約束）引数なし↓
@include igx-core();
//↓グローバルとコンポーネントテーマを設定↓
@include igx-button($app-button-theme);
@include igx-card($app-card-theme);
@include igx-theme($app-color-palette, $exclude: $exclude-list);

TODO

• 今後追加の追加
• 実はコンポーネントテーマはCSSのようにクラス単位でスコープを設定できるので、その詳細

参照

• テーマ
  https://jp.infragistics.com/products/ignite-ui-angular/angular/components/themes/index.html

• グローバル テーマ
  https://jp.infragistics.com/products/ignite-ui-angular/angular/components/themes/global-theme.html

• コンポーネント テーマ
  https://jp.infragistics.com/products/ignite-ui-angular/angular/components/themes/component-themes.html