使用AntDesignBlazor的Notification等組件

新建項目

打開VS，新建一個名為BlazorApp的Blazor項目，至於是Server還是WASM都可以。

安裝NuGet包

在項目上右鍵，選擇“管理NuGet程序t包”，在搜索界面上勾選“包括預發行版”，然后搜索AntDesign，如下圖所示第一個即為本程序的nuget包（不要選擇安裝第5個AntBlazor，這個是以前的名字），選擇安裝即可。

配置項目

使用ant-design-blazor的Notification、Message、Comfirm、Drawer（服務形式創建）,主要需要配置服務的注入與全局容器的添加。

添加服務

Server項目在Startup.cs的ConfigureServices方法中添加

services.AddAntDesign();

WASM項目在Program.cs的Main方法中添加

builder.Services.AddAntDesign()

添加命名空間引用

為了便於使用，需要在 _Imports.razor 中加入命名空間AntDesign：

@using AntDesign

如果不在 _Imports.razor 添加對AntDesign的引用，則需要在各個組件中添加@using AntDesign。

添加全局容器

找到App.razor組件，在最下面添加全局容器AntContainer

<AntContainer />

添加js與css

參考 https://ant-design-blazor.github.io/zh-CN/docs/introduce，此處不贅述。

使用

打開Index.razor組件，更改其代碼如下：

@page "/"
@inject NotificationService _notice

<Button Type="primary" OnClick="Notice">Notice</Button>
@code{
    private async Task Notice()
    {
        await _notice.Info(new NotificationConfig()
        {
            Message = "Title",
	    Description = "here is the message"
        });
    }
}

如果沒有問題，運行程序點擊Notice按鈕后，界面如下圖所示。（注：由於這里我沒有刪除對bootstrap樣式的引用，所以Icon行為與官方的稍微有點差別）。

當然，你也可以使用模板來創建項目 https://github.com/ant-design-blazor/Template。