Code Monkey home page Code Monkey logo

Ant Design Blazor

A rich set of enterprise-class UI components based on Ant Design and Blazor.

Build AntDesign AntDesign AntDesign.Templates codecov AntDesign Ding Talk Group Discord Server

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

Option 1: Create a new project from the dotnet new template AntDesign.Templates

We have provided the dotnet new template to create a Boilerplate project out of the box๏ผš

Pro Template

  • 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'
--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 in App.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 โœจ
  • 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.

Open in Gitpod

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

PRs Welcome

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.

  • Discord Server

  • ้’‰้’‰็พค

    Scan QR Code with DingTalk

Contributors

This project exists thanks to all the people who contribute.

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

AntDesign

.NET Foundation

This project is supported by the .NET Foundation.

Ant Design Blazor's Projects

ant-design-blazor icon ant-design-blazor

๐ŸŒˆA set of enterprise-class UI components based on Ant Design and Blazor WebAssembly.

ant-design-pro-blazor icon ant-design-pro-blazor

๐Ÿ‘จ๐Ÿปโ€๐Ÿ’ป๐Ÿ‘ฉ๐Ÿปโ€๐Ÿ’ป An out-of-box UI solution for enterprise applications as a Blazor boilerplate.

vditor-blazor icon vditor-blazor

๐Ÿ“ A markdown web editor based on Vditor and Blazor.

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.