オープンソースライブラリの概要

このトピックでは、Visual Studio を使用して Ignite UI for Blazor オープンソースライブラリで Blazor アプリケーションを作成するための段階的な手順を説明します。

概要

Ignite UI for Blazor は、MIT ライセンスの下でオープンソース UI コンポーネントを提供します。これらの軽量パッケージは、商用ライセンスを必要とせずに最新の Web アプリケーションを構築するための基本的な機能を提供します。

オープンソースライブラリには以下が含まれます。

IgniteUI.Blazor.Lite - オープンソース UI コンポーネントを含む軽量パッケージ (GitHub)
IgniteUI.Blazor.GridLite - 軽量でオープンソースのデータグリッドコンポーネント (GitHub)

新しい Blazor プロジェクトの作成

Visual Studio を起動し、スタートページで [新しいプロジェクトの作成] をクリックし、Blazor Web App、Blazor WebAssembly Standalone App、または .NET MAUI Blazor Hybrid App テンプレートを選択して [次へ] をクリックします。

Blazor Web App では、コンポーネントに InteractiveServer、InteractiveWebAssembly、または InteractiveAuto のインタラクティブレンダーモードが必要です。コンポーネントを使用するページ (例: @rendermode InteractiveServer) で設定するか、Components/App.razor でグローバルに設定します。静的サーバー側レンダリングは現在サポートされていません。

プロジェクト名と場所を入力し、[次へ] をクリックします。
追加のプロジェクトオプションを指定し、[作成] をクリックします。

IgniteUI.Blazor.Lite のインストール

IgniteUI.Blazor.Lite パッケージには、NuGet 経由で配信されるオープンソース UI コンポーネントが含まれています。

IgniteUI.Blazor パッケージと IgniteUI.Blazor.Lite パッケージを同じプロジェクトで組み合わせないでください。これらは同じ名前空間を使用し、重複するコンポーネントが含まれているため、いずれか 1 つのみを使用する必要があります。

Visual Studio で、[ツール] → [NuGet パッケージマネージャー] → [ソリューションの NuGet パッケージの管理] を選択して、NuGet パッケージマネージャーを開きます。IgniteUI.Blazor.Lite NuGet パッケージを検索してインストールします。

または、パッケージマネージャーコンソール経由でインストールします。

Install-Package IgniteUI.Blazor.Lite

または、.NET CLI 経由でインストールします。

dotnet add package IgniteUI.Blazor.Lite

IgniteUI.Blazor.Lite の登録

1 - Program.cs ファイル (.NET MAUI Blazor Hybrid アプリでは MauiProgram.cs) を開き、builder.Services.AddIgniteUIBlazor 関数を呼び出して Ignite UI for Blazor サービスを登録します。WebAssembly または Auto レンダーモードの Blazor Web App では、サーバープロジェクトとクライアントプロジェクトの両方の Program.cs で登録します。

builder.Services.AddIgniteUIBlazor();

各コンポーネントは初めてレンダリングされるときにクライアントリソースを読み込むため、コンポーネントモジュールの指定は任意です (コンポーネントモジュールを参照)。

2 - _Imports.razor ファイルに IgniteUI.Blazor.Controls 名前空間を追加します (クライアントプロジェクトがある Blazor Web App では両方のプロジェクトに追加します)。

@using IgniteUI.Blazor.Controls

3 - アプリのホストページの <head> 要素にスタイルシートを追加します。Blazor Web App の場合は Components/App.razor、スタンドアロンの Blazor WebAssembly アプリまたは Blazor Hybrid アプリの場合は wwwroot/index.html です。

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

OSS Blazor コンポーネントの使用

Ignite UI for Blazor コンポーネントを razor ページに追加します。たとえば、次のようになります。

<IgbCard style="width:350px">
    <IgbCardMedia>
        <img src="https://images.unsplash.com/photo-1541516160071-4bb0c5af65ba?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=350&q=80" />
    </IgbCardMedia>
    <IgbCardHeader>
        <h4>Jane Doe</h4>
        <h6>Professional Photographer</h6>
    </IgbCardHeader>
    <IgbCardContent>Hi! I'm Jane, photographer and filmmaker.
        Photography is a way of feeling, of touching,
        of loving. What you have caught on film is captured forever...
        it remembers little things, long after you have
        forgotten everything.</IgbCardContent>
    <IgbCardActions>
        <IgbButton>More Info</IgbButton>
    </IgbCardActions>
</IgbCard>

軽量パッケージに含まれるコンポーネントの詳細については、オープンソースとプレミアムコンポーネントトピックを参照してください。

IgniteUI.Blazor.GridLite のインストール

Grid Lite を追加するには、IgniteUI.Blazor.GridLite パッケージをインストールします。

dotnet add package IgniteUI.Blazor.GridLite

グリッド自体にはサービスの登録は必要ありません。上記で追加した Lite のテーマがグリッドにも適用されます。

Grid Lite の機能と構成の詳細については、Grid Lite の概要トピックを参照してください。

オープン ソース ライブラリの概要

概要