React Grid テーマ設定

Grid のテーマは、背景、前景、アクセントの 3 色だけで作成でき、ヘッダー、行、境界線、集計、ツールバー、ページネーター、フィルタリング ポップアップなど、その他すべての色はこれらから派生します。派生した色を手動で記述する必要はありません。grid-theme()、Theming MCP、またはテーマ プレイグラウンドで生成できます。

派生の仕組みはコンポーネントではなく、生成されたテーマ側にあります。デフォルトでは、各 --ig-grid-* プロパティは独立しており、Grid のその部分のみを変更します。詳細については、個別のプロパティの微調整を参照してください。

React Grid テーマ設定の例

以下の 4 つのテーマはカスタム テーマで、このサンプル用に作成されたものであり、ライブラリには含まれていません。これらは生成された派生トークンの同一ブロックを共有しているため、各テーマはプライマリ トークンといくつかのサーフェスと境界線の色のみを設定します。テーマを切り替えると、生成されたテーマでこれらの少数の値がどこまで影響するかがわかります。

テーマの作成

生成されたテーマは、クラスで宣言された --ig-grid-* カスタム プロパティのブロックです。このブロックには 3 つのプライマリ トークンと、それらに基づく CSS 式として記述されたその他すべてのトークンが含まれます。

.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));
  --ig-grid-header-text-color: var(--ig-grid-foreground);
  --ig-grid-row-hover-background: color-mix(in srgb, var(--ig-grid-accent-color) 8%, var(--ig-grid-row-odd-background));
  /* … and the rest of the token set */
}

ツールチェーンに合った方法を選択してください。どの方法でも同じトークン セットが生成されます。

Sass

プロジェクトで Sass をコンパイルしている場合は、grid-theme() 関数を使用すると、テーマ エンジンがトークン セットを記述します。使用するには、まずテーマ パッケージをインストールします。

npm install igniteui-theming

次に、テーマ関数と tokens() ミックスインをエクスポートするパッケージをインポートします。

@use "igniteui-theming" as *;

続いて、grid-theme でテーマを宣言し、影響を与える要素にインクルードします。

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

各パラメーターは同名のトークンに対応します ($background は --ig-grid-background、$accent-color は --ig-grid-accent-color)。指定しなかったトークンは、設定したトークンに基づく式として出力されます。

Theming MCP

Ignite UI Theming MCP は、AI アシスタントを通じてテーマを生成します。CSS 出力を依頼すると、すぐに使用できるカスタム プロパティが返されるため、ローカルの Sass ツールチェーンは必要ありません。

「背景色 #08002e、アクセント色 #ff7d52 で .my-grid クラス用の CSS グリッド テーマを作成して。」

テーマ プレイグラウンド

このトピックの最後にあるテーマ プレイグラウンドでは、選択した色のトークン セットを生成します。[Show code] を選択すると、完全な CSS ブロックをコピーできます。

テーマを最新の状態に保つ

生成された CSS ブロックは、生成時のライブラリ バージョンのスナップショットです。グリッド テーマの新しい変更を取り込むには、Ignite UI for React のアップグレード後に再生成してください。grid-theme() を使用する場合は、igniteui-theming を他の Ignite UI for React パッケージと一緒にアップグレードして再ビルドしてください。これは別のパッケージであるため、コンポーネントだけをアップグレードしても更新されません。Theming MCP またはプレイグラウンドを使用する場合は、同じプロンプトまたは色で再度実行し、ブロックを置き換えてください。

テーマの適用

Grid にクラスを適用します。

<IgrGrid className="my-grid"></IgrGrid>

クラスを適用するとテーマは完成です。Grid はコーラル色のアクセントを持つダーク インディゴになり、テキスト、ヘッダー、行の境界線、ホバー状態、選択の色合い、ポップアップの外観はすべてこれら 2 つの値から計算されています。以降は、プライマリ トークンを変更するだけで済みます。

プライマリ トークン

生成されたテーマでは、Grid は 3 つのプライマリ トークンで構築され、その他すべての色はそれらに従います。

