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

前言

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

Blazor 介绍

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

• 全面的ASP.NET Core Blazor简介和快速入门
  

项目介绍

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 MasaBlazorTestdotnet runhttp://localhost:5174

更多 UI 组件效果展示

项目源码地址

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

• GitHub 开源地址： https://github.com/masastack/MASA.Blazor
  

优秀项目和框架精选

该项目已收录到 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