一.前言
這是《Blazor 修仙之旅》的第三篇,前面兩分別是《初次嘗試》、《組件與數據綁定》,直接到這里上 Ant Design 確實連不起來,跨度比較大,其實我也是在邊學邊寫,看的是官方文檔,我覺得中間這部分重復寫博客的意義不大,所以我建議去看官方文檔,傳送門:點我。如果看過我的前兩篇,我建議您從這里開始看:點我。不用每篇都深刻理解,但需要有一個基本概念。好了,下面進入正題。
二. Ant Design of Blazor 介紹
ant-design-blazor
是國內開發者 ElderJames 創建的一個開源項目。在前不久的微軟Build大會也見到了它的身影,受到了微軟官方推薦,點贊!顧名思義,ant-design-blazor
是 Ant Design 的 Blazor 實現,開發和服務於企業級后台產品。
✨ 特性
- 🌈 提煉自企業級中后台產品的交互語言和視覺風格。
- 📦 開箱即用的高質量 Razor 組件,可在多種托管方式共享。
- 💕 支持基於 WebAssembly 的客戶端和基於 SignalR 的服務端 UI 事件交互。
- 🎨 支持漸進式 Web 應用(PWA)
- 🛡 使用 C# 構建,多范式靜態語言帶來高效的開發體驗。
- ⚙️ 基於 .NET Standard 2.1,可直接引用豐富的 .NET 類庫。
- 🎁 可與已有的 ASP.NET Core MVC、Razor Pages 項目無縫集成。
從
ant-design-blazor
README 摘點內容撐一撐篇幅(手動滑稽)
三.使用
直接新建一個 Blazor WebAssembly 項目,或者使用前兩篇文章中的 Demo。
通過 Nuget 安裝:
dotnet add package AntDesign --version 0.1.0-*
注冊:
wwwroot/index.html 中引用:
在 _Imports.razor
中加入命名空間
@using AntDesign
在 Index.razor
中添加:
<Button Type="primary">Hello World!</Button>
運行: