English | 簡(jiǎn)體中文
? 特性
- ?? 提煉自企業(yè)級(jí)中后臺(tái)產(chǎn)品的交互語(yǔ)言和視覺(jué)風(fēng)格棠隐。
- ?? 開(kāi)箱即用的高質(zhì)量 Blazor 組件瓷们，可在多種托管方式共享氮兵。
- ?? 支持基于 WebAssembly 的客戶(hù)端和基于 SignalR 的服務(wù)端 UI 事件交互痕檬。
- ?? 支持漸進(jìn)式 Web 應(yīng)用（PWA）
- ?? 使用 C# 構(gòu)建，多范式靜態(tài)語(yǔ)言帶來(lái)高效的開(kāi)發(fā)體驗(yàn)故硅。
- ?? 基于 .NET Standard 2.1 / .NET 5殷绍，可直接引用豐富的 .NET 類(lèi)庫(kù)梗摇。
- ?? 可與已有的 ASP.NET Core MVC糯崎、Razor Pages 項(xiàng)目無(wú)縫集成几缭。
?? 在線(xiàn)示例
WebAssembly 靜態(tài)托管頁(yè)面示例
?? 支持環(huán)境
- .NET Core 3.1 / .NET 5。
- Blazor WebAssembly 3.2 /.NET 5 正式版沃呢。
- 支持服務(wù)端雙向綁定年栓。
- 支持 WebAssembly 靜態(tài)文件部署。
- 主流 4 款現(xiàn)代瀏覽器薄霜，以及 Internet Explorer 11+（限 Blazor Server）某抓。
- 可直接運(yùn)行在 Electron 等基于 Web 標(biāo)準(zhǔn)的環(huán)境上。
由于 WebAssembly 的限制惰瓜，Blazor WebAssembly 不支持 IE 瀏覽器否副，但 Blazor Server 支持 IE 11?。 詳見(jiàn)官網(wǎng)說(shuō)明崎坊。
?? 當(dāng)前版本
?? 設(shè)計(jì)規(guī)范
與 Ant Design 設(shè)計(jì)規(guī)范定期同步副编，你可以在線(xiàn)查看同步日志。
因此流强，你可以直接使用在 Ant Design 中的自定義主題樣式痹届。
?? 安裝
- 先安裝 .NET Core SDK 3.1.300 以上版本，推薦 .NET 5
從模板創(chuàng)建一個(gè)新項(xiàng)目
我們提供了 dotnet new 模板來(lái)創(chuàng)建一個(gè)開(kāi)箱即用的 Ant Design Pro 新項(xiàng)目：
-
安裝模板
$ dotnet new --install AntDesign.Templates -
從模板創(chuàng)建 Ant Design Blazor Pro 項(xiàng)目
$ dotnet new antdesign -o MyAntDesignApp
模板的參數(shù)：
| 參數(shù) | 說(shuō)明 | 類(lèi)型 | 默認(rèn)值 |
|---|---|---|---|
-f | --full
|
如果設(shè)置這個(gè)參數(shù)打月，會(huì)生成所有 Ant Design Pro 頁(yè)面 | bool | false |
-ho | --host
|
指定托管模型 | 'wasm' | 'server' | 'hosted' | 'wasm' |
--no-restore |
如果設(shè)置這個(gè)參數(shù)队腐，就不會(huì)自動(dòng)恢復(fù)包引用 | bool | false |
在已有項(xiàng)目中引入 Ant Design Blazor
-
進(jìn)入應(yīng)用的項(xiàng)目文件夾，安裝 Nuget 包引用
$ dotnet add package AntDesign --version -
在項(xiàng)目中注冊(cè):
services.AddAntDesign(); -
在
wwwroot/index.html(WebAssembly) 或Pages/_Host.cshtml(Server) 中引入靜態(tài)文件:<link href="_content/AntDesign/css/ant-design-blazor.css" rel="stylesheet" /> <script src="_content/AntDesign/js/ant-design-blazor.js"></script> -
在
_Imports.razor中加入命名空間@using AntDesign -
為了動(dòng)態(tài)地顯示彈出組件奏篙，需要在
App.razor中添加一個(gè)<AntContainer />組件柴淘。<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 /> <-- 在這里添加 ? -
最后就可以在
.razor組件中引用啦！<Button type="primary">Hello World!</Button>
?? 本地開(kāi)發(fā)
先安裝 .NET Core SDK 5.0.100 以上版本
安裝 Node.js（只用于樣式文件和互操作所需 TS 文件的構(gòu)建）
-
克隆到本地開(kāi)發(fā)
$ git clone git@github.com:ant-design-blazor/ant-design-blazor.git $ cd ant-design-blazor $ npm install $ npm start -
打開(kāi)瀏覽器訪(fǎng)問(wèn) https://localhost:5001 秘通，詳情參考本地開(kāi)發(fā)文檔为严。
推薦使用 Visual Studio 2019 開(kāi)發(fā)。
?? 鏈接
?? 開(kāi)發(fā)路線(xiàn)
查看這個(gè) issue 來(lái)了解我們 2020 年的開(kāi)發(fā)計(jì)劃肺稀。
?? 如何貢獻(xiàn)
如果你希望參與貢獻(xiàn)第股，歡迎 Pull Request，或給我們 報(bào)告 Bug 话原。
? 社區(qū)互助
如果您在使用的過(guò)程中碰到問(wèn)題夕吻，可以通過(guò)以下途徑尋求幫助，同時(shí)我們也鼓勵(lì)資深用戶(hù)通過(guò)下面的途徑給新人提供幫助繁仁。
?? 授權(quán)協(xié)議
(https://github.com/ant-design-blazor/ant-design-blazor/blob/master/LICENSE)
