前言

本文主要分享9款開(kāi)源、免費(fèi)、實(shí)用、美觀的Blazor UI框架，提供給廣大C#/.NET開(kāi)發(fā)者們學(xué)習(xí)和使用（注意：排名不分先后，都是十分優(yōu)秀的開(kāi)源框架和項(xiàng)目??）。這些框架都已收錄到C#/.NET/.NET Core優(yōu)秀項(xiàng)目和框架精選中，關(guān)注優(yōu)秀項(xiàng)目和框架精選能讓你及時(shí)了解C#、.NET和.NET Core領(lǐng)域的最新動(dòng)態(tài)和最佳實(shí)踐，提高開(kāi)發(fā)效率和質(zhì)量?？右淹?，歡迎大家踴躍提交PR，自薦（讓優(yōu)秀的項(xiàng)目和框架不被埋沒(méi)??）。

GitHub項(xiàng)目倉(cāng)庫(kù)收集地址：https://github.com/YSGStudyHards/DotNetGuide/blob/main/docs/DotNet/DotNetProjectPicks.md

Ant Design Blazor

使用文檔：https://antblazor.com/zh-CN/docs/introduce

GitHub項(xiàng)目地址：https://github.com/ant-design-blazor/ant-design-blazor

項(xiàng)目介紹

Ant Design Blazor是一套基于Ant Design和 Blazor的企業(yè)級(jí)組件庫(kù)（喜歡Ant Design風(fēng)格的同學(xué)推薦使用）。

項(xiàng)目特點(diǎn)

• ?? 提煉自企業(yè)級(jí)中后臺(tái)產(chǎn)品的交互語(yǔ)言和視覺(jué)風(fēng)格。
• ?? 開(kāi)箱即用的高質(zhì)量 Blazor 組件，可在多種托管方式共享。
• ?? 支持基于 WebAssembly 的前端和基于 SignalR 的服務(wù)端 UI 即時(shí)交互。
• ?? 支持漸進(jìn)式 Web 應(yīng)用（PWA）
• ?? 使用 C# 構(gòu)建，多范式靜態(tài)語(yǔ)言帶來(lái)高效的開(kāi)發(fā)體驗(yàn)。
• ?? 支持 .NET Core 3.1 以上所有版本，可直接引用豐富的 .NET 類(lèi)庫(kù)。
• ?? 數(shù)十個(gè)國(guó)際化語(yǔ)言支持。
• ?? 基于 MIT 開(kāi)源協(xié)議，.NET 基金會(huì)項(xiàng)目，商業(yè)應(yīng)用免費(fèi)。

項(xiàng)目截圖

圖片

圖片

圖片

BootstrapBlazor

使用文檔：https://www.blazor.zone/introduction

Gitee項(xiàng)目地址：https://gitee.com/LongbowEnterprise/BootstrapBlazor

項(xiàng)目介紹

BootstrapBlazor是一套基于 Bootstrap 和 Blazor 的企業(yè)級(jí)組件庫(kù)，可以認(rèn)為是 Bootstrap 項(xiàng)目的 Blazor 版實(shí)現(xiàn)?；?nbsp;Bootstrap 樣式庫(kù)精心打造，并且額外增加了 100 多種常用的組件，為您快速開(kāi)發(fā)項(xiàng)目帶來(lái)非一般的感覺(jué)（喜歡Bootstrap風(fēng)格的同學(xué)推薦使用）。

項(xiàng)目截圖

圖片

圖片

圖片

MudBlazor

使用文檔：https://mudblazor.com/docs/overview

GitHub項(xiàng)目地址：https://github.com/MudBlazor/MudBlazor

項(xiàng)目介紹

MudBlazor是一個(gè)基于Material Design的Blazor組件框架，注重易用性和清晰的結(jié)構(gòu)。它非常適合想要快速構(gòu)建Web應(yīng)用程序的 .NET 開(kāi)發(fā)人員，無(wú)需費(fèi)力地處理 CSS 和 JavaScript。由于 MudBlazor 完全使用C#編寫(xiě)，因此您可以自由地調(diào)整、修復(fù)或擴(kuò)展該框架。文檔中有大量示例代碼，使理解和學(xué)習(xí) MudBlazor 非常容易。

項(xiàng)目特點(diǎn)

1. 基于 Material Design 的清晰美觀的圖形設(shè)計(jì)。
2. 易于理解的結(jié)構(gòu)。
3. 良好的文檔和許多示例和源代碼片段。
4. 所有組件全部使用 C# 編寫(xiě)，不允許使用 JavaScript（除非絕對(duì)必要）。
5. 用戶可以創(chuàng)建漂亮的應(yīng)用程序，而無(wú)需使用 CSS（當(dāng)然也可以使用 CSS）。
6. 不依賴其他組件庫(kù)，完全控制組件和功能。
7. 穩(wěn)定性！我們努力實(shí)現(xiàn)完整的測(cè)試覆蓋率。
8. 頻繁發(fā)布版本，以便開(kāi)發(fā)人員及時(shí)獲得其 Pull Request 和修復(fù)。

項(xiàng)目截圖

圖片

圖片

圖片

MatBlazor

使用文檔：https://www.matblazor.com/

