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

mirror of https://gitee.com/ant-design-blazor/ant-design-blazor.git synced 2024-12-06 05:57:39 +08:00

ElderJames 4f322ac11c docs: replace images cdn links

2020-12-08 19:32:38 +08:00

11 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/.NET 5 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 / .NET 5
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 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::0.1.0-*

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 --version 0.1.0-*
```
Register the services
```
services.AddAntDesign();
```

Link the static files in wwwroot/index.html (WebAssembly) or Pages/_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 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 5.0.100 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

11 KiB Raw Blame History Unescape Escape