スタイルとテーマ

Grid Lite には、Bootstrap、Material、Fluent、Indigo の 4 つのテーマが用意されています。グリッドおよび UI コンポーネントにはテーマが組み込まれていますが、パレット、タイポグラフィ、その他のグローバル設定にはグローバル スタイルシートが必要です。

基本テーマの読み込み

プロジェクトのタイプ、セットアップ、ビルド構成に応じて、以下のいずれかのファイルを組み込む方法が異なります。フレームワーク/ビルドツールを使用している場合は、外部スタイルを出力バンドルに追加する方法についてドキュメントを参照してください。

原則として、themes フォルダーをアセット ディレクトリにコピーし、index.html からテーマをリンクするだけで構いません。

テーマ	バリアント	パス
Bootstrap	Light	node_modules/igniteui-webcomponents/themes/light/bootstrap.css
Bootstrap	Dark	node_modules/igniteui-webcomponents/themes/dark/bootstrap.css
Material	Light	node_modules/igniteui-webcomponents/themes/light/material.css
Material	Dark	node_modules/igniteui-webcomponents/themes/dark/material.css
Fluent	Light	node_modules/igniteui-webcomponents/themes/light/fluent.css
Fluent	Dark	node_modules/igniteui-webcomponents/themes/dark/fluent.css
Indigo	Light	node_modules/igniteui-webcomponents/themes/light/indigo.css
Indigo	Dark	node_modules/igniteui-webcomponents/themes/dark/indigo.css

以下のサンプルでは、すべてのデフォルトの基本テーマをプレビューできます。

カスタム テーマの作成

Grid Lite パッケージに付属するデフォルト テーマに加えて、別の CSS カスタム プロパティ セットを使用することで、データ グリッドの外観と操作感をさらにカスタマイズできます。

詳細については、テーマ設定のトピックを参照してください。

.grid-sample {
  --header-background: #494949;
  --header-text-color: #f2c43c;
  --cell-active-border-color: #f2c43c;
  --row-hover-background: #707070;
  --row-hover-text-color: #f2c43c;
}

以下は、上記のカスタム テーマの例です。

その他のリソース

• 列の構成
• フィルタリング
• ソート

コミュニティに参加して新しいアイデアをご提案ください。

• Grid Lite GitHub