Following the Ant Design specification, we developed a Blazor component library ant-design-blazor
that contains a set of high quality components and demos for building rich, interactive user interfaces.
- 🌈 Enterprise-class UI designed for web applications.
- 📦 Out-of-the-box, high-quality Blazor components that can be shared in all hosting models.
- 🛡 Written in C# with predictable static types, JavaScript is kept to a bare minimum.
- ⚙️ Whole package of design resources and development tools.
- 🌍 Icons and styles are synchronized with the core libraries of Ant Design.
- 🎨 Powerful theme customization.
- .NET Core 3.1
- Blazor WebAssembly 3.2 Release Candidate.
- Support for server-side environments.
- Support for WebAssembly static file deployments.
- Support for 4 major browsers engines, and Internet Explorer 11+ (Blazor server-side only).
- Runs directly on Electron and other Web standard-based environments like Web Window.
Edge / IE |
Firefox |
Chrome |
Safari |
Opera |
Electron |
---|---|---|---|---|---|
Edge 16 / IE 11† | 522 | 57 | 11 | 44 | Chromium 57 |
Due to the WebAssembly restriction, Blazor WebAssembly doesn't support Internet Explore, but Blazor Server supports IE 11† with additional polyfills. See official documentation
WebAssembly static hosting examples on GitHub Pages:
-
Install .NET Core SDK 3.1.201 or later
-
Install the Blazor WebAssembly Templates
$ dotnet new -i Microsoft.AspNetCore.Components.WebAssembly.Templates::3.2.0-rc1.20223.4
-
Create a Blazor WebAssembly Project
$ dotnet new blazorwasm -o YourCoolApp
-
Go to the project folder of the application and install the Nuget package reference
$ cd YourCoolApp $ dotnet add package Append.AntDesign
-
Register the services
services.AddAntDesign();
-
Link the static files in
wwwroot/index.html
(WebAssembly) orPages/_Host.razor
(Server)- CSS - In the
head
element
<link rel="stylesheet" href="_content/Append.AntDesign/css/ant-design-blazor.min.css" />
- JavaScript - In the
body
element (at the end before the Blazor script).
<script type="text/javascript" src="_content/Append.AntDesign/js/ant-design-blazor.min.js"></script> <!-- Blazor Framework Script Here -->
Note that JavaScript is kept to a bare minimum, but some actions cannot simply not be done without it.
- CSS - In the
-
Add namespace in
_Imports.razor
@using Append.AntDesign.Core @using Append.AntDesign.Components @using Append.AntDesign.Services
-
Finally, use any of the components
<Button Type="ButtonType.Primary" Label="Hello Ant Design"> <Icon Type="IconType.Outlined.GitHub"/> </Button>
-
Install .NET Core SDK 3.1.102 or later.
-
Make sure you're using Visual Studio 16.6+
-
Clone to local development
$ git clone https://github.com/Append-IT/ant-design-blazor.git
-
Run the
Append.AntDesign.Standalone
orAppend.AntDesign.Server
-
Visit https://localhost:5001 in your supported browser.
The latest version of Visual Studio 2019 is recommended for development.
- Ant Design Blazor Documentation
- Official Ant Design Home page
- Official Blazor Documentation
- Ant Design Icons
- Ant Design Colors
- Dark Theme
- Landing Pages
- Motion
If you'd like to help us improve ant-design-blazor
, just create a Pull Request. Feel free to report bugs and issues here.
If you're new to posting issues, we ask that you read How To Ask Questions The Smart Way and How to Ask a Question in Open Source Community and How to Report Bugs Effectively prior to posting. Well written bug reports help us help you!