use-igniteui-blazor

アプリケーションのセットアップとコンポーネントの登録

1. NuGet パッケージ

パッケージを追加する前に、対象プロジェクトのターゲットフレームワークと既存のパッケージ参照を確認してください。サポートされる最低ターゲットフレームワークのバージョンは .NET 8.0 です。すでに IgniteUI.Blazor または IgniteUI.Blazor.Trial が参照されている場合は、そのパッケージ方針を維持し、Lite や GridLite を追加しないでください。ユーザーが明示的に求めた場合に限り、パッケージファミリーを切り替え、競合する参照を両方残さず置き換えてください。

dotnet add package IgniteUI.Blazor.Lite       # OSS core UI components (MIT)
dotnet add package IgniteUI.Blazor.GridLite   # OSS lightweight grid (MIT)

IgbInput、IgbCombo、IgbDialog などのコアコントロールには IgniteUI.Blazor.Lite を、軽量グリッドには IgniteUI.Blazor.GridLite を使用してください。アプリで両方が必要な場合に限り、両方のパッケージを参照してください。IgniteUI.Blazor.Combo のようなコンポーネントごとのパッケージを作り出さないでください。

チャート、マップ、ゲージ、その他のプレミアムコンポーネントは Lite に含まれていません。参照を推奨する前に、要求されたコンポーネントのパッケージを確認してください。

2. IgniteUI.Blazor.Lite サービスの登録

通常は Program.cs に記述します。

builder.Services.AddIgniteUIBlazor();   // no modules pre-loaded; each loads on first render

特定のセットを先行ロードする場合は、代わりに typeof(Igb<Name>Module) の値を渡します。

builder.Services.AddIgniteUIBlazor(
    typeof(IgbInputModule), typeof(IgbComboModule), typeof(IgbDialogModule));

モジュール名は常に Igb{ComponentName}Module の形式です。モジュールを渡すと起動時に先行ロードされ、初回レンダリングの遅延が減る一方で、初期転送量が増加します。一覧にないコンポーネントも、初回レンダリング時に独自のモジュールを登録します。

GridLite のみを使用するセットアップでは、AddIgniteUIBlazor() を呼び出したり、Ignite UI のスクリプトタグを手動で追加したりしないでください。IgniteUI.Blazor.GridLite を参照し、コントロールの名前空間を追加して、以下に示す GridLite のスタイルシートをリンクしてください。

分割された Blazor Web App： 必要な各パッケージを Server と Client の両方の .csproj ファイルに追加してください。コアコントロールについては、これらの例の代わりに実際のプロジェクトパスを使用してください。

dotnet add Server/Server.csproj package IgniteUI.Blazor.Lite
dotnet add Client/Client.csproj package IgniteUI.Blazor.Lite

GridLite が必要な場合は、IgniteUI.Blazor.GridLite も両方のプロジェクトに追加してください。GridLite のみを使用するアプリでは、そのパッケージだけを追加し、以下のサービス登録は省略してください。

Lite では、サーバーとクライアントの両方の Program.cs で AddIgniteUIBlazor() を呼び出してください。

// Server
builder.Services.AddRazorComponents()
    .AddInteractiveServerComponents()
    .AddInteractiveWebAssemblyComponents();
builder.Services.AddIgniteUIBlazor();

// Client (WebAssemblyHostBuilder)
builder.Services.AddIgniteUIBlazor();

単一プロジェクトの Interactive Server Blazor Web App では、サーバーの Program.cs で AddIgniteUIBlazor() を一度だけ呼び出してください。クライアントプロジェクトや WebAssembly サービスは追加しないでください。

3. _Imports.razor

@using IgniteUI.Blazor.Controls

分割された Blazor Web App ソリューションでは、両方の _Imports.razor ファイルに追加してください。

4. ホストページ — テーマのスタイルシート

ホストページは wwwroot/index.html（WASM/MAUI）、Pages/_Host.cshtml（Server）、または Components/App.razor（Web App）です。

IgniteUI.Blazor.Lite 0.1.1 は、Blazor イニシャライザーを通じて JavaScript を自動的に読み込みます。既存の Blazor フレームワークスクリプトはそのままにして、以下のテーマスタイルシートを追加してください。Ignite UI のスクリプトタグを手動で追加しないでください。

<link href="_content/IgniteUI.Blazor/themes/light/bootstrap.css" rel="stylesheet" />

スタイルシートは必須です。これがないと、コンポーネントはスタイルなしでレンダリングされます。

_content/IgniteUI.Blazor/themes/ 以下のテーマファイルは {light|dark}/{bootstrap|material|fluent|indigo}.css です。リンクするのは必ず 1 つだけにしてください。

.NET 9 以降の Web App プロジェクトでは、フィンガープリント付きアセットコレクションを使用できます。

<link rel="stylesheet" href="@Assets["_content/IgniteUI.Blazor/themes/light/bootstrap.css"]" />

IgniteUI.Blazor.GridLite は独自のアセットルートから独自のスタイルシートを提供しますが、GridLite コンポーネントのみを使用する場合に限って使用してください。ほかの Ignite UI コンポーネントも使用する場合は、GridLite のスタイルシートをリンク（または提案）しないでください。代わりに、上記のメインテーマスタイルシートを使用してください。

<link href="_content/IgniteUI.Blazor.GridLite/themes/light/bootstrap.css" rel="stylesheet" />

5. レンダーモード（Blazor Web App のみ）

Ignite UI コンポーネントにはインタラクティブなレンダーモードが必要です。静的 SSR では使用可能な状態でレンダリングされません。

@rendermode InteractiveServer

または App.razor でグローバルに設定します：<Routes @rendermode="InteractiveServer" />。

必要に応じて、InteractiveServer の代わりに InteractiveWebAssembly または InteractiveAuto を使用してください。