ant-design-blazor

Ant Design Blazor

๐ŸŒˆA set of enterprise-class UI components based on Ant Design and Blazor WebAssembly.
Under Other
By ant-design-blazor

dotnet hacktoberfest webassembly antd blazor ant-design wasm blazor-server blazor-webassembly blazor-components ant-design-blazor





Ant Design Blazor

A set of enterprise-class UI components based on Ant Design and Blazor.

![](https://img.shields.io/github/workflow/status/ant-design-blazor/ant-design-blazor/Publish%20Docs?style=flat-square)
[![AntDesign](https://img.shields.io/nuget/v/AntDesign.svg?color=red&style=flat-square)](https://www.nuget.org/packages/AntDesign/)
[![AntDesign](https://img.shields.io/nuget/dt/AntDesign.svg?style=flat-square)](https://www.nuget.org/packages/AntDesign/)
[![AntDesign.Templates](https://img.shields.io/nuget/v/AntDesign.Templates?color=%23512bd4&label=Templates&style=flat-square)](https://github.com/ant-design-blazor/ant-design-pro-blazor)
[![codecov](https://img.shields.io/codecov/c/github/ant-design-blazor/ant-design-blazor/master.svg?style=flat-square)](https://codecov.io/gh/ant-design-blazor/ant-design-blazor)
[![AntDesign](https://img.shields.io/badge/License-MIT-blue?style=flat-square)](https://github.com/ant-design-blazor/ant-design-blazor/blob/master/LICENSE)
[![Slack Group](https://img.shields.io/badge/Slack-AntBlazor-blue.svg?style=flat-square&logo=slack)](https://join.slack.com/t/AntBlazor/shared_invite/zt-etfaf1ww-AEHRU41B5YYKij7SlHqajA)
[![Ding Talk Group](https://img.shields.io/badge/DingTalk-AntBlazor-blue.svg?style=flat-square&logo=data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBzdGFuZGFsb25lPSJubyI/Pg0KPHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGNsYXNzPSJpY29uIiB2aWV3Qm94PSIwIDAgMTAyNCAxMDI0IiBmaWxsPSIjZmZmZmZmIj4NCiAgPHBhdGggZD0iTTU3My43IDI1Mi41QzQyMi41IDE5Ny40IDIwMS4zIDk2LjcgMjAxLjMgOTYuN2MtMTUuNy00LjEtMTcuOSAxMS4xLTE3LjkgMTEuMS01IDYxLjEgMzMuNiAxNjAuNSA1My42IDE4Mi44IDE5LjkgMjIuMyAzMTkuMSAxMTMuNyAzMTkuMSAxMTMuN1MzMjYgMzU3LjkgMjcwLjUgMzQxLjljLTU1LjYtMTYtMzcuOSAxNy44LTM3LjkgMTcuOCAxMS40IDYxLjcgNjQuOSAxMzEuOCAxMDcuMiAxMzguNCA0Mi4yIDYuNiAyMjAuMSA0IDIyMC4xIDRzLTM1LjUgNC4xLTkzLjIgMTEuOWMtNDIuNyA1LjgtOTcgMTIuNS0xMTEuMSAxNy44LTMzLjEgMTIuNSAyNCA2Mi42IDI0IDYyLjYgODQuNyA3Ni44IDEyOS43IDUwLjUgMTI5LjcgNTAuNSAzMy4zLTEwLjcgNjEuNC0xOC41IDg1LjItMjQuMkw1NjUgNzQzLjFoODQuNkw2MDMgOTI4bDIwNS4zLTI3MS45SDcwMC44bDIyLjMtMzguN2MuMy41LjQuOC40LjhTNzk5LjggNDk2LjEgODI5IDQzMy44bC42LTFoLS4xYzUtMTAuOCA4LjYtMTkuNyAxMC0yNS44IDE3LTcxLjMtMTE0LjUtOTkuNC0yNjUuOC0xNTQuNXoiLz4NCjwvc3ZnPg0K)](https://h5.dingtalk.com/circle/healthCheckin.html?corpId=dingce91412e5fdea4020aee85826fecb71d&dd651=7b682&cbdbhh=qwertyuiop&origin=11)
[![Discord Server](https://img.shields.io/discord/753358910341251182?color=%237289DA&label=AntBlazor&logo=discord&logoColor=white&style=flat-square)](https://discord.com/invite/jqu3Xeq)


English | ็ฎ€ไฝ“ไธญๆ–‡


โœจ Features

๐ŸŒˆ Online Examples

WebAssembly static hosting examples:



๐Ÿ–ฅ Environment Support

| Edge / IE | Firefox | Chrome | Safari | Opera | Electron |
| :-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------: | :--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------: | :----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------: | :----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------: | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------: | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------: |
| Edge 16 / IE 11โ€  | 522 | 57 | 11 | 44 | Chromium 57 |



Due to WebAssembly restriction, Blazor WebAssembly doesn't support IE browser, but Blazor Server supports IE 11โ€  with additional polyfills. See official documentation



๐Ÿ’ฟ Current Version

Download our latest nightly builds


๐ŸŽจ Design Specification

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


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


๐Ÿ“ฆ Installation Guide

Create a new project from the dotnet new template

We have provided the dotnet new template to create a Boilerplate project out of the box๏ผš




bash
$ dotnet new --install AntDesign.Templates



bash
$ dotnet new antdesign -o MyAntDesignApp


Options for the template๏ผš


| Options | Description | Type | Default |
| ----------------- | ------------------------------------------------------------------ | ------------------------------ | ------- |
| -f \| --full | If specified, generates all pages of Ant Design Pro | bool | false |
| -ho \| --host | Specify the hosting model | 'wasm' \| 'server' \| 'hosted' | 'wasm' |
| --styles | Whether use NodeJS and Less to compile your custom themes. | css \| less | css |
| --no-restore | If specified, skips the automatic restore of the project on create | bool | false |


Import Ant Design Blazor into an existing project

bash
$ dotnet add package AntDesign



csharp
builder.Services.AddAntDesign();


or Startup.cs (Server)


csharp
services.AddAntDesign();



```html


```



csharp
@using AntDesign



```










<-- add this component โœจ
```



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


โŒจ Local Development

bash
$ git clone [email protected]: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




Visual Studio 2019 is recommended for development.



๐Ÿ”— Links

๐Ÿ—บ Roadmap

Check out this issue to learn about our development plans for 2020.


๐Ÿค Contributing


If you would like to contribute, feel free to create a Pull Request, or give us Bug Report.


Contributors

This project exists thanks to all the people who contribute.





๐Ÿ’• Donation

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:



We will put the detailed donation records on the backer list.


โ“ Community Support

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

Code of Conduct

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.


โ˜€ License


.NET Foundation

This project is supported by the .NET Foundation.