Ignite UI for Web Components のテーマ

    Ignite UI for Web Components には、Bootstrap、Material、Fluent、Indigo の 4 つの異なるテーマが付属しています。すべてのコンポーネント テーマはコンポーネントに組み込まれていますが、パレット、タイポグラフィ、およびその他のグローバル構成を機能させるには、グローバル スタイル ファイルが必要です。

    テーマの読み込み

    テーマを有効にするには、テーマ ファイルを読み込む必要があります。プロジェクトの構成に応じて、インポートまたはリンクすることができます。

    バンドルされているすべてのテーマとそのパスの完全なリストは次のとおりです:

    名前 バリアント 場所
    Bootstrap ライト igniteui-webcomponents/themes/light/bootstrap.css
    Material ライト igniteui-webcomponents/themes/light/material.css
    Fluent ライト igniteui-webcomponents/themes/light/fluent.css
    Indigo ライト igniteui-webcomponents/themes/light/indigo.css
    Bootstrap ダーク igniteui-webcomponents/themes/dark/bootstrap.css
    Material ダーク igniteui-webcomponents/themes/dark/material.css
    Fluent ダーク igniteui-webcomponents/themes/dark/fluent.css
    Indigo ダーク igniteui-webcomponents/themes/dark/indigo.css

    ランタイム テーマの切り替え

    [!Note] ランタイムにテーマを変更するには、上の表のグローバル スタイルシートも置き換える必要があります。

    Ignite UI for Web Components を使用すると、ライブラリによってエクスポートされた ConfigureTheme 関数を使用して、実行時にコンポーネントのテーマを切り替えることができます。

    それを呼び出して、4 つの有効なテーマ (bootstrap、material、fluent、または indigo) のいずれかを文字列として渡すと、読み込まれたコンポーネントのスタイルが変更されます。

    import { configureTheme } from "igniteui-webcomponents";

// Sets material as the theme to be used by all components
configureTheme("material");

    [!Note] これは、内部スタイルを目的のテーマに切り替えるようにコンポーネントに指示するだけで、グローバル テーマ ファイルも上記のファイルのいずれかに切り替える必要があります。

    API リファレンス

    • ConfigureTheme