Blazor 修仙之旅

南笙酒味 提交于 2020-08-14 08:26:34

一.前言

这是《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-*

注册:

image-20200601231855745

wwwroot/index.html 中引用:

image-20200601230446827

_Imports.razor 中加入命名空间

@using AntDesign

Index.razor中添加:

<Button Type="primary">Hello World!</Button>

运行:

image-20200601231950413

四.Ant Design of Blazor 资料

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!