GitHub項(xiàng)目地址：https://github.com/SamProf/MatBlazor

項(xiàng)目介紹

MatBlazor是一套基于Material Design規(guī)范實(shí)現(xiàn)的Blazor和Razor通用組件庫(kù)。

項(xiàng)目截圖

圖片

圖片

圖片

Blazorise

使用文檔：https://blazorise.com/docs

GitHub項(xiàng)目地址：https://github.com/Megabit/Blazorise

項(xiàng)目介紹

Blazorise 是用于Blazor的 UI 組件庫(kù)，支持使用Bootstrap、Tailwind、Bulma、Ant Design 和 Material 等 CSS 框架，可用于構(gòu)建響應(yīng)式的單頁(yè) Web 應(yīng)用程序。

項(xiàng)目截圖

圖片

圖片

圖片

Microsoft Fluent UI Blazor

使用文檔：https://www.fluentui-blazor.net/

GitHub項(xiàng)目地址：https://github.com/microsoft/fluentui-blazor

項(xiàng)目介紹

Microsoft Fluent UI Blazor是一個(gè)基于Blazor的組件庫(kù)，提供了一系列的UI組件以及Fluent UI的設(shè)計(jì)系統(tǒng)。該庫(kù)可以幫助開(kāi)發(fā)人員快速構(gòu)建現(xiàn)代化的 Web 應(yīng)用程序，并且與 Blazor 技術(shù)相結(jié)合，可以實(shí)現(xiàn)高效而靈活的單頁(yè)應(yīng)用程序開(kāi)發(fā)。

項(xiàng)目截圖

圖片

圖片

圖片

Radzen Blazor

使用文檔：https://blazor.radzen.com/

GitHub項(xiàng)目地址：https://github.com/radzenhq/radzen-blazor

項(xiàng)目介紹

Radzen Blazor 是一個(gè)包含70多個(gè)免費(fèi)的原生 Blazor UI 組件的集合，其中包括 DataGrid、Scheduler、Charts 等功能強(qiáng)大的組件，并提供了豐富的主題樣式，包括 Material Design 和 FluentUI?？梢詫?Radzen Blazor 視為一個(gè)用于構(gòu)建 Blazor 應(yīng)用程序的 UI 框架，它提供了一系列預(yù)構(gòu)建的組件和工具，幫助開(kāi)發(fā)人員快速搭建和定制自己的應(yīng)用程序界面。

項(xiàng)目截圖

圖片

圖片

圖片

MASA.Blazor

使用文檔：https://docs.masastack.com/blazor/getting-started/installation

GitHub項(xiàng)目地址：https://github.com/masastack/MASA.Blazor

項(xiàng)目介紹

基于Material設(shè)計(jì)規(guī)范和BlazorComponent的交互能力提供標(biāo)準(zhǔn)的基礎(chǔ)組件庫(kù)。提供如布局、彈框標(biāo)準(zhǔn)、Loading、全局異常處理等標(biāo)準(zhǔn)場(chǎng)景的預(yù)置組件。從更多實(shí)際場(chǎng)景出發(fā)，滿足更多用戶和場(chǎng)景的需求，最大的減少開(kāi)發(fā)者的時(shí)間成本?？s短開(kāi)發(fā)周期提高開(kāi)發(fā)效率。

項(xiàng)目特點(diǎn)

• 豐富組件：包含Vuetify 1:1還原的基礎(chǔ)組件，以及很多實(shí)用的預(yù)置組件和.Net深度集成功能，包括Url、面包屑、導(dǎo)航三聯(lián)動(dòng)，高級(jí)搜索，i18n等
• UI設(shè)計(jì)語(yǔ)言：設(shè)計(jì)風(fēng)格現(xiàn)代，UI 多端體驗(yàn)設(shè)計(jì)優(yōu)秀
• 專業(yè)示例：MASA Blazor Pro 提供多種常見(jiàn)場(chǎng)景的預(yù)設(shè)布局
• 簡(jiǎn)易上手：豐富詳細(xì)的上手文檔，免費(fèi)的視頻教程（制作中）
• 社區(qū)活躍鼓勵(lì)：用戶參與實(shí)時(shí)互動(dòng)，做出貢獻(xiàn)加入我們，構(gòu)建最開(kāi)放的開(kāi)源社區(qū)
• 長(zhǎng)期支持：全職團(tuán)隊(duì)維護(hù)，長(zhǎng)期提供支持，并提供企業(yè)級(jí)支持
• 知名企業(yè)選擇：該技術(shù)框架被多家知名企業(yè)選擇使用，未來(lái)MASA Stack產(chǎn)品線也將一直使用，持續(xù)增加新功能

項(xiàng)目截圖

圖片

圖片

圖片

BlazorStrap

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

GitHub項(xiàng)目地址：https://github.com/chanan/BlazorStrap

項(xiàng)目介紹

BlazorStrap是一個(gè)基于 Bootstrap 的 Blazor 的 UI 組件庫(kù)，BlazorStrap的組件也支持響應(yīng)式布局、主題定制以及多語(yǔ)言支持等功能，可以幫助開(kāi)發(fā)者快速搭建出美觀、易用的 Web 應(yīng)用程序。

項(xiàng)目截圖

圖片

圖片

圖片