Ant Design Blazor

An enterprise-class UI components based on Ant Design and Blazor.

简体中文

✨ Features

• Enterprise-class UI interactive language and visual style.
• Out-of-the-box, high-quality Razor components that can be shared in a variety of hosting models.
• 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.
• NET Standard 2.1 based, with direct reference to the rich .NET ecosystem.
• Seamless integration with existing ASP.NET Core MVC and Razor Pages projects.

🌈 Online Examples

WebAssembly static hosting examples:

• Gitee
• GitHub

🖥 Environment Support

• .NET Core 3.1
• Blazor WebAssembly 3.2 Preview 2
• Supports two-way binding on the server side
• Supports WebAssembly static file deployment
• Support 4 major browsers engines, and Internet Explorer 11+ (Blazor Server only)
• Run directly on 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

💿 Current Version

• Development:

• 0.1.0：will be released after basic implementation of components

🎨 Design Specification

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

📦 Installation Guide

• Install .NET Core SDK 3.1.102 or above

• Install Blazor WebAssembly Templates

  $ dotnet new -i Microsoft.AspNetCore.Components.WebAssembly.Templates::3.2.0-preview2.20160.5
  

• Create Blazor WebAssembly Project

  $ dotnet new blazorwasm -o MyAntBlazorApp
  

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

  $ cd MyAntBlazorApp
  $ dotnet add package AntBlazor --version 0.0.1-nightly-55111624
  

• Register the services

  services.AddAntBlazor();
  

• Link the static files in wwwroot/index.html (WebAssembly) or Pages/_Host.razor (Server)

    <link href="_content/AntBlazor/css/ant-design-blazor.css" rel="stylesheet">
    <script src="_content/AntBlazor/js/ant-design-blazor.js"></script>
  

• Add namespace in _Imports.razor

  @using AntBlazor
  

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

  <AntButton type="primary">Hello World!</AntButton>
  

🔨 Local Development

• Install .NET Core SDK 3.1.102 or later.

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

• Clone to local development

  $ git clone git@github.com:ElderJames/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 2019 is recommended for development. Currently AntBlazor.Docs.ServerApp project is required to run for breakpoint debugging.

🔗 Links

• Ant Design Blazor Documentation
• Official Blazor Documentation

🗺 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.

❓ 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.

• (Chinese & English)
• (Chinese)

Scan QR Code with DingTalk

☀️ License