一套基于 Material Design 规范实现的 Blazor 和 Razor 通用组件库
前言今天大姚给大家分享一套基于 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="https://www.cnblogs.com/Can-daydayup/p/_content/MatBlazor/dist/matBlazor.js"></script>
<link href="https://www.cnblogs.com/Can-daydayup/p/_content/MatBlazor/dist/matBlazor.css" rel="stylesheet" />组件库使用
Button
<MatButton >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";
}
}
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;
}
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",
}
}
}
}
};
}
Tab
<MatTabGroup>
<MatTab Label="First">
First Content
</MatTab>
<MatTab Label="Second">
Second Content
</MatTab>
<MatTab>
<LabelContent>
Third <MatIcon Icon="@MatIconNames.Close"></MatIcon>
</LabelContent>
<ChildContent>
Third Content
</ChildContent>
</MatTab>
</MatTabGroup>
项目源代码运行
设置MatBlazor.Demo为启动项目运行：
项目源码地址
更多项目实用功能和特性欢迎前往项目开源地址查看👀，别忘了给项目一个Star支持💖。
[*]GitHub开源地址：https://github.com/SamProf/MatBlazor
优秀项目和框架精选
该项目已收录到C#/.NET/.NET Core优秀项目和框架精选中，关注优秀项目和框架精选能让你及时了解C#、.NET和.NET Core领域的最新动态和最佳实践，提高开发工作效率和质量。坑已挖，欢迎大家踊跃提交PR推荐或自荐（让优秀的项目和框架不被埋没🤞）。
[*]GitHub开源地址：https://github.com/YSGStudyHards/DotNetGuide/blob/main/docs/DotNet/DotNetProjectPicks.md
[*]Gitee开源地址：https://gitee.com/ysgdaydayup/DotNetGuide/blob/main/docs/DotNet/DotNetProjectPicks.md
页:
[1]