Ant Design Blazor
Notification
Display a notification message globally.
When To Use
To display a notification message at any of the four corners of the viewport. Typically it can be used in the following cases:
- A notification with complex content.
- A notification providing a feedback based on the user interaction. Or it may show some details about upcoming steps the user may have to follow.
- A notification that is pushed by the application.
Examples
The simplest usage that close the notification box after 4.5s.
A notification box with a icon at the left side.
The icon can be customized to any react node.
Update content with unique key.
Using the ErrorBoundary provided by .NET 6 for making error handling easier in Blazor.
Duration can be used to specify how long the notification stays open. After the duration time elapses, the notification closes automatically. If not specified, default value is 4.5 seconds. If you set the value to 0, the notification box will never close automatically.
To customize the style or font of the close button.
A notification box can appear from the topRight, bottomRight, bottomLeft or topLeft of the viewport.
Using NotificationRef.
Notification API#
| Property | Description | Type | Default Value |
|---|---|---|---|
| Id | ParameterID for the component's HTML | String | Uniquely Generated ID |
| Class | ParameterSpecifies one or more class names for an DOM element. | String | -- |
| Style | ParameterSpecifies an inline style for a DOM element. | String | -- |
| RefBack | ParameterA ForwardRef instance. You can get a reference to the internal DOM by using AntDesign.ForwardRef.Current. |
ForwardRef | -- |
NotificationService API#
| Method Signature | Return Type | Description |
|---|---|---|
| Config(NotificationGlobalConfig config) | void | Provide default configuration for all notifications |
| CreateRefAsync(NotificationConfig config) | Task<NotificationRef> | just create a NotificationRef without open it |
| UpdateAsync(String key, OneOf<String, RenderFragment> description, OneOf<String, RenderFragment?? message) | Task | update a existed notification box |
| Open(NotificationConfig config) | Task<NotificationRef> | Open a notification box |
| Success(NotificationConfig config) | Task<NotificationRef> | open a notification box with NotificationType.Success style |
| Error(NotificationConfig config) | Task<NotificationRef> | open a notification box with NotificationType.Error style |
| Info(NotificationConfig config) | Task<NotificationRef> | open a notification box with NotificationType.Info style |
| Warning(NotificationConfig config) | Task<NotificationRef> | open a notification box with NotificationType.Warning style |
| Warn(NotificationConfig config) | Task<NotificationRef> | Equivalent to Warning method |
| Close(String key) | Task | close notification by key |
| Destroy() | void | destroy all Notification box |
NotificationConfig API#
| Property | Description | Type | Default Value |
|---|---|---|---|
| Btn | 自定义关闭按钮 | RenderFragment | -- |
| ClassName | 自定义 CSS class | String | -- |
| CloseIcon | 自定义关闭图标 | RenderFragment | -- |
| Message | 通知提醒标题，必选，string 或者 RenderFragment | OneOf<String, RenderFragment> | -- |
| Description | 通知提醒内容，必选，string 或者 RenderFragment | OneOf<String, RenderFragment> | -- |
| Duration | 自动关闭的延时，单位为秒。默认 4.5 秒后自动关闭，配置为 null 则不自动关闭 | Double? | -- |
| Icon | 自定义图标 | RenderFragment | -- |
| Key | 当前通知唯一标志 | String | -- |
| Style | 自定义内联样式 | String | -- |
| Placement | 弹出位置 | NotificationPlacement? | -- |
| NotificationType | 通知提醒框左侧的图标类型 | NotificationType | -- |
| OnClose | 当通知关闭时触发 | -- | |
| OnClick | 点击通知时触发的回调函数 | -- |
NotificationRef API#
| Property | Description | Type | Default Value |
|---|---|---|---|
| Config | the notification box's config | NotificationConfig | -- |
| OnOpen | Func<Task> | -- | |
| OnClose | Func<Task> | -- |
| Method Signature | Return Type | Description |
|---|---|---|
| OpenAsync() | Task | open the notification box |
| UpdateConfigAsync() | Task | After modifying the Config property, update the notification box |
| UpdateConfigAsync(OneOf<String, RenderFragment> description) | Task | update the notification box's description |
| UpdateConfigAsync(OneOf<String, RenderFragment> description, OneOf<String, RenderFragment> message) | Task | update the notification box's description and message |
| CloseAsync() | Task | close the notification box |