基于 .net/.net core 实现 9 款开源、免费、实用、美观的 Blazor UI 框架，有你的菜嘛

前言

本文主要分享 9 款开源、免费、实用、美观的 Blazor UI 框架，提供给广大 C#/.NET 开发者们学习和使用（注意：排名不分先后，都是十分优秀的开源框架和项目）。这些框架都已收录到 C#/.NET/.NET Core 优秀项目和框架精选中，关注优秀项目和框架精选能让你及时了解 C#、.NET 和 .NET Core 领域的最新动态和最佳实践，提高开发效率和质量。坑已挖，欢迎大家踊跃提交 PR，自荐（让优秀的项目和框架不被埋没）。

GitHub 项目仓库收集地址

• https://github.com/YSGStudyHards/DotNetGuide/blob/main/docs/DotNet/DotNetProjectPicks.md

Ant Design Blazor

• 使用文档：https://antblazor.com/zh-CN/docs/introduce
• GitHub 项目地址：https://github.com/ant-design-blazor/ant-design-blazor

项目介绍

Ant Design Blazor 是一套基于 Ant Design 和 Blazor 的企业级组件库（喜欢 Ant Design 风格的同学推荐使用）。

项目特点

• 提炼自企业级中后台产品的交互语言和视觉风格。
• 开箱即用的高质量 Blazor 组件，可在多种托管方式共享。
• 支持基于 WebAssembly 的前端和基于 SignalR 的服务端 UI 即时交互。
• 支持渐进式 Web 应用（PWA）
• 使用 C# 构建，多范式静态语言带来高效的开发体验。
• ⚙️ 支持 .NET Core 3.1 以上所有版本，可直接引用丰富的 .NET 类库。
• 数十个国际化语言支持。
• 基于 MIT 开源协议，.NET 基金会项目，商业应用免费。

项目截图

BootstrapBlazor

• 使用文档：https://www.blazor.zone/introduction
• Gitee 项目地址：https://gitee.com/LongbowEnterprise/BootstrapBlazor

项目介绍

BootstrapBlazor 是一套基于 Bootstrap 和 Blazor 的企业级组件库，可以认为是 Bootstrap 项目的 Blazor 版实现。基于 Bootstrap 样式库精心打造，并且额外增加了 100 多种常用的组件，为您快速开发项目带来非一般的感觉（喜欢 Bootstrap 风格的同学推荐使用）。

项目截图

MudBlazor

• 使用文档：https://mudblazor.com/docs/overview
• GitHub 项目地址：https://github.com/MudBlazor/MudBlazor

项目介绍

MudBlazor 是一个基于 Material Design 的 Blazor 组件框架，注重易用性和清晰的结构。它非常适合想要快速构建Web应用程序的 .NET 开发人员，无需费力地处理 CSS 和 JavaScript。由于 MudBlazor 完全使用 C# 编写，因此您可以自由地调整、修复或扩展该框架。文档中有大量示例代码，使理解和学习 MudBlazor 非常容易。

项目特点

基于 Material Design 的清晰美观的图形设计。

1. 易于理解的结构。
2. 良好的文档和许多示例和源代码片段。
3. 所有组件全部使用 C# 编写，不允许使用 JavaScript（除非绝对必要）。
4. 用户可以创建漂亮的应用程序，而无需使用 CSS（当然也可以使用 CSS）。
5. 不依赖其他组件库，完全控制组件和功能。
6. 稳定性！我们努力实现完整的测试覆盖率。
7. 频繁发布版本，以便开发人员及时获得其 Pull Request 和修复。

项目截图

MatBlazor

• 使用文档：https://www.matblazor.com/
• GitHub 项目地址：https://github.com/SamProf/MatBlazor

项目介绍

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

项目截图

Blazorise

• 使用文档：https://blazorise.com/docs
• GitHub 项目地址：https://github.com/Megabit/Blazorise

项目介绍

Blazorise 是用于 Blazor 的 UI 组件库，支持使用 Bootstrap、Tailwind、Bulma、Ant Design 和 Material 等 CSS 框架，可用于构建响应式的单页 Web 应用程序。

项目截图

Microsoft Fluent UI Blazor

• 使用文档：https://www.fluentui-blazor.net/
• GitHub 项目地址：https://github.com/microsoft/fluentui-blazor

项目介绍

Microsoft Fluent UI Blazor 是一个基于 Blazor 的组件库，提供了一系列的UI组件以及 Fluent UI 的设计系统。该库可以帮助开发人员快速构建现代化的 Web 应用程序，并且与 Blazor 技术相结合，可以实现高效而灵活的单页应用程序开发。

项目截图

Radzen Blazor

• 使用文档：https://blazor.radzen.com/
• GitHub 项目地址：https://github.com/radzenhq/radzen-blazor

项目介绍

Radzen Blazor 是一个包含 70 多个免费的原生 Blazor UI 组件的集合，其中包括 DataGrid、Scheduler、Charts 等功能强大的组件，并提供了丰富的主题样式，包括 Material Design 和 FluentUI。可以将 Radzen Blazor 视为一个用于构建 Blazor 应用程序的 UI 框架，它提供了一系列预构建的组件和工具，帮助开发人员快速搭建和定制自己的应用程序界面。

项目截图

• Radzen Blazor Studio，https://www.radzen.com/blazor-studio/download/#windows

MASA.Blazor

• 使用文档：https://docs.masastack.com/blazor/getting-started/installation
• GitHub 项目地址：https://github.com/masastack/MASA.Blazor

项目介绍

基于 Material 设计规范和 BlazorComponent 的交互能力提供标准的基础组件库。提供如布局、弹框标准、Loading、全局异常处理等标准场景的预置组件。从更多实际场景出发，满足更多用户和场景的需求，最大的减少开发者的时间成本。缩短开发周期提高开发效率。

项目特点

• 丰富组件：包含 Vuetify 1:1 还原的基础组件，以及很多实用的预置组件和 .Net 深度集成功能，包括 Url、面包屑、导航三联动，高级搜索，i18n 等。
• UI设计语言：设计风格现代，UI 多端体验设计优秀。
• 专业示例：MASA Blazor Pro 提供多种常见场景的预设布局。
• 简易上手：丰富详细的上手文档，免费的视频教程（制作中）。
• 社区活跃鼓励：用户参与实时互动，做出贡献加入我们，构建最开放的开源社区。
• 长期支持：全职团队维护，长期提供支持，并提供企业级支持。
• 知名企业选择：该技术框架被多家知名企业选择使用，未来 MASA Stack 产品线也将一直使用，持续增加新功能。

项目截图

BlazorStrap

• 使用文档：https://getbootstrap.com/docs/5.1/getting-started/introduction/
• GitHub 项目地址：https://github.com/chanan/BlazorStrap

项目介绍

BlazorStrap 是一个基于 Bootstrap 的 Blazor 的 UI 组件库，BlazorStrap 的组件也支持响应式布局、主题定制以及多语言支持等功能，可以帮助开发者快速搭建出美观、易用的 Web 应用程序。

项目截图

转载声明

• 原文地址：https://mp.weixin.qq.com/s/Fgr_5QpjDKiJO7nw2SCXIw