【第2章】C# + .NET 5.0 + Blazor WebAssemblyで簡単SPA開発【Syncfusion(UIコンポーネント)の導入】

# はじめに
AngularなどのSPAアプリケーションの作成が面倒だったが、BlazorでSPAが実装できると聞いてお試しメモ書きついでの手順化
TypeScriptやJavascriptを使わずに、C#とHTMLとCSSだけでレッツSPA!!!
最終目標は本番環境(Azure)での動作を目指して構築していきます。

--

今章ではUIコンポーネントであるSyncfusionの導入を行います。
第2章完了時のソースコード一式はこちら
[https://github.com/enngawa/BlazorLerning/tree/第2章](https://github.com/enngawa/BlazorLerning/tree/%E7%AC%AC2%E7%AB%A0)

## 全体目次
- 第1章 [プロジェクトの作成と動作確認](https://qiita.com/jp_enngawa/items/46ba76d6bca17a1095dc)
- 第2章 [SyncfusionBlazor(UIコンポーネント)の導入](https://qiita.com/jp_enngawa/items/ed166d6d63bd73a750fd) **<= この章はここ**
- 第3章 画面の新規作成
- 第4章 SQLとの連動(Entity Framework経由でのCRUD)(予定)
- 以降 検討中・・・

## この章でやること
1. Syncfusionとは何か 
1. SyncfusionBlazorの導入
1. 動作確認
1. 【参考情報】 Syncfusionコンポーネントの種類

## 1. Syncfusionとは何か 
[https://www.syncfusion.com/](https://www.syncfusion.com/)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/423799/56c2067a-12f2-000a-deb0-cda7e1c1a843.png)
Syncfusionは2001年に米国ノースカロライナ州で設立された会社で、今回使用するコンポーネントは同社の名前を冠する代表的なライブラリです。
ビジネス向けに限らず、様々なアプリケーションにリッチなユーザーインターフェースを提供する**有償**のコンポーネントライブラリを提供しています。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/423799/3558eaa2-c530-fff0-4706-92a344734f2e.png)

有償でsyncfusionライブラリを提供してきた同社ですが、Microsoftが「VisualStudio Community」と呼ばれる、無償版のVisualStudioの提供を始めたことに触発され、2014年11月に同社は有償ライブラリであるsyncfusionで「コミュニティーライセンス」の提供を発表、**以下の条件に当てはまる開発者は「Essential Studio EnterpriseEdition」で利用可能な製品を用いて無料で開発を行えるうえ、商用利用も可能**という大規模な方針の転換を行いました。

- 年間総収入が100万米ドル(約1億円)以下であること
- 開発者が5名以下の企業または個人開発者であること

有償のライブラリであるため、完成度が非常に高く、使いやすい為におすすめのライブラリとなっています。
今回はこちらのライセンスを利用して、開発を行っていきます。

### ライセンスキー取得
:::note warn
登録に際して、LinkedInアカウントの登録が必須です。
(XINGアカウントでもよいが、中国のコミュニティサイトなので実質LinkedInしか使用できない・・・・)
:::

1. [https://www.syncfusion.com/downloads/communitylicense](https://www.syncfusion.com/downloads/communitylicense)へアクセス
2. 「Sign in With LinkedIn」をクリックし、アカウントを連携させる。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/423799/2606dbe2-43f2-bb2c-85df-ad13a6d4636d.png)

:::note info
Companyの入力を要求された場合は「Individual」でOK 
:::

3. [https://www.syncfusion.com/account/downloads](https://www.syncfusion.com/account/downloads)へアクセス
4. 「Get License Key」をクリック
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/423799/2d682823-afd1-bd32-1cd2-58da94c6a219.png)

5. Platformで「ASP.NET Core」と「Blazor」を選択し、「GET LICENSE KEY」をクリック
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/423799/3e89f993-a667-226d-fff3-7165a4785a71.png)

6. 表示されたライセンスキーを取得します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/423799/4d97ebfa-ec58-3368-3455-45fb19c67c4c.png)


## 2. SyncfusionBlazorの導入
では、まずSyncfusionの導入を行っていきましょう。
ソースコードは１章の続きを利用します。

### コンポーネントの導入(追加するたびに実施)

:::note warn
2020年のv18.4.0.30リリース以降、統合されていたSyncfusionBlazorコンポーネントは、機能ごとに個別のNuGetパッケージとして再リリースされました。
必要なコンポーネントのみインストールすることで、レンダリング時間の短縮、アプリのサイズ削減などの利点があります。
なにが言いたいかというと、統合版であるSyncfusion.Blazorパッケージはインストールしないでください。

最新の情報は以下を参照してください。
https://blazor.syncfusion.com/documentation/introduction
:::

次の頁で使用するコンポーネントから、例として「TextBox」をインストールします。
Nugetのパッケージ管理マネージャーを起動します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/423799/3d387aa4-d7d2-a8cf-33e4-1cb9f946bd91.png)

参照で「Syncfusion.Blazor.Inputs」を検索し、コンポーネントを選択、インストール対象のプロジェクトを「****(プロジェクト名).Client」に設定、インストールを実施。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/423799/e4cf5c54-3fa6-251f-551d-6ae9bb5083f9.png)

:::note note
インストールしたいコンポーネントを探す際は公式ドキュメントを参照してください。
https://blazor.syncfusion.com/documentation/
:::


「****(プロジェクト名).Client」プロジェクト直下の「_Imports.razor」を開き、インストールしたパッケージを読み込むように下記を追記します。

```C#
@using Syncfusion.Blazor.Inputs
```
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/423799/065e9e63-7179-9321-5a45-7b426666532f.png)


### 初期設定(初回のみ実施)
SyncfusionBlazorを使用するための初期設定を実施します。(**パッケージが１つでもインストールされていないとエラーになります。**)
「****(プロジェクト名).Client」プロジェクト配下の「wwwroot/index.html」を開き、Syncfusion用のスタイルシートを読み込むように下記を追記します。

```HTML
 <link href="_content/Syncfusion.Blazor.Themes/bootstrap4.css" rel="stylesheet" />
```

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/423799/4d0eb612-11e2-7577-a5e7-d83de2a7a46a.png)


「****(プロジェクト名).Client」プロジェクト直下の「Program.cs」を開き、Syncfusion用のライセンスキーの読み込みとサービスを追加します。
ライセンスキーは前の頁で取得した文字列を設定してください。

```C#
....
....
using Syncfusion.Blazor; //<= 追加
namespace BlazorLerning.Client
{
    public class Program
    {
        public static async Task Main(string[] args)
        {
            Syncfusion.Licensing.SyncfusionLicenseProvider.RegisterLicense("ライセンスキー");//<=追加
            ....
            ....
            builder.Services.AddSyncfusionBlazor(); //<= 追加
            await builder.Build().RunAsync();
        }
    }
}
```
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/423799/ab4cc3a4-8c6b-8ce3-21a8-65586e1b9fec.png)

### 動作テスト
「****(プロジェクト名).Client」プロジェクト配下の「Pages/Index.razor」を開き、テキストボックスのタグを追記します。

```HTML
<SfTextBox Placeholder='First Name'></SfTextBox>
```

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/423799/f3253639-c788-4824-73e3-bee16e4f004c.png)


この時点で、一度デバッグ実行し起動することを確認してください。
無事に起動でき、テキストボックスが表示され、警告が表示されなければ導入完了です。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/423799/c65433b7-6af3-0783-5d77-b220ac6071b7.png)

## 【参考情報】 Syncfusionコンポーネントの種類
Syncfusionのコンポーネントは以下のようなものがあります。
作成したいコンポーネントに合わせて選択して下さい。

:::note warn
コンポーネントの仕様はバージョンにより常に変化していきます。
最新の情報は各コンポーネントのリンク先を参照してください。
:::

<details>
    <summary>グリッド</summary>
    <div>
        <a target="_blank" href="https://blazor.syncfusion.com/documentation/datagrid/getting-started">データグリッド</a>
        ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/423799/c3670c98-4761-cb36-df1c-88a0c9aefbe9.png)
    </div>
    <div>
        <a target="_blank" href="https://blazor.syncfusion.com/documentation/pivot-table/getting-started">ピボットテーブル</a> 
        ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/423799/91bc9545-6aa2-ef49-21a1-f34077af3a0c.png)
    </div>
    <div>
        <a target="_blank" href="https://blazor.syncfusion.com/documentation/treegrid/getting-started">ツリーグリッド</a>
        ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/423799/1800f629-9f8f-f28b-888a-595b1cd0ea35.png)
    </div>
</details>
<details>
    <summary>ファイルビューアとエディタ</summary>
    <div>
        <a target="_blank" href="https://blazor.syncfusion.com/documentation/rich-text-editor/getting-started">リッチテキストエディタ</a>
        ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/423799/cce4bd14-661c-0100-2d79-a98f6dea79e7.png)
    </div>
    <div>
        <a target="_blank" href="https://blazor.syncfusion.com/documentation/pdfviewer/getting-started/features">PDFビューア</a>
    </div>
    <div>
        <a target="_blank" href="https://blazor.syncfusion.com/documentation/document-editor/getting-started/features">Wordエディタ</a>
    </div>
</details>
<details>
    <summary>対応ファイル形式</summary>
    <div>
        <a target="_blank" href="https://help.syncfusion.com/file-formats/xlsio/create-read-edit-excel-files-in-blazor-c-sharp">Excel</a>
    </div>
    <div>
        <a target="_blank" href="https://help.syncfusion.com/file-formats/docio/create-word-document-in-blazor">Word</a>
    </div>
    <div>
        <a target="_blank" href="https://help.syncfusion.com/file-formats/presentation/create-read-edit-powerpoint-files-in-blazor">PowerPoint</a>
    </div>
    <div>
        <a target="_blank" href="https://help.syncfusion.com/file-formats/pdf/create-pdf-document-in-blazor">PDF</a>
    </div>
</details>
<details>
    <summary>レイアウト</summary>
    <div>
        <a target="_blank" href="https://blazor.syncfusion.com/documentation/dialog/getting-started">ダイアログ</a>
        ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/423799/f64d36e8-cbfd-6823-83ab-54fb554ae74d.png)
    </div>
    <div>
        <a target="_blank" href="https://blazor.syncfusion.com/documentation/listview/getting-started">リストビュー</a>
        ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/423799/75eece73-3413-56a9-847e-a3e4c4c0ccaf.png)
    </div>
    <div>
        <a target="_blank" href="https://blazor.syncfusion.com/documentation/tooltip/getting-started">ツールチップ</a>
        ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/423799/15f336e9-c59a-86f8-4855-9fe2d92e8984.png)
    </div>
    <div>
        <a target="_blank" href="https://blazor.syncfusion.com/documentation/splitter/getting-started">スプリッター</a>
        ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/423799/68b17298-5e62-9f2e-a396-1aa50eb4af5e.png)
    </div>
    <div>
        <a target="_blank" href="https://blazor.syncfusion.com/documentation/dashboard-layout/getting-started">ダッシュボード</a>
        ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/423799/1a290381-81e0-2512-d120-0ceecdcc17ab.png)
    </div>
    <div>
        <a target="_blank" href="https://blazor.syncfusion.com/documentation/card/getting-started">カード</a>
        ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/423799/8bb23a19-44f6-2246-5b67-261262679717.png)
    </div>
    <div>
        <a target="_blank" href="https://blazor.syncfusion.com/documentation/avatar/getting-started">アバター</a>
        ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/423799/5b137b02-18cb-0e3f-1b45-40b9b0ca10ff.png)
    </div>
</details>
<details>
    <summary>図形</summary>
    <div>
        <a target="_blank" href="https://blazor.syncfusion.com/documentation/chart/getting-started-wasm">グラフ</a>
        ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/423799/0e78d13a-1199-ca96-bc7a-608913421e05.png)
    </div>
    <div>
        <a target="_blank" href="https://blazor.syncfusion.com/documentation/stock-chart/getting-started">株価チャート</a>
        ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/423799/49880354-cb6e-8175-b6a8-cf2d8ec32d02.png)
    </div>
    <div>
        <a target="_blank" href="https://blazor.syncfusion.com/documentation/circular-gauge/getting-started">円形メータ</a>
        ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/423799/dec5a9ac-396b-80c0-2555-ee2d7f096fe0.png)
    </div>
    <div>
        <a target="_blank" href="https://blazor.syncfusion.com/documentation/linear-gauge/getting-started">直線メータ</a>
        ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/423799/6679670b-5217-bd6c-c797-5c0c1fdeef7d.png)
    </div>
    <div>
        <a target="_blank" href="https://blazor.syncfusion.com/documentation/diagram-component/getting-started">ダイアグラム</a>
        ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/423799/d6955458-fd33-9cf4-d7d7-9ff36ea2380b.png)
    </div>
    <div>
        <a target="_blank" href="https://blazor.syncfusion.com/documentation/heatmap-chart/getting-started">ヒートマップ</a>
        ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/423799/de637164-3f54-0907-f54c-df20af7cd8b1.png)
    </div>
    <div>
        <a target="_blank" href="https://blazor.syncfusion.com/documentation/maps/getting-started">世界地図</a>
        ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/423799/1830a402-f5ee-682b-f939-2f052119def4.png)
    </div>
    <div>
        <a target="_blank" href="https://blazor.syncfusion.com/documentation/range-selector/getting-started">レンジセレクター</a>
        ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/423799/8b538203-7f9d-a9bd-a97f-ba890dec4deb.png)
    </div>
    <div>
        <a target="_blank" href="https://blazor.syncfusion.com/documentation/smith-chart/getting-started">スミスチャート</a>
        ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/423799/74df7241-8641-2383-2d7a-d59fe3ac0aab.png)
    </div>
    <div>
        <a target="_blank" href="https://blazor.syncfusion.com/documentation/sparkline/getting-started">スパークラインチャート</a>
        ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/423799/95c4e672-d6d3-27b9-5364-25b217ec2da1.png)
    </div>
    <div>
        <a target="_blank" href="https://blazor.syncfusion.com/documentation/barcode/getting-started">バーコード</a>
        ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/423799/f65975f8-7f5f-1ab5-c62a-d4189bcb2e65.png)
        ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/423799/e1b1a844-fc24-9312-81cc-7dc1d26bd5f5.png)
        ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/423799/1c8ea046-fe10-a1fd-ff91-0f944beaf381.png)
    </div>
    <div>
        <a target="_blank" href="https://blazor.syncfusion.com/documentation/treemap/getting-started">ツリーマップ</a>
        ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/423799/e8ee7296-20bf-a65e-b29a-47fe57a7465c.png)
    </div>
    <div>
        <a target="_blank" href="https://blazor.syncfusion.com/documentation/bullet-chart/getting-started">バレットグラフ</a>
        ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/423799/99ccc2c4-051e-a580-6774-a9bd2bdf9134.png)
    </div>
    <div>
        <a target="_blank" href="https://blazor.syncfusion.com/documentation/kanban/getting-started">かんばん(ボード)</a>
        ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/423799/7185b9cf-55ca-0195-7885-2cdfed17c2fa.png)
    </div>
</details>
<details>
    <summary>ボタン</summary>
    <div>
        <a target="_blank" href="https://blazor.syncfusion.com/documentation/button/getting-started">ボタン</a>
        ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/423799/603c2075-bfd3-7201-a5e3-a60b0a173a23.png)
    </div>
    <div>
        <a target="_blank" href="https://blazor.syncfusion.com/documentation/button-group/getting-started">グループボタン</a>
        ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/423799/e53bb70e-089e-e7a1-5d7a-f0577e0e69cf.png)
    </div>
    <div>
        <a target="_blank" href="https://blazor.syncfusion.com/documentation/drop-down-menu/getting-started">ドロップダウンメニュー</a>
        ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/423799/56030238-96e0-b153-0382-9ba1960a2619.png)
    </div>
    <div>
        <a target="_blank" href="https://blazor.syncfusion.com/documentation/progress-button/getting-started">進捗表示付きボタン</a>
        ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/423799/6be0d820-4f21-0339-0469-6ce897140961.png)
    </div>
    <div>
        <a target="_blank" href="https://blazor.syncfusion.com/documentation/split-button/getting-started">ドロップダウン型ボタン</a>
        ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/423799/34b371e0-7acb-de63-93a4-a1e9612f297f.png)
    </div>
    <div>
        <a target="_blank" href="https://blazor.syncfusion.com/documentation/chip/getting-started">チップ</a>
        ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/423799/214d7399-8710-1300-64c3-8a1c851366fc.png)
    </div>
</details>
<details>
    <summary>カレンダー</summary>
    <div>
        <a target="_blank" href="https://blazor.syncfusion.com/documentation/scheduler/getting-started">スケジューラー</a>
        ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/423799/8f7faffd-3332-b193-01ae-b6ef427f5761.png)
    </div>
    <div>
        <a target="_blank" href="https://blazor.syncfusion.com/documentation/gantt-chart/getting-started">ガントチャート</a>
        ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/423799/993e1eb8-a4e4-dcbc-56fe-7b8e944d42b5.png)
    </div>
    <div>
        <a target="_blank" href="https://blazor.syncfusion.com/documentation/calendar/getting-started">カレンダー</a>
        ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/423799/5661ff8f-510e-480f-361e-2b70cbda981b.png)
    </div>
    <div>
        <a target="_blank" href="https://blazor.syncfusion.com/documentation/datepicker/getting-started">日付選択</a>
        ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/423799/24edc44b-ad81-bf42-db44-bc21410b75d2.png)
    </div>
    <div>
        <a target="_blank" href="https://blazor.syncfusion.com/documentation/daterangepicker/getting-started">日付範囲選択</a>
        ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/423799/132fac53-3919-eebb-ae2f-ba4b5bb0fd05.png)
    </div>
    <div>
        <a target="_blank" href="https://blazor.syncfusion.com/documentation/datetime-picker/getting-started">日時選択</a>
        ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/423799/8d8599e6-2020-934b-0f56-98d605231a5b.png)
    </div>
    <div>
        <a target="_blank" href="https://blazor.syncfusion.com/documentation/timepicker/getting-started">時刻選択</a>
        ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/423799/3fc32ad9-2e00-d869-948c-831f1f7a5a56.png)
    </div>
</details>
<details>
    <summary>入力</summary>
    <div>
        <a target="_blank" href="https://blazor.syncfusion.com/documentation/textbox/getting-started">テキストボックス</a>
        ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/423799/567dfafb-e686-5c5a-b2d4-6084ade2e528.png)
    </div>
    <div>
        <a target="_blank" href="https://blazor.syncfusion.com/documentation/input-mask/getting-started">入力マスク</a>
        ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/423799/54617863-f923-6e8c-b358-77561fdc67f2.png)
    </div>
    <div>
        <a target="_blank" href="https://blazor.syncfusion.com/documentation/numeric-textbox/getting-started">数値テキストボックス</a>
        ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/423799/1bc79315-de3e-f0cf-88de-b4af521a6a49.png)
    </div>
    <div>
        <a target="_blank" href="https://blazor.syncfusion.com/documentation/radio-button/getting-started">ラジオボタン</a>
        ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/423799/32fcad5c-f254-8d35-87f6-64cd8ed5a362.png)
    </div>
    <div>
        <a target="_blank" href="https://blazor.syncfusion.com/documentation/check-box/getting-started">チェックボックス</a>
        ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/423799/bd21724b-5130-e33d-5e42-731770cf8c57.png)
    </div>
    <div>
        <a target="_blank" href="https://blazor.syncfusion.com/documentation/color-picker/getting-started">カラーピッカー</a>
        ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/423799/902acb72-45ee-6016-4f60-47fa0932ba68.png)
    </div>
    <div>
        <a target="_blank" href="https://blazor.syncfusion.com/documentation/file-upload/getting-started">ファイルアップロード</a>
        ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/423799/393fce28-0415-a77e-6057-663d598c9d93.png)
    </div>
    <div>
        <a target="_blank" href="https://blazor.syncfusion.com/documentation/range-slider/getting-started">レンジスライダー</a>
        ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/423799/8adcc7a7-c9d3-a691-c9dd-57b99fb332b5.png)
    </div>
    <div>
        <a target="_blank" href="https://blazor.syncfusion.com/documentation/toggle-switch-button/getting-started">トグルスイッチ</a>
        ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/423799/67626883-c97f-1683-ee4c-2b25fe3fbf15.png)
    </div>
</details>
<details>
    <summary>フォーム</summary>
    <div>
        <a target="_blank" href="https://blazor.syncfusion.com/documentation/in-place-editor/getting-started">直接編集</a>
        ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/423799/09744170-2c86-3876-c76f-3f7b3e72a68f.png)
    </div>
    <div>
        <a target="_blank" href="https://blazor.syncfusion.com/documentation/query-builder/getting-started">クエリビルダー</a>
        ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/423799/8417fbb1-54d4-b8d5-2095-f0b40ed7eab0.png)
    </div>
</details>
<details>
    <summary>ドロップダウン</summary>
    <div>
        <a target="_blank" href="https://blazor.syncfusion.com/documentation/autocomplete/getting-started">オートコンプリート</a>
        ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/423799/b3787fdb-9f27-b918-d1e7-9aeff3b1b7e2.png)
    </div>
    <div>
        <a target="_blank" href="https://blazor.syncfusion.com/documentation/listbox/getting-started">リストボックス</a>
        ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/423799/f13eafb0-bbae-6181-9e9d-e6904cd1e166.png)
    </div>
    <div>
        <a target="_blank" href="https://blazor.syncfusion.com/documentation/combobox/getting-started">コンボボックス</a>
        ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/423799/d793f427-71a4-6100-cf2d-59e85ea98b25.png)
    </div>
    <div>
        <a target="_blank" href="https://blazor.syncfusion.com/documentation/dropdown-list/getting-started">ドロップダウンリスト</a>
        ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/423799/4642e20c-3a49-1f23-982c-39634b61655b.png)
    </div>
    <div>
        <a target="_blank" href="https://blazor.syncfusion.com/documentation/multiselect-dropdown/getting-started">ドロップダウンリスト(複数選択)</a>
        ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/423799/8fa92e5d-835b-0df3-9905-39a7d91786b1.png)
    </div>
</details>
<details>
    <summary>ナビゲーション</summary>
    <div>
        <a target="_blank" href="https://blazor.syncfusion.com/documentation/accordion/getting-started">アコーディオン</a>
        ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/423799/db1e8e6c-1611-2e06-f33d-e229996f5dc6.png)
    </div>
    <div>
        <a target="_blank" href="https://blazor.syncfusion.com/documentation/context-menu/getting-started">コンテキストメニュー</a>
       ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/423799/f7ca2777-3866-8234-744e-878574a8514b.png)
    </div>
    <div>
        <a target="_blank" href="https://blazor.syncfusion.com/documentation/menu-bar/getting-started">メニューバー</a>
        ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/423799/3776141e-d328-4869-d5ad-9a57e7d45da3.png)
    </div>
    <div>
        <a target="_blank" href="https://blazor.syncfusion.com/documentation/sidebar/getting-started">サイドバー</a>
        ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/423799/420f9819-1bd3-a06d-5e3f-b9b36edbea4d.png)
    </div>
    <div>
        <a target="_blank" href="https://blazor.syncfusion.com/documentation/tabs/getting-started">タブ</a>
        ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/423799/19866cea-7a51-b5e9-3a0b-f25e70de52e6.png)
    </div>
    <div>
        <a target="_blank" href="https://blazor.syncfusion.com/documentation/toolbar/getting-started">ツールバー</a>
        ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/423799/e37550ed-8776-93f9-586f-a9298d3985f8.png)
    </div>
    <div>
        <a target="_blank" href="https://blazor.syncfusion.com/documentation/treeview/getting-started">ツリー表示</a>
        ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/423799/f0625a10-852f-60d9-c358-b352a77ca785.png)
    </div>
    <div>
        <a target="_blank" href="https://blazor.syncfusion.com/documentation/file-manager/getting-started">ファイルマネージャー</a>
        ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/423799/58d8bed0-f205-1761-8301-41ca0eca3e33.png)
    </div>
</details>
<details>
    <summary>通知</summary>
    <div>
        <a target="_blank" href="https://blazor.syncfusion.com/documentation/toast/getting-started">トースト</a>
        ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/423799/33f65086-ca73-b427-de36-52f3b0a13b15.png)
    </div>
    <div>
        <a target="_blank" href="https://blazor.syncfusion.com/documentation/progress-bar/getting-started">プログレスバー</a>
        ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/423799/31a4a5e8-76e9-8be0-d443-071eaccc7506.png)
    </div>
    <div>
        <a target="_blank" href="https://blazor.syncfusion.com/documentation/spinner/getting-started">スピナー</a>
        ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/423799/4f0452fb-1ec8-969b-e3f8-05d1197ea96a.png)
    </div>
    <div>
        <a target="_blank" href="https://blazor.syncfusion.com/documentation/badge/getting-started">バッジ</a>
        ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/423799/e5ae375a-d1e6-7952-7d8a-fe85a7387d29.png)
    </div>
</details>


## 次の章へ

導入したコンポーネントを実際に使用して、ページを作成します。（予定）