本日、Da Yao は、マテリアル デザイン仕様に基づいた、オープンソース (MIT ライセンス) かつ無料の汎用 Blazor および Razor コンポーネント ライブラリのセットである MatBlazor を紹介します。

Blazorの紹介

Blazorは、HTML、CSS、C#をベースにした最新のフロントエンドWebフレームワークで、Webアプリケーションを迅速に構築するのに役立ちます。Blazorを使用すると、クライアントとサーバーの両方で実行できる再利用可能なコンポーネントを使用してWebアプリケーションを構築し、優れたWebエクスペリエンスを提供できます。

コンポーネントライブラリのインストール

コマンドのインストール:

 Install-Package MatBlazor

または：

 dotnet add package MatBlazor

NuGet パッケージ マネージャーのインストール:

スクリプトのインポート

クライアント側とサーバー側の両方の Blazor プロジェクトでは、スクリプト セクションを index.html または _Host.cshtml (head セクション) に追加する必要があります。

 <script src="_content/MatBlazor/dist/matBlazor.js"></script> <link href="_content/MatBlazor/dist/matBlazor.css" rel="stylesheet" />

コンポーネントライブラリの使用

（1）ボタン：

 <MatButton OnClick="@Click">Text @ButtonState</MatButton> <MatButton Raised="true">Raised</MatButton> <MatButton Unelevated="true">Unelevated</MatButton> <MatButton Outlined="true">Outlined</MatButton> <MatButton Dense="true">Dense</MatButton> @code { string ButtonState = ""; void Click(MouseEventArgs e) { ButtonState = "Clicked"; } }

(2) ツリービュー:

 <MatTreeView TNode="TreeNodeModel" RootNode="@MyRootNode" GetChildNodesCallback="@((n)=>n.Nodes)"> <NodeTemplate> @context.Name </NodeTemplate> </MatTreeView> @code { class TreeNodeModel { public string Name { get; set; } public TreeNodeModel[] Nodes { get; set; } = new TreeNodeModel[0]; } TreeNodeModel MyRootNode = new TreeNodeModel() { Name = "Book", Nodes = new TreeNodeModel[] { new TreeNodeModel(){ Name = "Chapter 1", Nodes = new TreeNodeModel[] { new TreeNodeModel(){ Name = "Heading", }, new TreeNodeModel(){ Name = "Content", } } }, new TreeNodeModel(){ Name = "Chapter 2", Nodes = new TreeNodeModel[] { new TreeNodeModel(){ Name = "Heading", }, new TreeNodeModel(){ Name = "Content", } } }, new TreeNodeModel(){ Name = "Chapter 3", Nodes = new TreeNodeModel[] { new TreeNodeModel(){ Name = "Heading", }, new TreeNodeModel(){ Name = "Content", } } } } }; }

（３）タブ：

 <MatTabGroup> <MatTab Label="First"> First Content </MatTab> <MatTab Label="Second"> Second Content </MatTab> <MatTab> <LabelContent> Third <MatIcon Icnotallow="@MatIconNames.Close"></MatIcon> </LabelContent> <ChildContent> Third Content </ChildContent> </MatTab> </MatTabGroup>

プロジェクトのソースコードを実行する

MatBlazor.Demo をスタートアップ プロジェクトとして設定します。

プロジェクトのソースコードアドレス

プロジェクトのより便利な機能や機能については、プロジェクトのオープンソース アドレス 👀 にアクセスしてください。また、プロジェクトにスターを付けてサポートを示すこともお忘れなく 💖 ください。

GitHub オープンソース アドレス: https://github.com/SamProf/MatBlazor