ant design blazor

蚂蚁设计大麻

基于Ant Design和Glazor的一组丰富的企业级UI组件。

英语| 简体中文

特征

• ？企业级UI专为Web应用程序设计。
• ？开箱即用的一组高质量的大火组件。
• ？支持基于WebAssembly的客户端和基于信号的服务器端UI事件交互。
• ？支持渐进式Web应用程序（PWA）。
• ？使用C＃构建，这是一种多范式静态语言，可提供有效的开发体验。
• ？国际化支持数十种语言。
• ？与现有的ASP.NET核心MVC和Razor页面项目无缝集成。

？在线示例

WebAssembly静态托管：

• 文档网站
• 企业系统仪表板

？环境支持

• 支持.NET CORE 3.1 / .NET 5 / .NET 6 / .NET 7 / .NET 8 / .NET 9。
• 支持WebAssembly静态文件部署。
• 支持4个主要的浏览器引擎和Internet Explorer 11+（仅限式服务器）
• 支持.NET MAUI / WPF / Windows表单和其他Blazor Hybrid Workloads。
• 支持电子和其他基于Web标准的环境。

由于WebAssembly限制，因此Blazor WebAssembly不支持IE浏览器，但是Blazor Server支持IE 11†具有其他polyfills。请参阅官方文档。

从.NET 5开始，IE 11不再得到正式支持。请参阅《大火：更新的浏览器支持》。非官方支持由Blazor.Polyfill社区项目提供。

？当前版本

• 发布：

• 每晚：

  下载我们最新的夜间构建

？设计规范

定期与官方的蚂蚁设计规范同步，您可以在线检查同步日志。

因此，您可以直接使用蚂蚁设计的自定义主题样式。

在1.0发布之前，我们将仅同步ANTD 4.X样式。

？安装指南

先句

• 安装.NET Core SDK 3.1.300或更高版本，.NET 8甚至更好。

选项1：从dotnet新模板创建一个新项目

我们提供了dotnet new模板，以创建一个样板项目：

• 安装模板

  $ dotnet new --install AntDesign.Templates

• 使用模板创建样板项目

  $ dotnet new antdesign -o MyAntDesignApp

模板的选项：

选项	描述	类型	默认
-f | --full	如果指定，生成蚂蚁设计专业的所有页面	布尔	错误的
-ho | --host	指定托管模型	'WebApp'| 'wasm'| '服务器'	'WebApp'
--styles	是否使用nodejs和更少的编译您的自定义主题。	css | less	css
--no-restore	如果指定，请在创建时跳过项目的自动还原	布尔	错误的

选项2：将蚂蚁设计大黄器导入现有项目

• 转到应用程序的项目文件夹并安装Nuget软件包参考

  $ dotnet add package AntDesign

• 在Program.cs中注册服务

   builder . Services . AddAntDesign ( ) ;

  或Startup.cs

   services . AddAntDesign ( ) ;

• 在_Imports.razor中添加名称空间

   @using AntDesign

• 在适当的地方介绍CSS和JS文件。 WebApp项目是在App.Razor中引入的，WebAssembly项目在index.html中介绍

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

• 要动态显示弹出组件，您需要在App.razor中添加<AntContainer />组件。

  • 对于Blazor WebApp，您还需要将渲染模式指定为<Routes />以进行交互。

  <Routes @rendermode="RenderMode.InteractiveAuto" />            <-- specify the rendermode 
  + <AntContainer @rendermode="RenderMode.InteractiveAuto" />    <-- add this component 

  • 对于旧式应用应用程序，只需添加一条代码即可：

  <Router AppAssembly="@typeof(MainLayout).Assembly">
      <Found Context="routeData">
          <RouteView RouteData="routeData" DefaultLayout="@typeof(MainLayout)" />
      </Found>
      <NotFound>
          <LayoutView Layout="@typeof(MainLayout)">
              <Result Status="404" />
          </LayoutView>
      </NotFound>
  </Router>
  
  +  <AntContainer />   <-- add this component 

• 最后，可以在.razor组件中引用它！

  < Button Type = " @ButtonType.Primary " >Hello World!</ Button >

？发展

gitpod

单击下面的按钮以启动新的工作空间免费开发。

当地的

• 安装.NET Core SDK 9.0.100或更高版本。

• 安装node.js（仅用于构建样式文件和可互操作的打字稿文件）

• 克隆到本地发展

  $ git clone https://github.com/ant-design-blazor/ant-design-blazor.git
  $ cd ant-design-blazor
  $ npm install
  $ dotnet build ./site/AntDesign.Docs.Build/AntDesign.Docs.Build.csproj
  $ npm start

• 请访问https：// localhost：5001在您支持的浏览器中，并查看本地开发文档以获取详细信息。

  建议使用Visual Studio 2022进行开发。

？链接

• 蚂蚁设计大火文档
• 官方大火文档
• 女士学习大黄手教程

？路线图

查看此问题，以了解我们1.0版本的开发计划。

您还可以找到有关我们将来使用Antd5.0样式实现的功能的最新消息。

？贡献

如果您想做出贡献，请随时创建拉动请求或给我们错误报告。

？捐款

该项目是MIT许可的开源项目。为了实现该项目的更好和可持续发展，我们希望获得更多支持者。我们将使用收益进行社区运营和晋升。您可以通过以下任何方式支持我们：

• OpenCollyce
• 微信
• 支付宝

我们将把详细的捐赠记录放在支持者名单上。

❓社区支持

如果您在此过程中遇到任何问题，请随时通过以下渠道寻求帮助。我们还鼓励有经验的用户帮助新移民。

• 用dingtalk扫描QR码

贡献者

由于所有贡献的人，该项目的存在。

行为守则

该项目采用了贡献者盟约定义的行为准则，以阐明我们社区的预期行为。有关更多信息，请参见.NET基金会行为守则。

☀️许可证

.NET基金会

该项目得到了.NET基金会的支持。