Blazor 修仙之旅 - Ant Design of Blazor

一.前言

這是《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>

運行：

四.Ant Design of Blazor 資料

• 文檔：點我
• 開源地址：點我