一个遵循 Material Design 设计规范、开源免费的 Blazor 组件库

前言

今天大姚给大家分享一个遵循 Material Design 设计规范、开源免费(MIT License)的 Blazor 组件库:MASA Blazor。

Blazor 介绍

Blazor 是基于 HTML、CSS 和 C# 的现代前端 Web 框架,可帮助你更快地生成 Web 应用。使用 Blazor,你可以使用可从客户端和服务器运行的可重用组件生成 Web 应用,以便提供出色的 Web 体验。

项目介绍

MASA Blazor 是一个遵循 Material Design 设计规范、开源免费(MIT License)的 Blazor 组件库。它提供如布局、弹框标准、Loading、全局异常处理等标准场景的预置组件,从更多实际场景出发,满足更多用户和场景的需求,最大的减少开发者的时间成本。缩短开发周期提高开发效率。

项目特点

  • UI设计语言 :采用现代设计风格,提供优秀的UI多端体验设计。
  • 开源且易于入门 :项目基于 MIT License 协议开源、提供了丰富且详细的入门文档。
  • 丰富的组件 :MASA Blazor包含了Vuetify 1:1还原的基本组件,以及许多实用的预设组件和.Net的深度集成功能。这包括Url、面包屑导航、高级搜索、i18n等三联动功能。

快速入门使用

要快速入门使用MASA Blazor,我们可以使用 MASA.Template 模板快速创建项目。

安装 MASA.Template 模板

复制代码
dotnet new install MASA.Template

MASA.Template 提供了以下模板:

复制代码
masablazor: MASA Blazor Web App 模板 (添加自v1.3.0)
masablazor-server: MASA Blazor Server 模板
masablazor-wasm: MASA Blazor WebAssembly 模板
masablazor-empty-server: MASA Blazor Server 空模板
masablazor-empty-wasm: MASA Blazor WebAssembly 空模板
masablazor-pro-server: MASA Blazor Pro Server 模板
masablazor-pro-wasm: MASA Blazor Pro WebAssembly 模板
masablazor-maui: MASA Blazor MAUI 模板
masablazor-wpf: MASA Blazor WPF 模板
masablazor-photino: MASA Blazor Photino 模板
masablazor-winform: MASA Blazor Winform 模板

每个模板都提供了相应的模板选项,可以通过 dotnet new <模板名称> -h 查看。

如下我们以masablazor-server为例:

复制代码
dotnet new masablazor-server -h

创建项目

以 masablazor-server 模板为例,创建项目,并使用 -o 指定输出目录和项目名称。

复制代码
dotnet new masablazor-server -o MasaBlazorTest 

启动项目

项目创建成功,通过运行以下命令启动项目:

复制代码
`cd` MasaBlazorTest
dotnet run
http://localhost:5174

更多 UI 组件效果展示

项目源码地址

更多项目实用功能和特性欢迎前往项目开源地址查看👀,别忘了给项目一个Star支持💖。

优秀项目和框架精选

该项目已收录到C#/.NET/.NET Core优秀项目和框架精选中,关注优秀项目和框架精选能让你及时了解C#、.NET和.NET Core领域的最新动态和最佳实践,提高开发工作效率和质量。坑已挖,欢迎大家踊跃提交PR推荐或自荐(让优秀的项目和框架不被埋没🤞)。

相关推荐
追逐时光者3 天前
Visual Studio 现已支持新的、更简洁的解决方案文件(slnx)格式
【visual studio】·【.net】
追逐时光者4 天前
C#/.NET/.NET Core技术前沿周刊 | 第 46 期(2025年7.7-7.13)
【.net】·【c#】·【.net core】·【技术前沿周刊】
追逐时光者9 天前
使用 OpenAuth.Net 快速搭建 .NET 企业级权限工作流系统
【.net】·【c#】·【开源项目】·【.net core】
追逐时光者10 天前
C# 中 const 和 readonly 关键字的区别和用法
【.net】·【c#】·【面试指南】·【拾遗补漏】
追逐时光者11 天前
C#/.NET/.NET Core技术前沿周刊 | 第 45 期(2025年7.1-7.6)
【.net】·【技术前沿周刊】
追逐时光者13 天前
精选 10 个 C#/.NET 开发必备开源库!
【.net】·【c#】·【.net core】