--ig-grid-foreground はプライマリとして記載されていますが、設定が必要になることはほとんどありません。そのままにすると、背景に対するコントラストで選択されるため、暗い背景では明るいテキスト、明るい背景では暗いテキストが、2 つ目の宣言なしで生成されます。

派生の仕組み

生成されたテーマの派生トークンは固定色ではありません。それぞれがプライマリ トークンに基づく 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 つのことが成り立ちます。1 つ目は、プライマリ トークンを変更すると、CSS カスタム プロパティを通じて実行時にも下流のすべてが再計算されることです。2 つ目は、どのような値を指定してもトークン間の関係が維持されるため、テーマ自体の整合性が崩れないことです。どちらも、生成されたトークンが宣言されている間のみ有効です。削除すると、すべてのプロパティが再び独立した状態に戻ります。

さらに詳しく

生成されたテーマでは、一部のトークンはそれ自体が派生のルートです。そのトークンを宣言すると背景から切り離されるため、その上に表示されるものは新しい値から派生させる必要があります。

--ig-grid-header-background が最もわかりやすい例です。そのままにすると --ig-grid-background から混合され、ヘッダー テキストは --ig-grid-foreground に従います。これを宣言すると、ヘッダー テキストはヘッダー背景自体に対するコントラストを取るように再派生されます。

.my-grid {
  --ig-grid-header-background: #ff7d52;
  --ig-grid-header-text-color: hsla(from color(from var(--ig-grid-header-background) var(--y-contrast)) h 0 l/1);
}

構造

色はテーマの半分にすぎません。密度と丸みは、グリッド トークンではなくグローバルなデザイン システム トークンによって制御されるため、グリッド トークンと一緒に設定します。

.my-grid {
  --ig-size: var(--ig-size-small);   /* small | medium | large */
  --ig-radius-factor: 0;             /* 0 to 1 */
}

グリッド線もテーマ トークンです。線を非表示にするには、削除するのではなく背後のサーフェスの色に合わせます。これにより、テーマ間で行のメトリクスが変わりません。

.my-grid {
  /* horizontal dividers, blended away */
  --ig-grid-row-border-color: var(--ig-grid-background);
  /* vertical dividers, drawn in the same color the theme derives for rows */
  --ig-grid-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);
  --ig-grid-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);
}

個別のプロパティの微調整

デフォルトでは、すべての --ig-grid-* プロパティは独立しています。それぞれがベース パレットに対して解決されるため (たとえば Material テーマでは、ヘッダーは var(--ig-grid-header-background, var(--ig-gray-100)) を読み取ります)、1 つの上書きは Grid のその部分のみを変更し、デザインの残りの部分には影響しません。これにより、的を絞った調整を安全かつ予測可能に行えます。

.my-grid {
  --ig-grid-header-background: #120b3d;
  --ig-grid-header-text-color: #ffffff;
}

プライマリ トークンにも同じ独立性が適用されます。生成されたテーマがない場合、--ig-grid-background と --ig-grid-accent-color は通常のプロパティであり、Grid の他の部分には反映されません。

/* The background changes, the header stays gray. */
.my-grid {
  --ig-grid-background: #08002e;
  --ig-grid-accent-color: #ff7d52;
}

数色から Grid 全体のスタイルを設定するには、テーマを作成します。

お試しください

色を変更して、ヘッダー、行、集計、ページネーター、フィルタリング ポップアップにどこまで影響するか確認してください。グリッドを切り替えて同じトークンがすべてで機能することを確認し、[Show code] を選択して、プライマリ トークンとすべての派生トークンを含む完全な CSS ブロックをコピーしてください。

API リファレンス

• IgrGrid
• grid-theme

その他のリソース

• Grid 概要

• パレット

• タイポグラフィ

• サイズ

• 条件付きスタイル設定

コミュニティは活発で、常に新しいアイデアを歓迎しています。

• Ignite UI for React フォーラム
• Ignite UI for React GitHub