Ant Design Blazor 在 Blazor WebApp 中使用

大家好，看到很多朋友已经开始试用 .NET 8 的 Blazor WebApp，目前想在 WebApp 上使用Ant Design Blazor，是需要开启全局交互模式的（包括Auto、Server、WebAssembly）。所以在创建项目时，最好是选用全局交互。

我们对静态服务端渲染SSR的适配还在进行中，大家可以期待一下。

本文是 Ant Design Blazor 最新文档的 Blazor WebApp 安装部分。

• 进入应用的项目文件夹，安装 Nuget 包引用

  $ dotnet add package AntDesign

• 在项目的 Program.cs 中注册相关服务：

  builder.Services.AddAntDesign();

  如果是基于 Auto 模式的模板，还需要在 Client 项目中注册。

• 在 App.razor 文件引入引入静态样式和脚本文件

  <link href="_content/AntDesign/css/ant-design-blazor.css" rel="stylesheet" />
  <script src="_content/AntDesign/js/ant-design-blazor.js"></script>

• 在 _Imports.razor 中加入命名空间

  @using AntDesign

• 为了动态地显示弹出组件，需要在 App.razor 中添加一个 <AntContainer /> 组件。对于 Blazor WebApp 项目，还需要为 Routes 指定渲染模式来支持交互性。

  <Routes @rendermode="RenderMode.InteractiveAuto" />           <-- 指定渲染模式 ✨
  + <AntContainer @rendermode="RenderMode.InteractiveAuto" />   <-- 在这里添加容器 ✨

• 最后就可以在.razor组件中引用啦！

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

诚邀赞助

AntDesign Blazor 项目和 Blazor 中文社区预计将会在 12月16日到北京参加 .NET Conf China 大会。届时打算会对 Blazor 和 AntBlazor 项目进行社区推广。

但不论是我们的开源项目、社区还是这次活动，都是为爱发电和非盈利的，如果antblazor与社区对你有所帮助，请赞助支持，以支持我到北京的路费和推广物料费用。

所有费用收支都会在antblazor项目的赞助名单中公开。对于大额捐助，可以在我们的项目网站和今后推广中提供品牌推广。

请点下方赞赏按钮，也可以加我微信 JamesYeungMVP 联系。