值得推荐的Blazor UI组件库

eab2706007390c936c036f99cd147e6d.png

d027e217abf83fd7080b390d6d6f08ee.jpeg

前言

  本文主要是推荐一些开源、免费、实用、美观的Blazor UI组件库,提供给广大C#/.NET开发者们学习和使用(注意:排名不分先后,都是十分优秀的开源框架和项目💖)。本文中的所有框架都已经收录到适合后端程序员的前端框架GitHub Issues知识库中,假如大家有更好组件库推荐欢迎到以下GitHub项目地址留言或者在文末留言。

GitHub项目仓库收集地址:https://github.com/YSGStudyHards/DotNetGuide/issues/12

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 基金会项目,商业应用免费。

项目截图

48ccbd20c28177a22c1634f929999fb6.png

38888540af1a1b929eebf287eb2afc7e.png

8feba9601b4954ca6873c177d664ed65.png

BootstrapBlazor

使用文档:https://www.blazor.zone/introduction

Gitee项目地址:https://gitee.com/LongbowEnterprise/BootstrapBlazor

项目介绍

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

项目截图

a6fd4f82e98ec17e3694faf383c21e9e.png

5f1493b5a3bbf1ba49b578ca9a37c4bd.png

d88bed2afe6997ff73e97ce24db64e24.png

MudBlazor

使用文档:https://mudblazor.com/docs/overview

GitHub项目地址:https://github.com/MudBlazor/MudBlazor

项目介绍

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

项目特点

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

  2. 易于理解的结构。

  3. 良好的文档和许多示例和源代码片段。

  4. 所有组件全部使用 C# 编写,不允许使用 JavaScript(除非绝对必要)。

  5. 用户可以创建漂亮的应用程序,而无需使用 CSS(当然也可以使用 CSS)。

  6. 不依赖其他组件库,完全控制组件和功能。

  7. 稳定性!我们努力实现完整的测试覆盖率。

  8. 频繁发布版本,以便开发人员及时获得其 Pull Request 和修复。

项目截图

7616a872a97498e9731ffdcae97a601c.png

2004cd64e5ddb099a5d88ad46e24299d.png

1b32cb519290d7b4e3ff154b972b2804.png

MatBlazor

使用文档:https://www.matblazor.com/

GitHub项目地址:https://github.com/SamProf/MatBlazor

项目介绍

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

项目截图

75807bad0c72e6c2e03d22e0c7c4f23e.png

a00db778c4e344f6b11397c917a9c836.png

1aaf6459f05ed98e674180c7f86c4f37.png

Blazorise

使用文档:https://blazorise.com/docs

GitHub项目地址:https://github.com/Megabit/Blazorise

项目介绍

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

项目截图

500e455639e34c0511226691ca8731ff.png

aa8f61d35327cf592374942c330c2e64.png

b6df4aeb1aeb4389fd929d07c5eeada4.png

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 技术相结合,可以实现高效而灵活的单页应用程序开发。

项目截图

e8c74a7c03c92b4fdd955628aef887a2.png

8386e709768930bf6f3a220470596632.png

6b58fb244ec2eee72f40aa6b49308d24.png

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产品线也将一直使用,持续增加新功能

项目截图

90db1f637967497d4bc1a599f3e8947b.png

afadaf5e12ab2f96d80b6d04ebf4f8e6.png

b7728742090bada342aa20d856967241.png

BlazorStrap

使用文档:https://getbootstrap.com/docs/5.1/getting-started/introduction/

GitHub项目地址:https://github.com/chanan/BlazorStrap

项目介绍

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

项目截图

256a4b47fe06ffd48efc6789fb17dd9a.png

de4f365c199a1d589eb7bde9476b2024.png

a3e497fa0f80465a1dc9f1850f116ae5.png

DotNetGuide技术交流微信群

欢迎加入C#/.NET/.NET Core学习、工作、面试指南技术交流群。
1、本群是一个纯粹的技术交流群,不闲聊,不搭讪,不吹水。
2、希望大家更多的分享自己优秀的文章、学习资源和路线以及遇到的技术问题。

1fd8cb8ff676463f9785b7b4c4786964.png

3591dda7e8af59a44ffe64321be63a92.gif

45b4f8970fd276b91ce1e4c1fa729024.gif

43815e2af1377168ba71b548c1fb531b.jpeg


学习是一个永无止境的过程,你知道的越多,你不知道的也会越多,在有限的时间内坚持每天多学一点,你一定能成为你想要成为的那个人。不积跬步无以至千里,不积小流无以成江河!!!

35856a3abeed2ff5a6ce168c8964f0e8.gif

See you next good day

aae89a4bc8bac53838e7b78ed57401db.gif

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值