Angular Tree Grid テーマ設定

Ignite UI for Angular Tree Grid は grid-theme を通じてテーマが適用されます。この関数は背景、前景、アクセント トークンの 3 つからすべての色を導出します。これら 3 つの主要トークンは、ヘッダー、行、境界線、集計、ツールバー、ページネーター、フィルタリング ポップアップなど、コンポーネントがレンダリングするすべてに反映されます。

Angular Tree Grid テーマ設定の例

以下の 4 つのテーマはカスタム テーマです。ライブラリに付属のものではなく、このサンプル用に作成されました。各テーマは色に関しては 3 つの主要トークンのみを設定しているため、テーマを切り替えると 3 つの値がどこまで影響するかを確認できます。

はじめに

テーマ関数と tokens() ミックスインがエクスポートされているテーマ エントリ ポイントをインポートします。

@use "igniteui-angular/theming" as *;

次に、テーマを宣言して適用したい要素に含めます。

:host {
  @include tokens(grid-theme(
    $background: #08002e,
    $accent-color: #ff7d52
  ));
}

これで完全なテーマになります。Tree Grid は濃いインディゴにコーラル アクセントで表示され、テキスト、ヘッダー、行の境界線、ホバー状態、選択の色合い、ポップアップの外枠はすべて自動的に計算されます。

主要トークン

Tree Grid テーマは 3 つのトークンから構築されます。他のすべての色はそれらから導出されます。

$foreground は主要トークンとして挙げられていますが、設定が必要になることはほとんどありません。指定しない場合、背景に対してコントラストが確保されるように選択されます。暗い背景には明るいテキスト、明るい背景には暗いテキストが適用されます。

導出の仕組み

テーマを宣言すると、導出トークンはビルド時に固定の色に解決されるのではなく、指定した主要トークンを参照する CSS 式として出力されます。

.my-grid {
  --ig-grid-foreground: hsla(from color(from var(--ig-grid-background) var(--y-contrast)) h 0 l/1);
  --ig-grid-header-background: color-mix(in srgb, var(--ig-grid-foreground) 6%, var(--ig-grid-background));
  --ig-grid-row-hover-background: color-mix(in srgb, var(--ig-grid-accent-color) 8%, var(--ig-grid-row-odd-background));
  --ig-grid-sorted-header-icon-color: hsl(from var(--ig-grid-accent-color) h s l/0.7);
}

これには 2 つの効果があります。主要トークンを変更すると、そこから導出されるすべての値が再計算されます。CSS カスタム プロパティを通じて、ランタイムでも再計算されます。また、どのような値を指定しても関係性が維持されるため、テーマが自己矛盾を起こすことはありません。

さらに詳しく

一部のトークンは、それ自体が導出の起点になります。宣言すると背景から切り離され、その上にあるものは新しい値から導出されます。

$header-background が最もわかりやすい例です。未設定の場合は $background から混合され、ヘッダーのテキストは $foreground に従います。宣言すると、ヘッダーのテキストはヘッダー自体に対してコントラストを取るように再導出されます。

:host {
  @include tokens(grid-theme(
    $background: #08002e,
    $accent-color: #ff7d52,
    $header-background: #ff7d52
  ));
}

構造

色はテーマの半分にすぎません。密度と丸みは grid-theme() パラメーターではなく、グローバルなデザイン システム トークンで制御されるため、プレーンなカスタム プロパティとして設定します。

:host {
  --ig-size: var(--ig-size-small);   // small | medium | large
  --ig-radius-factor: 0;             // 0 ～ 1

  @include tokens(grid-theme(
    $background: #08002e,
    $accent-color: #ff7d52
  ));
}

グリッド線はテーマ パラメーターです。非表示にするには、削除するのではなく背後のサーフェスと同じ色になじませます。こうすることで、テーマが変わっても行のメトリクスが変化しません。

@include tokens(grid-theme(
  // 水平区切り線をなじませる
  $row-border-color: var(--ig-grid-background),
  // 垂直区切り線を、テーマが行に対して導出する色で描画する
  $body-column-border-color-odd: hsl(from color-mix(in srgb, var(--ig-grid-foreground) 16%, var(--ig-grid-background)) h s l/0.38),
  $body-column-border-color-even: hsl(from color-mix(in srgb, var(--ig-grid-foreground) 16%, var(--ig-grid-background)) h s l/0.38)
));

CSS 変数

デフォルトの外観は意図的なもので、導出によるものではありません。初期状態では Tree Grid は Ignite UI デザイン仕様に正確に一致し、背景から色を計算するのではなく、ベース パレットに対して解決されます。導出が働くのは、独自のテーマを宣言したときだけです。

このことは、CSS のみでテーマ設定する場合に実用上の影響が 1 つあります。テーマを宣言するまで、上書きすべき導出式がありません。コンポーネントは var(--ig-grid-header-background, var(--ig-gray-100)) などを読み取るため、いくつかのカスタム プロパティを手動で設定するだけではカスケードしません。

/* これだけでは不十分: 背景は変わるが、ヘッダーはグレーのまま。 */
.my-grid {
  --ig-grid-background: #08002e;
  --ig-grid-accent-color: #ff7d52;
}

Sass ビルドなしでテーマを適用するには、完全なトークン セット (ルートとそれを参照する導出式) を宣言します。各導出トークンはルートに対する式であるため、このブロックは自己完結しています。

.my-grid {
  --ig-grid-background: #08002e;
  --ig-grid-accent-color: #ff7d52;
  --ig-grid-foreground: hsla(from color(from var(--ig-grid-background) var(--y-contrast)) h 0 l/1);
  --ig-grid-header-background: color-mix(in srgb, var(--ig-grid-foreground) 6%, var(--ig-grid-background));
  /* … その他のテーマ トークン */
}

手動で生成するのは現実的ではないため、以下のプレイグラウンドを使用してください。選択した色に対する完全なブロックが出力されます。

試してみる

色を変更して、ヘッダー、行、集計、ページネーター、フィルタリング ポップアップにどこまで影響するか確認してください。グリッドを切り替えて、同じトークンがすべてのグリッドで機能することを確認し、気に入ったら生成されたテーマをコピーしてください。

API リファレンス

• TreeGrid
• IgxTreeGridComponent Styles

その他のリソース

• Tree Grid 概要

• パレット

• タイポグラフィ

• サイズ

• 条件付きスタイル設定