ant-design-blazor/introduce.en-US.md at ce50786311feb7ef3c7216f45d03a9a0b96e859c

mirror of https://gitee.com/ant-design-blazor/ant-design-blazor.git synced 2024-12-02 20:17:58 +08:00

James Yeung 781c7c09e5 chore: update versions for release 0.1.0 and development of 0.2.0 (#289 )

* docs: update version 0.1.0

* chore: update versions for development of 0.2.0

2020-07-01 10:24:37 +08:00

9.9 KiB

Raw Blame History

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.
📦 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 Release
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

Release:
Development:

🎨 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

Create Blazor WebAssembly Project

$ dotnet new blazorwasm -o MyAntDesignApp

Go to the project folder of the application and install the Nuget package reference
```
$ cd MyAntDesignApp
$ dotnet add package AntDesign --version 0.1.0-*
```
Register the services
```
services.AddAntDesign();
```

Link the static files in wwwroot/index.html (WebAssembly) or Pages/_Host.razor (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 in App.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 3.1.300 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 2019 is recommended for development.

🔗 Links

🗺 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

9.9 KiB Raw Blame History