一套基于 Material Design 规范实现的 Blazor 和 Razor 通用组件库
前言<br><link href="_content/MatBlazor/dist/matBlazor.css" rel="stylesheet" /><br><link href="_content/MatBlazor/dist/matBlazor.css" rel="stylesheet" /><br><link href="_content/MatBlazor/dist/matBlazor.css" rel="stylesheet" />今天大姚给大家分享一套基于 Material Design 规范实现的、开源（MIT license）且免费的 Blazor 和 Razor 通用组件库：MatBlazor。<br><link href="_content/MatBlazor/dist/matBlazor.css" rel="stylesheet" />Blazor介绍<br><link href="_content/MatBlazor/dist/matBlazor.css" rel="stylesheet" /><br><link href="_content/MatBlazor/dist/matBlazor.css" rel="stylesheet" /><br><link href="_content/MatBlazor/dist/matBlazor.css" rel="stylesheet" />Blazor 是基于 HTML、CSS 和 C# 的现代前端 Web 框架，可帮助你更快地生成 Web 应用。使用 Blazor，你可以使用可从客户端和服务器运行的可重用组件生成 Web 应用，以便提供出色的 Web 体验。<br><link href="_content/MatBlazor/dist/matBlazor.css" rel="stylesheet" />组件库安装<br><link href="_content/MatBlazor/dist/matBlazor.css" rel="stylesheet" /><br><link href="_content/MatBlazor/dist/matBlazor.css" rel="stylesheet" />命令安装<br><link href="_content/MatBlazor/dist/matBlazor.css" rel="stylesheet" /><br><link href="_content/MatBlazor/dist/matBlazor.css" rel="stylesheet" />Install-Package MatBlazor<br>或者<br><link href="_content/MatBlazor/dist/matBlazor.css" rel="stylesheet" />dotnet add package MatBlazorNuGet包管理器安装<br><link href="_content/MatBlazor/dist/matBlazor.css" rel="stylesheet" /><br><link href="_content/MatBlazor/dist/matBlazor.css" rel="stylesheet" /><br><link href="_content/MatBlazor/dist/matBlazor.css" rel="stylesheet" />脚本引入<br><link href="_content/MatBlazor/dist/matBlazor.css" rel="stylesheet" /><br><link href="_content/MatBlazor/dist/matBlazor.css" rel="stylesheet" /><br><link href="_content/MatBlazor/dist/matBlazor.css" rel="stylesheet" />对于客户端和服务器端的Blazor项目需要将脚本部分添加到 index.html 或 _Host.cshtml（head 部分）。<br><link href="_content/MatBlazor/dist/matBlazor.css" rel="stylesheet" /><br><link href="_content/MatBlazor/dist/matBlazor.css" rel="stylesheet" />组件库使用<br><link href="_content/MatBlazor/dist/matBlazor.css" rel="stylesheet" /><br><link href="_content/MatBlazor/dist/matBlazor.css" rel="stylesheet" />Button<br><link href="_content/MatBlazor/dist/matBlazor.css" rel="stylesheet" /><br><link href="_content/MatBlazor/dist/matBlazor.css" rel="stylesheet" /> Text @ButtonState<br><link href="_content/MatBlazor/dist/matBlazor.css" rel="stylesheet" /> Raised<br><link href="_content/MatBlazor/dist/matBlazor.css" rel="stylesheet" /> Unelevated<br><link href="_content/MatBlazor/dist/matBlazor.css" rel="stylesheet" /> Outlined<br><link href="_content/MatBlazor/dist/matBlazor.css" rel="stylesheet" /> Dense<br><link href="_content/MatBlazor/dist/matBlazor.css" rel="stylesheet" /><br><link href="_content/MatBlazor/dist/matBlazor.css" rel="stylesheet" /> @code<br><link href="_content/MatBlazor/dist/matBlazor.css" rel="stylesheet" /> {<br><link href="_content/MatBlazor/dist/matBlazor.css" rel="stylesheet" /> string ButtonState = "";<br><link href="_content/MatBlazor/dist/matBlazor.css" rel="stylesheet" /><br><link href="_content/MatBlazor/dist/matBlazor.css" rel="stylesheet" /> void Click(MouseEventArgs e)<br><link href="_content/MatBlazor/dist/matBlazor.css" rel="stylesheet" /> {<br><link href="_content/MatBlazor/dist/matBlazor.css" rel="stylesheet" /> ButtonState = "Clicked";<br><link href="_content/MatBlazor/dist/matBlazor.css" rel="stylesheet" /> }<br><link href="_content/MatBlazor/dist/matBlazor.css" rel="stylesheet" /><br><link href="_content/MatBlazor/dist/matBlazor.css" rel="stylesheet" /> }<br><link href="_content/MatBlazor/dist/matBlazor.css" rel="stylesheet" /><br><link href="_content/MatBlazor/dist/matBlazor.css" rel="stylesheet" />TreeView<br><link href="_content/MatBlazor/dist/matBlazor.css" rel="stylesheet" /><br><link href="_content/MatBlazor/dist/matBlazor.css" rel="stylesheet" /> <br><link href="_content/MatBlazor/dist/matBlazor.css" rel="stylesheet" /> <br><link href="_content/MatBlazor/dist/matBlazor.css" rel="stylesheet" /> @context.Name<br><link href="_content/MatBlazor/dist/matBlazor.css" rel="stylesheet" /> <br><link href="_content/MatBlazor/dist/matBlazor.css" rel="stylesheet" /> <br><link href="_content/MatBlazor/dist/matBlazor.css" rel="stylesheet" /><br><link href="_content/MatBlazor/dist/matBlazor.css" rel="stylesheet" /> @code<br><link href="_content/MatBlazor/dist/matBlazor.css" rel="stylesheet" /> {<br><link href="_content/MatBlazor/dist/matBlazor.css" rel="stylesheet" /> class TreeNodeModel<br><link href="_content/MatBlazor/dist/matBlazor.css" rel="stylesheet" /> {<br><link href="_content/MatBlazor/dist/matBlazor.css" rel="stylesheet" /> public string Name { get; set; }<br><link href="_content/MatBlazor/dist/matBlazor.css" rel="stylesheet" /> public TreeNodeModel[] Nodes { get; set; } = new TreeNodeModel;<br><link href="_content/MatBlazor/dist/matBlazor.css" rel="stylesheet" /> }<br><link href="_content/MatBlazor/dist/matBlazor.css" rel="stylesheet" /><br><link href="_content/MatBlazor/dist/matBlazor.css" rel="stylesheet" /> TreeNodeModel MyRootNode = new TreeNodeModel()<br><link href="_content/MatBlazor/dist/matBlazor.css" rel="stylesheet" /> {<br><link href="_content/MatBlazor/dist/matBlazor.css" rel="stylesheet" /> Name = "Book",<br><link href="_content/MatBlazor/dist/matBlazor.css" rel="stylesheet" /> Nodes = new TreeNodeModel[] {<br><link href="_content/MatBlazor/dist/matBlazor.css" rel="stylesheet" /> new TreeNodeModel(){<br><link href="_content/MatBlazor/dist/matBlazor.css" rel="stylesheet" /> Name = "Chapter 1",<br><link href="_content/MatBlazor/dist/matBlazor.css" rel="stylesheet" /> Nodes = new TreeNodeModel[] {<br><link href="_content/MatBlazor/dist/matBlazor.css" rel="stylesheet" /> new TreeNodeModel(){<br><link href="_content/MatBlazor/dist/matBlazor.css" rel="stylesheet" /> Name = "Heading",<br><link href="_content/MatBlazor/dist/matBlazor.css" rel="stylesheet" /> },<br><link href="_content/MatBlazor/dist/matBlazor.css" rel="stylesheet" /> new TreeNodeModel(){<br><link href="_content/MatBlazor/dist/matBlazor.css" rel="stylesheet" /> Name = "Content",<br><link href="_content/MatBlazor/dist/matBlazor.css" rel="stylesheet" /> }<br><link href="_content/MatBlazor/dist/matBlazor.css" rel="stylesheet" /> }<br><link href="_content/MatBlazor/dist/matBlazor.css" rel="stylesheet" /> },<br><link href="_content/MatBlazor/dist/matBlazor.css" rel="stylesheet" /> new TreeNodeModel(){<br><link href="_content/MatBlazor/dist/matBlazor.css" rel="stylesheet" /> Name = "Chapter 2",<br><link href="_content/MatBlazor/dist/matBlazor.css" rel="stylesheet" /> Nodes = new TreeNodeModel[] {<br><link href="_content/MatBlazor/dist/matBlazor.css" rel="stylesheet" /> new TreeNodeModel(){<br><link href="_content/MatBlazor/dist/matBlazor.css" rel="stylesheet" /> Name = "Heading",<br><link href="_content/MatBlazor/dist/matBlazor.css" rel="stylesheet" /> },<br><link href="_content/MatBlazor/dist/matBlazor.css" rel="stylesheet" /> new TreeNodeModel(){<br><link href="_content/MatBlazor/dist/matBlazor.css" rel="stylesheet" /> Name = "Content",<br><link href="_content/MatBlazor/dist/matBlazor.css" rel="stylesheet" /> }<br><link href="_content/MatBlazor/dist/matBlazor.css" rel="stylesheet" /> }<br><link href="_content/MatBlazor/dist/matBlazor.css" rel="stylesheet" /> },<br><link href="_content/MatBlazor/dist/matBlazor.css" rel="stylesheet" /> new TreeNodeModel(){<br><link href="_content/MatBlazor/dist/matBlazor.css" rel="stylesheet" /> Name = "Chapter 3",<br><link href="_content/MatBlazor/dist/matBlazor.css" rel="stylesheet" /> Nodes = new TreeNodeModel[] {<br><link href="_content/MatBlazor/dist/matBlazor.css" rel="stylesheet" /> new TreeNodeModel(){<br><link href="_content/MatBlazor/dist/matBlazor.css" rel="stylesheet" /> Name = "Heading",<br><link href="_content/MatBlazor/dist/matBlazor.css" rel="stylesheet" /> },<br><link href="_content/MatBlazor/dist/matBlazor.css" rel="stylesheet" /> new TreeNodeModel(){<br><link href="_content/MatBlazor/dist/matBlazor.css" rel="stylesheet" /> Name = "Content",<br><link href="_content/MatBlazor/dist/matBlazor.css" rel="stylesheet" /> }<br><link href="_content/MatBlazor/dist/matBlazor.css" rel="stylesheet" /> }<br><link href="_content/MatBlazor/dist/matBlazor.css" rel="stylesheet" /> }<br><link href="_content/MatBlazor/dist/matBlazor.css" rel="stylesheet" /> }<br><link href="_content/MatBlazor/dist/matBlazor.css" rel="stylesheet" /> };<br><link href="_content/MatBlazor/dist/matBlazor.css" rel="stylesheet" /> }<br><link href="_content/MatBlazor/dist/matBlazor.css" rel="stylesheet" />Tab<br><link href="_content/MatBlazor/dist/matBlazor.css" rel="stylesheet" /><br><link href="_content/MatBlazor/dist/matBlazor.css" rel="stylesheet" /> <br><link href="_content/MatBlazor/dist/matBlazor.css" rel="stylesheet" /> <br><link href="_content/MatBlazor/dist/matBlazor.css" rel="stylesheet" /> First Content<br><link href="_content/MatBlazor/dist/matBlazor.css" rel="stylesheet" /> <br><link href="_content/MatBlazor/dist/matBlazor.css" rel="stylesheet" /> <br><link href="_content/MatBlazor/dist/matBlazor.css" rel="stylesheet" /> Second Content<br><link href="_content/MatBlazor/dist/matBlazor.css" rel="stylesheet" /> <br><link href="_content/MatBlazor/dist/matBlazor.css" rel="stylesheet" /> <br><link href="_content/MatBlazor/dist/matBlazor.css" rel="stylesheet" /> <br><link href="_content/MatBlazor/dist/matBlazor.css" rel="stylesheet" /> Third <br><link href="_content/MatBlazor/dist/matBlazor.css" rel="stylesheet" /> <br><link href="_content/MatBlazor/dist/matBlazor.css" rel="stylesheet" /> <br><link href="_content/MatBlazor/dist/matBlazor.css" rel="stylesheet" /> Third Content<br><link href="_content/MatBlazor/dist/matBlazor.css" rel="stylesheet" /> <br><link href="_content/MatBlazor/dist/matBlazor.css" rel="stylesheet" /> <br><link href="_content/MatBlazor/dist/matBlazor.css" rel="stylesheet" /> <br><link href="_content/MatBlazor/dist/matBlazor.css" rel="stylesheet" /><br><link href="_content/MatBlazor/dist/matBlazor.css" rel="stylesheet" />项目源代码运行<br><link href="_content/MatBlazor/dist/matBlazor.css" rel="stylesheet" /><br><link href="_content/MatBlazor/dist/matBlazor.css" rel="stylesheet" /><br><link href="_content/MatBlazor/dist/matBlazor.css" rel="stylesheet" />设置MatBlazor.Demo为启动项目运行：<br><link href="_content/MatBlazor/dist/matBlazor.css" rel="stylesheet" /><br><link href="_content/MatBlazor/dist/matBlazor.css" rel="stylesheet" /><br><link href="_content/MatBlazor/dist/matBlazor.css" rel="stylesheet" /><br><link href="_content/MatBlazor/dist/matBlazor.css" rel="stylesheet" /><br><link href="_content/MatBlazor/dist/matBlazor.css" rel="stylesheet" />https://img2024.cnblogs.com/blog/1336199/202502/1336199-20250228001751402-1638258752.png<br><link href="_content/MatBlazor/dist/matBlazor.css" rel="stylesheet" /><br><link href="_content/MatBlazor/dist/matBlazor.css" rel="stylesheet" />项目源码地址<br><link href="_content/MatBlazor/dist/matBlazor.css" rel="stylesheet" /><br><link href="_content/MatBlazor/dist/matBlazor.css" rel="stylesheet" /><br><link href="_content/MatBlazor/dist/matBlazor.css" rel="stylesheet" /><br><link href="_content/MatBlazor/dist/matBlazor.css" rel="stylesheet" />更多项目实用功能和特性欢迎前往项目开源地址查看<br><link href="_content/MatBlazor/dist/matBlazor.css" rel="stylesheet" />来源：程序园用户自行投稿发布，如果侵权，请联系站长删除<br><link href="_content/MatBlazor/dist/matBlazor.css" rel="stylesheet" />免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！
页:
[1]