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

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

概要

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

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

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

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

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

Blazor Server App を使用する場合は、コンポーネントが使用されるページに @rendermode InteractiveServer を追加してください。

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

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 の登録

.NET 6 以降のアプリケーション

1 - Program.cs ファイルを開き、builder.Services.AddIgniteUIBlazor 関数を呼び出して Ignite UI for Blazor サービスを登録します。

var builder = WebApplication.CreateBuilder(args);

// Add services to the container.
builder.Services.AddRazorPages();
builder.Services.AddServerSideBlazor();

builder.Services.AddIgniteUIBlazor();

var app = builder.Build();

2 - _Imports.razor ファイルに IgniteUI.Blazor.Controls 名前空間を追加します。

@using IgniteUI.Blazor.Controls

3 - プロジェクトタイプに基づいて適切な場所にスタイルシートを追加します。

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

4 - スクリプト参照を追加します。

<script src="_content/IgniteUI.Blazor/app.bundle.js"></script>

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>

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

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

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

概要