10款值得推荐的Blazor UI组件库

简介: 10款值得推荐的Blazor UI组件库

前言

经常看到有小伙伴在DotNetGuide技术社区交流群里问有什么好用的Blazor UI组件库推荐的,本文将分享10款开源、实用、美观的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 非常容易。

项目特点

  1. 基于 Material Design 的清晰美观的图形设计。
  2. 易于理解的结构。
  3. 良好的文档和许多示例和源代码片段。
  4. 所有组件全部使用 C# 编写,不允许使用 JavaScript(除非绝对必要)。
  5. 用户可以创建漂亮的应用程序,而无需使用 CSS(当然也可以使用 CSS)。
  6. 不依赖其他组件库,完全控制组件和功能。
  7. 稳定性!我们努力实现完整的测试覆盖率。
  8. 频繁发布版本,以便开发人员及时获得其 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 框架,它提供了一系列预构建的组件和工具,帮助开发人员快速搭建和定制自己的应用程序界面。

项目截图

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 应用程序。

项目截图

BlazorBootstrap

使用文档:https://docs.blazorbootstrap.com/getting-started/blazor-webassembly-net-8

GitHub项目地址:https://demos.blazorbootstrap.com/getting-started

项目介绍

企业级Blazor Bootstrap组件库,基于Blazor和Bootstrap CSS框架构建。

项目截图

相关文章
|
10月前
|
开发者 容器
44.[HarmonyOS NEXT RelativeContainer案例一] 掌握组件锚点布局:打造灵活精准的UI定位系统
在HarmonyOS NEXT的UI开发中,精确控制组件位置是构建复杂界面的关键。RelativeContainer作为一种强大的布局容器,通过锚点系统提供了精确定位能力,使开发者能够创建出灵活且精准的UI布局。本教程将详细讲解如何使用RelativeContainer的锚点布局功能,帮助你掌握这一核心技术。
318 4
|
10月前
|
设计模式 缓存 容器
06.HarmonyOS Next UI进阶:Text组件与视觉样式完全指南
在HarmonyOS Next应用开发中,Text组件是最基础也是最常用的UI元素之一。它不仅用于显示文本内容,还可以通过丰富的样式属性实现各种视觉效果。掌握Text组件的样式设置,是构建精美UI界面的基础技能。
478 1
|
7月前
|
Linux Go iOS开发
IDA 9.2 发布:Golang 改进、新 UI 组件、类型解析等
IDA Pro 9.2 (macOS, Linux, Windows) - 强大的反汇编程序、反编译器和多功能调试器
1366 0
|
9月前
|
Web App开发 前端开发 JavaScript
Element UI框架中自定义input组件的placeholder样式。
确保这些样式在你的应用程序CSS文件中定义,且该文件已正确加载到项目中。通过以上方法,可以控制Element UI组件中input的placeholder样式,使其满足特定的设计要求。这些更改都是基于CSS伪元素进行的,因此并不会对DOM结构产生改变,保持了原有结构的简洁和高效。
796 12
|
10月前
|
移动开发 开发者
仓颉开发语言入门教程:常见UI组件介绍和一些问题踩坑
仓颉开发语言即将发布一周年,虽已有知名App应用,但教程稀缺且官网文档不够完善。幽蓝君推出系列教程,从零开始系统讲解移动开发。本期介绍常用UI组件:按钮、文本、图片、输入框与搜索框的使用方法及注意事项,帮助开发者快速上手仓颉语言。
|
人工智能 自然语言处理 前端开发
Flame:开源AI设计图转代码模型!生成React组件,精准还原UI+动态交互效果
Flame 是一款开源的多模态 AI 模型,能够将 UI 设计图转换为高质量的现代前端代码,支持 React 等主流框架,具备动态交互、组件化开发等功能,显著提升前端开发效率。
2170 1
|
安全 API 开发者
深入探索ArkUI中的@LocalBuilder装饰器:构建高效可维护的UI组件
在ArkUI框架中,组件化开发至关重要。@LocalBuilder作为自API version 12引入的装饰器,专注于组件内部私有构建,确保封装性与安全性。本文解析其工作原理、参数传递机制及与@Builder的区别,结合典型场景代码示例,助开发者掌握这一工具。通过状态驱动UI更新、复杂组件组合等实践,优化性能并提升代码可维护性,推动高效UI架构构建。
368 0
|
11月前
|
开发框架 前端开发 JavaScript
【HarmonyOS Next之旅】基于ArkTS开发(二) -> UI开发一
本文介绍了方舟开发框架(ArkUI)及其两种开发范式:基于ArkTS的声明式开发范式和类Web开发范式。ArkUI是用于构建HarmonyOS应用界面的UI框架,提供极简UI语法和基础设施。声明式开发范式使用ArkTS语言,以组件、动画和状态管理为核心,适合复杂团队协作;类Web开发范式采用HML、CSS、JavaScript三段式开发,适用于简单界面应用,贴近Web开发者习惯。文中还概述了两者的架构和基础能力,帮助开发者选择合适的范式进行高效开发。
365 15
|
11月前
|
编解码 前端开发 Java
【HarmonyOS Next之旅】基于ArkTS开发(二) -> UI开发三
本文介绍了基于声明式UI范式的图形绘制与动画效果实现方法,涵盖绘制图形、添加动画效果及常见组件说明三部分内容。在绘制图形部分,详细讲解了如何通过Circle组件为食物成分表添加圆形标签,以及使用Path组件结合SVG命令绘制自定义图形(如应用Logo)。动画效果部分则展示了如何利用animateTo实现闪屏动画,包括渐出、放大效果,并设置页面跳转;同时介绍了页面间共享元素转场动画的实现方式。最后,文章列举了声明式开发范式中的各类组件及其功能,帮助开发者快速上手构建复杂交互页面。
386 11
|
7月前
|
存储 开发者 容器
鸿蒙 HarmonyOS NEXT星河版APP应用开发-ArkTS面向对象及组件化UI开发使用实例
本文介绍了ArkTS语言中的Class类、泛型、接口、模块化、自定义组件及状态管理等核心概念,并结合代码示例讲解了对象属性、构造方法、继承、静态成员、访问修饰符等内容,同时涵盖了路由管理、生命周期和Stage模型等应用开发关键知识点。
527 1
鸿蒙 HarmonyOS NEXT星河版APP应用开发-ArkTS面向对象及组件化UI开发使用实例

热门文章

最新文章

下一篇
开通oss服务