天天看點

值得推薦的Blazor UI元件庫

作者:華山論術

前言

  本文主要是推薦一些開源、免費、實用、美觀的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 基金會項目,商業應用免費。

項目截圖

值得推薦的Blazor UI元件庫
值得推薦的Blazor UI元件庫
值得推薦的Blazor UI元件庫

BootstrapBlazor

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

Gitee項目位址:https://gitee.com/LongbowEnterprise/BootstrapBlazor

項目介紹

BootstrapBlazor是一套基于 Bootstrap 和 Blazor 的企業級元件庫,可以認為是 Bootstrap 項目的 Blazor 版實作。基于 Bootstrap 樣式庫精心打造,并且額外增加了 100 多種常用的元件,為您快速開發項目帶來非一般的感覺(喜歡Bootstrap風格的同學推薦使用)。

項目截圖

值得推薦的Blazor UI元件庫
值得推薦的Blazor UI元件庫
值得推薦的Blazor UI元件庫

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 和修複。

項目截圖

值得推薦的Blazor UI元件庫
值得推薦的Blazor UI元件庫
值得推薦的Blazor UI元件庫

MatBlazor

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

GitHub項目位址:https://github.com/SamProf/MatBlazor

項目介紹

MatBlazor是一套基于Material Design規範實作的Blazor和Razor通用元件庫。

項目截圖

值得推薦的Blazor UI元件庫
值得推薦的Blazor UI元件庫
值得推薦的Blazor UI元件庫

Blazorise

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

GitHub項目位址:https://github.com/Megabit/Blazorise

項目介紹

Blazorise 是用于Blazor的 UI 元件庫,支援使用Bootstrap、Tailwind、Bulma、Ant Design 和 Material 等 CSS 架構,可用于建構響應式的單頁 Web 應用程式。

項目截圖

值得推薦的Blazor UI元件庫
值得推薦的Blazor UI元件庫
值得推薦的Blazor UI元件庫

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 技術相結合,可以實作高效而靈活的單頁應用程式開發。

項目截圖

值得推薦的Blazor UI元件庫
值得推薦的Blazor UI元件庫
值得推薦的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産品線也将一直使用,持續增加新功能

項目截圖

值得推薦的Blazor UI元件庫
值得推薦的Blazor UI元件庫
值得推薦的Blazor UI元件庫

BlazorStrap

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

GitHub項目位址:https://github.com/chanan/BlazorStrap

項目介紹

BlazorStrap是一個基于 Bootstrap 的 Blazor 的 UI 元件庫,BlazorStrap的元件也支援響應式布局、主題定制以及多語言支援等功能,可以幫助開發者快速搭建出美觀、易用的 Web 應用程式。

項目截圖

值得推薦的Blazor UI元件庫
值得推薦的Blazor UI元件庫
值得推薦的Blazor UI元件庫

如何擷取

歡迎關注轉發評論私信