百度360必应搜狗淘宝本站头条
当前位置:网站首页 > 编程网 > 正文

浏览器端漂亮的通知提示组件,没想到也会这么优雅——PNotify

yuyutoo 2024-10-12 01:15 6 浏览 0 评论

介绍

PNotify是一个原生JavaScript通知和确认/提示库。PNotify可以根据Web Notifications规范提供桌面通知,并返回浏览器内通知。PNotify是目前笔者正在项目中使用的一个通知提示组件,功能非常丰富,可以让你的Web项目通知和提示更加的优雅!



Github

https://github.com/sciactive/pnotify

快速开始

npm install --save pnotify
# Material style:
npm install --save material-design-icons
# Animate module:
npm install --save animate.css
# NonBlock module:
npm install --save nonblockjs

PNotify模块目录如下:

  • src Svelte组件和未压缩的Bright Theme CSS;
  • lib/es 未压缩的ECMAScript模块;
  • lib/umd 未压缩的UMD模块;
  • lib/iife 未压缩的 IIFE scripts;
  • dist 压缩过的 Bright Theme CSS;
  • dist/es 压缩过的ECMAScript 模块;
  • dist/umd 压缩过的 UMD 模块;
  • dist/iife 压缩过的 IIFE scripts;

丰富的特性

  • 丰富的UI和效果:
  • Material,Bootstrap 3/4,Font Awesome 4/5,或stand-alone theme, Bright Theme
  • 移动样式和滑动支持。
  • 定时隐藏。
  • 使用Animate.css进行光滑的动画。
  • 注意使用Animate.css的getter。
  • 高度可定制的UI。
  • 粘滞的通知。
  • 可选的关闭和按钮。
  • 非阻塞性通知,以减少侵入性使用。
  • 通知类型:通知,信息,成功和错误。
  • 堆栈允许通知一起或独立定位。
  • 控制堆栈方向并推到顶部或底部。
  • 模态通知。
  • 确认对话框,警报按钮和提示。
  • RTL语言支持。
  • 功能丰富的API。
  • 基于Web Notifications标准的桌面通知。
  • 动态更新现有通知。
  • 将表单和其他HTML放在通知中。
  • 默认情况下,转义文本以防止XSS攻击。
  • 生命周期事件的回调。
  • 请注意重新显示旧通知的历史记录。
  • 普遍兼容。
  • 适用于任何前端库(React,Angular,Svelte,Vue,Ember等)。
  • 适用于打包工具(Webpack,Rollup等)。
  • 大多数功能都没有依赖关系。

效果预览

要想看真实效果的朋友可以直接看官方提供的demo,非常的丰富示例,绝对让你有使用它的冲动,咱们通过截图来看一下:








具体的效果只有使用了之后才会体会到,绝对值得使用!

如何使用?


  • 在React中使用
import PNotify from 'pnotify/dist/es/PNotify';
import PNotifyButtons from 'pnotify/dist/es/PNotifyButtons';
PNotify.alert('Notice me, senpai!');

  • Angular
import PNotify from 'pnotify/dist/es/PNotify';
import PNotifyButtons from 'pnotify/dist/es/PNotifyButtons';
//...
export class WhateverComponent {
 constructor() {
 PNotifyButtons; // Initiate the module. Important!
 PNotify.alert('Notice me, senpai!');
 }
}

  • 原生ES5
<script type="text/javascript" src="node_modules/pnotify/dist/iife/PNotify.js"></script>
<script type="text/javascript" src="node_modules/pnotify/dist/iife/PNotifyButtons.js"></script>
<script type="text/javascript">
 PNotify.alert('Notice me, senpai!');
</script>

  • 原生ES6
import PNotify from 'node_modules/pnotify/dist/es/PNotify.js';
import PNotifyButtons from 'node_modules/pnotify/dist/es/PNotifyButtons.js';
PNotify.alert('Notice me, senpai!');

  • 默认主题
<link href="node_modules/pnotify/dist/PNotifyBrightTheme.css" rel="stylesheet" type="text/css" />

  • Material

Material 样式模块:

import PNotifyStyleMaterial from 'pnotify/dist/es/PNotifyStyleMaterial.js';
// or
var PNotifyStyleMaterial = require('pnotify/dist/umd/PNotifyStyleMaterial.js');
// Set default styling.
PNotify.defaults.styling = 'material';
// This icon setting requires the Material Icons font. (See below.)
PNotify.defaults.icons = 'material';

  • Material Icons
# The official Google package:
npm install --save material-design-icons
# OR, An unofficial package that only includes the font:
npm install --save material-design-icon-fonts

  • Bootstrap作为默认样式

要将Bootstrap设置为默认样式,请在导入PNotify后从下面包含相应的设置:

PNotify.defaults.styling = 'bootstrap3'; // Bootstrap version 3
PNotify.defaults.icons = 'bootstrap3'; // glyphicons
// or
PNotify.defaults.styling = 'bootstrap4'; // Bootstrap version 4

  • Font Awesome

要将Font Awesome设置为默认图标,请在导入PNotify后从下面包含相应的设置:

