スタイルとテーマ

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

基本テーマの読み込み

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

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

<link rel="stylesheet" href="./assets/themes/light/bootstrap.css"

カスタム テーマの作成

igniteui-grid-lite パッケージに同梱のデフォルト テーマ以外に、プロジェクトのアイデンティティやブランディングに合わせて独自のテーマを作成・変更できます。

SCSS と CSS インターフェイスの両方のドキュメントと使用方法については、Ignite UI テーマ パッケージ wiki を参照してください。

@use 'node_modules/igniteui-theming' as *;

// Our dark theme
$my_dark_palette: palette(
  $primary: #dab785,
  $secondary: #d5896f,
  $surface: #031d44,
  $gray: #04395e,
);

// Our light theme
$my-light-palette: palette(
  $primary: #c1292e,
  $secondary: #f1d302,
  $surface: #fdfffc,
  $gray: #235789,
);

.custom-light {
  @include palette($my_light_palette);
  @include typography('"Roboto Condensed", sans-serif', $bootstrap-type-scale);
}

.custom-dark {
  @include palette($my_dark_palette);
  @include typography('"Merriweather Sans", sans-serif', $bootstrap-type-scale);
}

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

API リファレンス

• IgxGridLite
• IgxGridLiteColumn

その他のリソース

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

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

• Grid Lite GitHub