一套基于 Material Design 規范實現的 Blazor 和 Razor 通用組件庫
作者：大姚
今天給大家分享一套基于 Material Design 規范實現的、開源（MIT license）且免費的 Blazor 和 Razor 通用組件庫：MatBlazor。
今天大姚給大家分享一套基于 Material Design 規范實現的、開源（MIT license）且免費的 Blazor 和 Razor 通用組件庫：MatBlazor。
Blazor介紹
Blazor 是基于 HTML、CSS 和 C# 的現代前端 Web 框架，可幫助你更快地生成 Web 應用。使用 Blazor，你可以使用可從客戶端和服務器運行的可重用組件生成 Web 應用，以便提供出色的 Web 體驗。
組件庫安裝
命令安裝：
Install-Package MatBlazor或者：
dotnet add package MatBlazorNuGet包管理器安裝：
腳本引入
對于客戶端和服務器端的Blazor項目需要將腳本部分添加到 index.html 或 _Host.cshtml（head 部分）。
<script src="_content/MatBlazor/dist/matBlazor.js"></script>
<link href="_content/MatBlazor/dist/matBlazor.css" rel="stylesheet" />組件庫使用
(1) Button：
<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) TreeView：
<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",
}
}
}
}
};
}
(3) Tab：
<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為啟動項目運行：
項目源碼地址
更多項目實用功能和特性歡迎前往項目開源地址查看??，別忘了給項目一個Star支持??。
GitHub開源地址：https://github.com/SamProf/MatBlazor
責任編輯：趙寧寧
來源：
追逐時光者