PNotify.defaults.icons = 'fontawesome4'; // Font Awesome 4
// or
PNotify.defaults.icons = 'fontawesome5'; // Font Awesome 5

创建通知提示

// 手动设置类型
PNotify.alert({
 text: "I'm an alert.",
 type: 'notice'
});
// 自动设置类型。
PNotify.notice({
 text: "I'm a notice."
});
PNotify.info({
 text: "I'm an info message."
});
PNotify.success({
 text: "I'm a success message."
});
PNotify.error({
 text: "I'm an error message."
});

总结

以上只是简单的介绍,如果你想让你的浏览器推送通知不是很简陋,笔者认为是时候使用这样一个插件来助你解决这个问题了:



PNotify是笔者用过的最优雅的提示通知组件,推荐给需要的人!

相关推荐

苹果要求全新App开发四月起必须支持“齐刘海”

今日消息,苹果公司通过邮件告知应用程序开发者,从2018年4月起提交给AppStore的所有新应用必须支持iPhoneX的超级视网膜显示器。这意味着新应用程序的开发者必须确保它们适应“齐刘海”,并...

耗时一年多,QEMU开发者成功在电脑上模拟了初版iPhone OS

IT之家12月24日消息,用户通过黑苹果(Hackintosh)工具,已经可以在非Mac设备上运行macOS系统。但由于种种限制,至今也没有多少人能够在PC上运行iOS系统。现...

下个月的WWDC后,苹果将发布原生Watch SDK测试版本

在近日Re/code举办的CodeConference上,苹果的运营副总裁JeffWilliams称,目前有4000多个AppleWatch应用上线,而未来的苹果表开发者套件,将允许开发者直接获...

苹果再次提醒:4月起强制要求APP进行适配

点击右上角关注我们,每天给您带来最新最潮的科技资讯,让您足不出户也知道科技圈大事!软件适配对于许多厂商来说都是一个比较头疼的事,苹果在握紧AppStore审核权的情况下情况要好许多。最近他们公布了...

苹果Xcode 16首个Beta版发布,AI代码补全最少需16GB内存

IT之家6月12日消息,在苹果WWDC24开发者大会上,苹果发布了iOS18、macOS15Sequoia等最新版本系统更新。与此同时,苹果推出了Xcode16开发工具的首...

传苹果已向特定开发者开放iWatch SDK

|责编:薄志强苹果会不会在这次发布会中发布全新的智能手表产品iWatch还很难说,不少人认为由于iWatch的消息少之又少,很可能这次还是没有iWatch。不过现在又有外媒传出消息称,苹果已经选定了...

苹果发布Swift 6语言:引入新测试框架、增强C++ 互操作性

IT之家9月20日消息,科技媒体devclass昨日(9月19日)报道,苹果公司在发布iOS/iPadOS18和macOS15Sequoia系统之外,还发布了Sw...

发布Siri SDK 之前苹果还是先想想这个问题

今年的GoogleI/O大会上,在预览GoogleHome时,我们就看到了设备可以互相对话的场景是多么惊艳,苹果快点跟上吧。最近因为亚马逊Echo和谷歌GoogleHome的火热...

iOS 17.2 SDK代码确认古尔曼爆料:免开箱更新苹果iPhone系统

IT之家10月27日消息,彭博社的马克古尔曼(MarkGurman)本月早些时候发布报道,称苹果正在研发新的系统,可以让员工在不拆开包装的情况下,升级iPhone的iOS系统。根据国...

《企业应用架构模式》之事件驱动架构

事件驱动架构(Event-DrivenArchitecture,EDA)是一种强调事件流和异步通信的应用程序架构。在该架构中,应用程序被分解为多个小型、可独立部署的组件,这些组件通过事件进行通信...

k8s中常用的controller以及用途和对应机制

controller的用途ReplicaSet、Deployment、StatefulSet:用于无状态和有状态应用的副本管理。DaemonSet:确保每个节点上都运行一个副本的控制器。...

Disruptor框架源码阅读-如何不重复消费

RingBuffer如何保证数据不丢失由于ringbuffer是一个环形的队列,那么生产者和消费者在遍历这个队列的时候,如何制衡呢?1、生产快,消费慢,数据丢失?生产者速度过快,导致一个对象还没消...

C# 控制电脑睡眠,休眠,关机以及唤醒

最近碰到一个关于芯片测试过程中的问题,这颗芯片是用在笔记本端口上,笔记本客户那边会有一个压力测试,就是频繁的电脑电源状态切换,S0(正常使用的开机状态),S3(睡眠模式),S4(休眠模式)以及S5(关...

大厂防止超卖的7种实现,很受用!(大厂防止超卖的7种实现,很受用的产品)

高并发场景在现场的日常工作中很常见,特别是在互联网公司中,这篇文章就来通过秒杀商品来模拟高并发的场景。本文环境:...

臻识车牌识别配制MQTT通讯,解析车号

在物联网项目中,我们的软件与车牌识别通讯,通常使用MQTT通讯更简单。...

取消回复欢迎 发表评论: