Repository files navigation

English |简体中文

• 🌈 Enterprise-class UI designed for web applications.
• 📦 A set of high-quality Blazor components out of the box.
• 💕 Supports WebAssembly-based client-side and SignalR-based server-side UI event interaction.
• 🎨 Supports Progressive Web Applications (PWA).
• 🛡 Build with C#, a multi-paradigm static language for an efficient development experience.
• 🌍 Internationalization support for dozens of languages.
• 🎁 Seamless integration with existing ASP.NET Core MVC and Razor Pages projects.

WebAssembly static hosting on:

• Document site
• Enterprise system dashboard

• Supports .NET Core 3.1 / .NET 5 / .NET 6 / .Net 7 / .NET 8 / .NET 9 .
• Supports WebAssembly static file deployment.
• Supports 4 major browsers engines, and Internet Explorer 11+ (Blazor Server only)
• Supports.NET MAUI /WPF /Windows Forms and other Blazor Hybrid workloads.
• SupportsElectron and other Web standards-based environments.

Due toWebAssembly restriction, Blazor WebAssembly doesn't support IE browser, but Blazor Server supports IE 11† with additional polyfills. Seeofficial documentation.

From .NET 5, IE 11 is no longer officially supported. SeeBlazor: Updated browser support. Unofficial support is provided byBlazor.Polyfill community project.

• Release:

• Nightly:

  Download our latest nightly builds

Regularly synchronize with Official Ant Design specifications, you can check thesync logs online.

Therefore, you can use the custom theme styles of Ant Design directly.

Before the 1.0 release, we will only sync antd 4.x styles.

• Install.NET Core SDK 3.1.300 or later, .NET 8 is even better.

We have provided thedotnet new template to create aBoilerplate project out of the box：

• Install the template

  $ dotnet new --install AntDesign.Templates

• Create the Boilerplate project with the template

  $ dotnet new antdesign -o MyAntDesignApp

Options for the template：

• Go to the project folder of the application and install the Nuget package reference

  $ dotnet add package AntDesign

• Register the services inProgram.cs

  builder.Services.AddAntDesign();

  orStartup.cs

  services.AddAntDesign();

• Add namespace in_Imports.razor

  @usingAntDesign

• Introduce CSS and JS files in appropriate places. The WebApp project was introduced in App.razor, and the WebAssembly project was introduced in index.html

  <linkhref="_content/AntDesign/css/ant-design-blazor.css"rel="stylesheet"><scriptsrc="_content/AntDesign/js/ant-design-blazor.js"></script>

• To display the pop-up component dynamically, you need to add the<AntContainer /> component inApp.razor.

  • For Blazor WebApp, you also need to specify render mode to<Routes /> for interactivity.

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

  • For legacy blazor apps just add a line of code:

  <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 ✨

• Finally, it can be referenced in the.razor component!

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

Click the button below to start a new workspace for development for free.

• Install.NET Core SDK 9.0.100 or later.

• Install Node.js (only for building style files and interoperable TypeScript files)

• Clone to local development

  $ 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

• Visithttps://localhost:5001 in your supported browser and checklocal development documentation for details.

  Visual Studio 2022 is recommended for development.

• Ant Design Blazor Documentation
• Official Blazor Documentation
• MS Learn for Blazor Tutorial

Check out thisissue to learn about our development plans for the 1.0 release.

You can also find thelatest news about the features we will implement in the future with antd5.0 style.

If you would like to contribute, feel free to create aPull Request, or give usBug Report.

This project is an MIT-licensed open source project. In order to achieve better and sustainable development of the project, we expect to gain more backers. We will use the proceeds for community operations and promotion. You can support us in any of the following ways:

• OpenCollective
• Wechat
• Alipay

We will put the detailed donation records on thebacker list.

If you encounter any problems in the process, feel free to ask for help via following channels. We also encourage experienced users to help newcomers.

• 

• 

  Scan QR Code with DingTalk

  

This project exists thanks to all the people who contribute.

This project has adopted the code of conduct defined by the Contributor Covenant to clarify expected behavior in our community.For more information see the.NET Foundation Code of Conduct.

This project is supported by the.NET Foundation.