AntDesign 0.20.1
See the version list below for details.
dotnet add package AntDesign --version 0.20.1
NuGet\Install-Package AntDesign -Version 0.20.1
<PackageReference Include="AntDesign" Version="0.20.1" />
paket add AntDesign --version 0.20.1
#r "nuget: AntDesign, 0.20.1"
// Install AntDesign as a Cake Addin #addin nuget:?package=AntDesign&version=0.20.1 // Install AntDesign as a Cake Tool #tool nuget:?package=AntDesign&version=0.20.1
<p align="center"> <a href="https://yangshunjie.com/ant-design-blazor/"> <img src="https://raw.githubusercontent.com/ant-design-blazor/ant-design-blazor/master/logo.svg?sanitize=true"> </a> </p>
<h1 align="center">Ant Design Blazor</h1>
<div align="center">
A rich set of enterprise-class UI components based on Ant Design and Blazor.
</div>
English | 简体中文
✨ Features
- 🌈 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.
🌈 Online Examples
WebAssembly static hosting on:
🖥 Environment Support
- Supports .NET Core 3.1 / .NET 5 / .NET 6 / .Net 7 / .NET 8.
- 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.
- Supports Electron and other Web standards-based environments.
Due to WebAssembly restriction, Blazor WebAssembly doesn't support IE browser, but Blazor Server supports IE 11† with additional polyfills. See official documentation.
From .NET 5, IE 11 is no longer officially supported. See Blazor: Updated browser support. Unofficial support is provided by Blazor.Polyfill community project.
💿 Current Version
🎨 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.
Before the 1.0 release, we will only sync antd 4.x styles.
📦 Installation Guide
Prerequirement
- Install .NET Core SDK 3.1.300 or later, .NET 8 is even better.
Option 1: Create a new project from the dotnet new template ![AntDesign.Templates](https://img.shields.io/nuget/v/AntDesign.Templates?color=%23512bd4&label=Templates&style=flat-square)
We have provided the dotnet new
template to create a Boilerplate 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:
Options | Description | Type | Default |
---|---|---|---|
-f | --full |
If specified, generates all pages of Ant Design Pro | bool | false |
-ho | --host |
Specify the hosting model | 'webapp' | 'wasm' | 'server' | 'webapp' |
--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 |
Option 2: Import Ant Design Blazor into an existing project
Go to the project folder of the application and install the Nuget package reference
$ dotnet add package AntDesign
Register the services in
Program.cs
builder.Services.AddAntDesign();
or
Startup.cs
services.AddAntDesign();
Add namespace in
_Imports.razor
@using AntDesign
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 ✨
- For Blazor WebApp, you also need to specify render mode to
Finally, it can be referenced in the
.razor
component!<Button Type="@ButtonType.Primary">Hello World!</Button>
🔨 Development
Gitpod
Click the button below to start a new workspace for development for free.
Local
Install .NET Core SDK 8.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
Visit https://localhost:5001 in your supported browser and check local development documentation for details.
Visual Studio 2022 is recommended for development.
🔗 Links
🗺 Roadmap
Check out this issue to learn about our development plans for the 1.0 release.
You can also find the latest news about the features we will implement in the future with antd5.0 style.
🤝 Contributing
If you would like to contribute, feel free to create a Pull Request, or give us Bug Report.
💕 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.
-
<details> <summary>Scan QR Code with DingTalk</summary> <img src="https://raw.githubusercontent.com/ant-design-blazor/ant-design-blazor/master/docs/assets/dingtalk.jpg" width="300"> </details>
Contributors
This project exists thanks to all the people who contribute.
<a href="https://github.com/ant-design-blazor/ant-design-blazor/graphs/contributors"> <img src="https://contrib.rocks/image?repo=ant-design-blazor/ant-design-blazor&max=1000&columns=15&anon=1" /> </a>
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.
Product | Versions Compatible and additional computed target framework versions. |
---|---|
.NET | net5.0 is compatible. net5.0-windows was computed. net6.0 is compatible. net6.0-android was computed. net6.0-ios was computed. net6.0-maccatalyst was computed. net6.0-macos was computed. net6.0-tvos was computed. net6.0-windows was computed. net7.0 is compatible. net7.0-android was computed. net7.0-ios was computed. net7.0-maccatalyst was computed. net7.0-macos was computed. net7.0-tvos was computed. net7.0-windows was computed. net8.0 is compatible. net8.0-android was computed. net8.0-browser was computed. net8.0-ios was computed. net8.0-maccatalyst was computed. net8.0-macos was computed. net8.0-tvos was computed. net8.0-windows was computed. |
.NET Core | netcoreapp3.0 was computed. netcoreapp3.1 was computed. |
.NET Standard | netstandard2.1 is compatible. |
MonoAndroid | monoandroid was computed. |
MonoMac | monomac was computed. |
MonoTouch | monotouch was computed. |
Tizen | tizen60 was computed. |
Xamarin.iOS | xamarinios was computed. |
Xamarin.Mac | xamarinmac was computed. |
Xamarin.TVOS | xamarintvos was computed. |
Xamarin.WatchOS | xamarinwatchos was computed. |
-
.NETStandard 2.1
- Microsoft.AspNetCore.Components.DataAnnotations.Validation (>= 3.2.0-rc1.20223.4)
- Microsoft.AspNetCore.Components.Web (>= 3.1.0)
- OneOf (>= 2.1.155)
- System.Text.Json (>= 7.0.0)
-
net5.0
- Microsoft.AspNetCore.Components.DataAnnotations.Validation (>= 3.2.0-rc1.20223.4)
- Microsoft.AspNetCore.Components.Web (>= 5.0.0)
- OneOf (>= 2.1.155)
-
net6.0
- Microsoft.AspNetCore.Components.DataAnnotations.Validation (>= 3.2.0-rc1.20223.4)
- Microsoft.AspNetCore.Components.Web (>= 6.0.0)
- OneOf (>= 2.1.155)
-
net7.0
- Microsoft.AspNetCore.Components.DataAnnotations.Validation (>= 3.2.0-rc1.20223.4)
- Microsoft.AspNetCore.Components.Web (>= 7.0.0)
- OneOf (>= 2.1.155)
-
net8.0
- Microsoft.AspNetCore.Components.DataAnnotations.Validation (>= 3.2.0-rc1.20223.4)
- Microsoft.AspNetCore.Components.Web (>= 8.0.0)
- OneOf (>= 2.1.155)
NuGet packages (30)
Showing the top 5 NuGet packages that depend on AntDesign:
Package | Downloads |
---|---|
Sitko.Core.Blazor.AntDesign
Sitko.Core is a set of libraries to help build .NET Core applications fast |
|
AntDesign.ProLayout
Ant Design Pro components for Blazor |
|
AntDesign.TestKit
Package Description |
|
AntDesign.Components.Authentication
🌈 An authentication extensions components for Ant Design Blazor library. |
|
AntDesign.Pro.Layout
Ant Design Pro components for Blazor |
GitHub repositories (14)
Showing the top 5 popular GitHub repositories that depend on AntDesign:
Repository | Stars |
---|---|
dashiell-zhang/NetEngine
基于 .Net 框架搭建的一个基础项目结构
|
|
chunliu/AzureDesignStudio
A web app that helps you create the architecture design diagram for your Azure solutions and automatically generate IaC code from it.
|
|
YukiCoco/CheapSteam
Cheap Steam 为您提供 STEAM 与 BUFF 的饰品价格对比数据.
|
|
thangchung/northwind-dotnet
A full-stack .NET 6 Microservices build on Minimal APIs and C# 10
|
|
BeiYinZhiNian/Caviar-Blazor
Caviar-Blazor是采用Blazor + Ant Design的后台管理框架,框架包含了后台管理的常用功能,简单大方的界面,拥有数据权限、字段权限、API权限等,可精细化控制任意元素,而且更好的兼容手机端,让开发者更专注于业务上的开发。
|