Blazor 修仙之旅 - Ant Design of Blazor

一.前言

 

这是《Blazor 修仙之旅》的第三篇，前面两分别是《初次尝试》、《组件与数据绑定》，直接到这里上 Ant Design 确实连不起来，跨度比较大，其实我也是在边学边写，看的是官方文档，我觉得中间这部分重复写博客的意义不大，所以我建议去看官方文档，传送门：点我：https://docs.microsoft.com/en-us/aspnet/core/blazor/?view=aspnetcore-3.1 。不用每篇都深刻理解，但需要有一个基本概念。好了，下面进入正题。

 

二. 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 资料

 

• 文档：https://ant-design-blazor.github.io/zh-CN/components/menu

• 开源地址：https://github.com/ant-design-blazor/ant-design-blazor