Blazor Bootstrap 组件库浏览器通知组件介绍

通知组件

通过浏览器API发送通知信息 , 桌面浏览器表现为右下角系统提示框弹出消息, 移动浏览器表现为弹窗或者到消息列表, blazor页面不在前台也可以通过本组件提醒用户.

DEMO https://www.blazor.zone/notifications

小提示

注意: 出于安全考虑，当网页请求发送通知时，用户会被提示进行授权

使用 BrowserNotification 静态方法直接调用 Dispatch 方法

private NotificationItem Model { get; set; } = new NotificationItem();

private async Task Dispatch()
{
    Interop ??= new JSInterop<Notifications>(JSRuntime);
    await BrowserNotification.Dispatch(Interop, this, Model, nameof(ShowNotificationCallback));
}

[JSInvokable]
public void ShowNotificationCallback(bool result)
{
    // callback
    StateHasChanged();
}

通知类定义 NotificationItem

参数	说明	类型	可选值	默认值
Title	标题	string	—	—
Message	信息	string	—	—
Icon	图标	string	—	—
Silent	静默	bool	—	—
Sound	通知触发时要播放的音频文件的 URL	string	—	—
OnClick	通知点击后的回调方法名称	Methods	—	—

Blazor Bootstrap 组件库文档

https://www.blazor.zone

写在最后

　　希望大佬们看到这篇文章，能给项目点个star支持下，感谢各位！

star流程：

1、访问点击项目链接：BootstrapBlazor

　　https://gitee.com/LongbowEnterprise/BootstrapBlazor

2、点击star，如下图，即可完成star，关注项目不迷路：

　　

　　

另外还有两个GVP项目，大佬们方便的话也点下star呗，非常感谢：

　　BootstrapAdmin 项目地址：

　　https://gitee.com/LongbowEnterprise/BootstrapAdmin

　　SliderCaptcha 项目地址：

　　https://gitee.com/LongbowEnterprise/SliderCaptcha

交流群（QQ）欢迎加群讨论

　　 BA & Blazor ①（795206915）　　　　　　　 BA & Blazor ②（675147445）