Ant Design Blazor

A Blazor Component Library based on Ant Design

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.

✨ Features

• 🌈 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.

Environment Support

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

Examples

WebAssembly static hosting examples on GitHub Pages:

• GitHub

Installation

• 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) or Pages/_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.

• 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>

Local Development

• 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 or Append.AntDesign.Server

• Visit https://localhost:5001 in your supported browser.

  The latest version of Visual Studio 2019 is recommended for development.

Links

• Ant Design Blazor Documentation
• Official Ant Design Home page
• Official Blazor Documentation
• Ant Design Icons
• Ant Design Colors
• Dark Theme
• Landing Pages
• Motion

Contributing

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!