前言
本文主要是推薦一些開源、免費、實用、美觀的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 基金會項目，商業應用免費。
項目截圖
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 的清晰美觀的圖形設計。
- 易于了解的結構。
- 良好的文檔和許多示例和源代碼片段。
- 所有元件全部使用 C# 編寫，不允許使用 JavaScript（除非絕對必要）。
- 使用者可以建立漂亮的應用程式，而無需使用 CSS（當然也可以使用 CSS）。
- 不依賴其他元件庫，完全控制元件和功能。
- 穩定性！我們努力實作完整的測試覆寫率。
- 頻繁釋出版本，以便開發人員及時獲得其 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 技術相結合，可以實作高效而靈活的單頁應用程式開發。
項目截圖
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 應用程式。
項目截圖
如何擷取
歡迎關注轉發評論私信