漂亮的JavaScript通知，支持Web通知。
Posted
tags:
中文标题：漂亮的JavaScript通知，支持Web通知。 原文标题：Beautiful JavaScript notifications with Web Notifications support. 项目评级：Star:3600 Fork:529 下载地址：https://github.com/sciactive/pnotify 详情介绍第4部分：
版本5:
JavaScript/TypeScript通知、确认和提示库。
通知可以显示为吐司风格、小吃条风格、横幅、对话框、警报或桌面通知（使用Web通知规范），并返回到浏览器内通知。
PNotify提供了一个名为modalish的独特通知流，即使同时显示多个通知，也能提供良好的用户体验。
Demos公司
最新稳定-http://sciactive.com/pnotify/
开发-https://sciactive.github.io/pnotify/
目录
入门
您可以使用NPM或Yarn获得PNotify。（您也可以使用jsDelivr。）
您应该单独安装所需的软件包。或者，您可以使用pnotify软件包一次安装所有这些软件。
旧版本的文档
从PNotify 4迁移
安装
除了JS和CSS之外，一定要包含PNotify样式。
苗条的
PNotify在Svelte。
反应
P反应中的通知。
有棱角的
P以角度通知。
有关IE支持，请参阅本期。
角度（可注射）
PNotify in Angular（可注入）
AngularJS公司
PNotify在AngularJS中。
香草JS（ES5）
PNotify香草ES5
香草JS（ES6）
PNotify香草ES6+
样式
明亮的主题
默认主题，明亮主题。支持暗模式。在页面中包含CSS文件：
或者，如果您使用的是导入CSS的打包程序：
布料
材料主题。支持暗模式。需要材料设计图标和可选的Roboto字体。在页面中包含CSS文件：
或者，如果您使用的是导入CSS的打包程序：
然后将默认样式和图标设置为“材质”：
材质图标
若要使用“材质样式”图标，请在页面中包含“材质设计图标字体”。
或者，如果您使用的是导入CSS的打包程序：
或者，您可以使用谷歌字体CDN：
或者是jsDelivr的克隆：
Roboto字体
材质样式使用Roboto的“400”和“500”重量。它将回到“无衬线”。
您可以使用谷歌字体CDN：
安吉勒
Angeler主题。支持暗模式。在页面中包含CSS文件：
或者，如果您使用的是导入CSS的打包程序：
建议您在默认情况下将关闭按钮设置为不隐藏，因为这就是Angela设计主题的最佳方式。
您可以使用angeler-extended类为Angeler主题使用替代的、更宽敞的造型。这对于页面中心的大通知（如页面错误）非常有效。
：信息：它是以设计它的Angela Murrell的名字命名的，发音像An jel er。
独自创立
流行的引导程序库的样式。不支持暗模式（但您可以使用引导主题）。
包括CSS：
或者，如果您使用的是导入CSS的打包程序：
包括以下适当的行：
然后将其设置为默认模块：
将Bootstrap 3的“4”更改为“3”，还可以导入并设置PNotifyGlyphicon以使用Bootstrap 3.PNotifyGlyphicon没有任何CSS可导入。
字体真棒4（图标）
要将Font Awesome 4设置为默认图标，请从下面包含相应的行：
然后将其设置为默认模块：
字体真棒5（图标）
要将Font Awesome 5设置为默认图标，请从下面包含相应的行：
然后将它们设置为默认模块：
如果你不想使用Font Awesome 5作为默认图标，但你仍然希望在通知中支持它们，你应该只包括@pnotify/font-awesome5-fix包。Font Awesome 5在其代码中发挥了一些神秘的魔力，打破了PNotify。此模块有一个解决方法。
创建通知
要发出通知，请使用出厂功能。每个选项都将一个选项对象作为其唯一的参数。它将返回一个PNotify通知实例。
选项
P通知选项和默认值。
defaults =
了解有关堆栈的更多信息。
更改默认值
将模块添加/删除到默认值：
更改模块的默认值：
模块
使用模块创建通知
除了使用默认模块外，您还可以删除或添加模块，并在发出通知时设置它们的选项。模块Map将模块本身作为键，并将选项对象作为值。
打字脚本
将模块与TypeScript一起使用需要对模块条目进行类型断言，并且可能需要downlevelIterationTypeScript选项。
桌面模块
即使在网页不可见时也会显示的通知。实现Web通知规范。
如果用户的浏览器不支持Web通知，或者他们拒绝显示这些通知的权限，他们将看到常规的浏览器内通知，除非fallback为假。
PNotifyDesktop.defaults =
移动模块
手机和平板电脑上的注意事项。
PNotifyMobile.defaults =
倒计时模块
给出我需要多长时间的指示
s还剩。
PNotifyCountdown.defaults =
动画模块
使用Animate.CSS的Fluid CSS动画。
PNotifyAnimate.defaults =
动画模块还在通知上创建一个方法attention(aniClass, callback)，该方法接受一个引人注目的类和一个动画完成的回调。
确认模块
确认对话框和提示。
PNotifyConfirm.defaults =
因为默认按钮在确认和取消时会触发通知事件，所以您可以像这样监听它们：
寻呼模块
提供堆栈中通知的索引和计数，和/或让用户浏览它们的按钮。
PNotifyPaginate.defaults =
导出的方法和属性
实例方法和属性
事件
事件对象具有detail属性，该属性包含有关事件的信息，包括对通知本身的引用。
来自Svelte组件API。
不要使用这些。我把它们放在这里是为了证明你不应该使用它们。这样，如果你这样做了，并且你提交了一份错误报告，我可以在自述文件中指向这一部分，告诉你你做得很糟糕。
堆叠
堆栈是Stack类的一个实例，用于确定通知的位置以及它们如何相互作用。
堆栈选项及其默认值：
堆栈行为：
堆叠方法：
堆栈类上还有其他方法，但您不应该使用它们。它们是内部的，所以它们以下划线开头。
堆栈属性：
所有选项也是属性。
堆栈事件和event.detail内容：
打电话给类似于alert(text: 'notice', stack: new Stack(dir1: 'down', firstpos1: 25));的人可能不会达到你想要的效果。它将创建一个通知，但该通知将在自己的堆栈中，并与其他通知重叠。
示例堆栈
下面是一个带有注释的示例堆栈。你可以在这里玩。
如果您只想以编程方式定位单个通知，而不想将任何其他通知添加到堆栈中，则可以使用以下方法：
特征
浏览器兼容性和内部版本大小
PNotify提供预构建的JS文件，这些文件通过Babel运行，以提供与旧浏览器的兼容性。因此，它们的构建大小会增长以保持兼容性。如果这是不可接受的，您可以自己构建更小（约为原始文件的80%）的文件：
您现在应该在所有具有较小（但仅与较新浏览器兼容）构建文件的包中都有dist文件夹。请注意，这不适用于Svelte项目，因为它们无论如何都会构建PNotify*.Svelte源文件。
许可和其他信息
版权所有2009-2020 Hunter Perrin
版权所有2015 Google，Inc。
根据Apache许可证2.0版（“许可证”）许可；
除非符合许可证的规定，否则您不得使用此文件。
您可以在以下网址获取许可证副本
http://www.apache.org/licenses/LICENSE-2.0
除非适用法律要求或书面同意，否则软件
根据许可证分发是在“按原样”的基础上分发的，
无任何明示或暗示的保证或条件。
有关管理权限的特定语言，请参阅许可证
许可证下的限制。
看见http://sciactive.com/pnotify/了解更多信息和演示。
是否有一个通知平台同时支持带有 Xamarin 的移动应用程序和带有 Javascript 的 Web 浏览器
javascript Web Notifications桌面通知