Ant Design Blazor
Notification通知提醒框
全局展示通知提醒信息。
何时使用
在系统四个角显示通知提醒信息。经常用于以下情况：
- 较为复杂的通知内容。
- 带有交互的通知，给出用户下一步的行动点。
- 系统主动推送。
Examples
最简单的用法，4.5 秒后自动关闭。
通知提醒框左侧有图标。
图标可以被自定义。
可以通过唯一的 key 来更新内容。
利用 .NET 6 提供的 ErrorBoundary 进行友好的 Blazor 错误处理 包裹组件。
自定义通知框自动关闭的延时，默认4.5s，取消自动关闭只要将该值设为 0 即可。
自定义关闭按钮的样式和文字。
通知从右上角、右下角、左下角、左上角弹出。
使用 NotificationRef。
Notification API#
| 属性 | 描述 | 类型 | 默认值 |
|---|---|---|---|
| Id | 属性组件 HTML 的 ID | String | Uniquely Generated ID |
| Class | 属性为 DOM 元素指定一个或多个类名。 | String | -- |
| Style | 属性指定 DOM 元素的内联样式。 | String | -- |
| RefBack | 属性一个 ForwardRef 实例。您可以使用 AntDesign.ForwardRef.Current 获取对内部 DOM 的引用。 |
ForwardRef | -- |
NotificationService API#
| 方法签名 | 返回类型 | 描述 |
|---|---|---|
| Config(NotificationGlobalConfig config) | void | 为所有通知提供默认配置 |
| CreateRefAsync(NotificationConfig config) | Task<NotificationRef> | 只需创建一个 NotificationRef 而不打开它 |
| UpdateAsync(String key, OneOf<String, RenderFragment> description, OneOf<String, RenderFragment?? message) | Task | 更新现有的通知框 |
| Open(NotificationConfig config) | Task<NotificationRef> | 打开通知框 |
| Success(NotificationConfig config) | Task<NotificationRef> | 打开带有 NotificationType.Success 样式的通知框 |
| Error(NotificationConfig config) | Task<NotificationRef> | 打开一个带有 NotificationType.Error 样式的通知框 |
| Info(NotificationConfig config) | Task<NotificationRef> | 打开一个 NotificationType.Info 样式的通知框 |
| Warning(NotificationConfig config) | Task<NotificationRef> | 打开一个 NotificationType.Warning 样式的通知框 |
| Warn(NotificationConfig config) | Task<NotificationRef> | 相当于警告方法 |
| Close(String key) | Task | 按键关闭通知 |
| Destroy() | void | 销毁所有通知框 |
NotificationConfig API#
| 属性 | 描述 | 类型 | 默认值 |
|---|---|---|---|
| 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#
| 属性 | 描述 | 类型 | 默认值 |
|---|---|---|---|
| Config | 通知框的配置 | NotificationConfig | -- |
| OnOpen | Func<Task> | -- | |
| OnClose | Func<Task> | -- |
| 方法签名 | 返回类型 | 描述 |
|---|---|---|
| OpenAsync() | Task | 打开通知框 |
| UpdateConfigAsync() | Task | 修改Config属性后，更新通知框 |
| UpdateConfigAsync(OneOf<String, RenderFragment> description) | Task | 更新通知框的描述 |
| UpdateConfigAsync(OneOf<String, RenderFragment> description, OneOf<String, RenderFragment> message) | Task | 更新通知框的描述和消息 |
| CloseAsync() | Task | 关闭通知框 |