一套基于 Material Design 规范实现的 Blazor 和 Razor 通用组件库

2025-10-18
广东
本文字数：2944 字
阅读完需：约 10 分钟

前言

今天大姚给大家分享一套基于 Material Design 规范实现的、开源（MIT license）且免费的 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" />

复制代码

组件库使用

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";            }         }

复制代码

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",                            }                        }                    }                }            };        }

复制代码

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

发布于: 刚刚阅读数: 3

原文链接:【http://xie.infoq.cn/article/f72b3f410ee5a2dff5c98846b】。文章转载请联系作者。

追逐时光者

关注

不积跬步无以至千里，不积小流无以成江海！ 2020-01-14 加入

微软MVP、华为云HCDE、华为云云享专家、51CTO专家博主、阿里云专家博主、博客园推荐博客、CSDN博客专家、腾讯云创作之星、掘金优秀创作者，一个热爱开源的全栈软件工程师，擅长C#、.NET、Vue等相关技术开发。

发布

暂无评论

创作场景

一套基于 Material Design 规范实现的 Blazor 和 Razor 通用组件库

前言

Blazor 介绍

组件库安装

命令安装

NuGet 包管理器安装

脚本引入

组件库使用

Button

TreeView

Tab

项目源代码运行

项目源码地址

优秀项目和框架精选

追逐时光者

评论