* Changelog 0.13.0 * update readme
11 KiB
order | title |
---|---|
0 | Ant Design of Blazor |
Following the Ant Design specification, we developed a Blazor Components library ant-design-blazor
that contains a set of high quality components and demos for building rich, interactive user interfaces.
✨ Features
- 🌈 Enterprise-class UI interactive language and visual style.
- 📦 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 examples:
🖥 Environment Support
- Supports .NET Core 3.1 / .NET 5 / .NET 6 / .Net 7.
- 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.
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.
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.
📦 Installation Guide
- Install .NET Core SDK 3.1.300 or later, .NET 7 is even better.
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:
-
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 | 'wasm' | 'server' | 'hosted' | 'wasm' |
--no-restore |
If specified, skips the automatic restore of the project on create | bool | false |
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
services.AddAntDesign();
-
Link the static files in
wwwroot/index.html
(WebAssembly) orPages/_Host.cshtml
(Server)<link href="_content/AntDesign/css/ant-design-blazor.css" rel="stylesheet" /> <script src="_content/AntDesign/js/ant-design-blazor.js"></script>
-
Add namespace in
_Imports.razor
@using AntDesign
-
To display the pop-up component dynamically, you need to add the
<AntContainer />
component inApp.razor
.<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!
<Button Type="primary">Hello World!</Button>
🔨 Local Development
-
Install .NET Core SDK 7.0.x or later.
-
Install Node.js (only for building style files and interoperable TypeScript files)
-
Clone to local development
$ git clone git@github.com:ant-design-blazor/ant-design-blazor.git $ cd ant-design-blazor $ npm install $ 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
🤝 Contributing
If you would like to contribute, feel free to create a Pull Request, or give us Bug Report.
❓ 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.