当前位置:主页 > JavsScript库 > 通知 / 提示 >

警报通知库 - Notyf
栏目分类:通知 / 提示   发布日期:2021-09-22   浏览次数:

Notyf 是一个非常小且易于使用的 JavaScript 库,用于在屏幕上显示咆哮式警报/成功通知消息。响应迅速、易于访问且易于使用。

如何使用它:

在 html 文档中加载 Notyf 的 JavaScript 和样式表。

<link href="dist/notyf.min.css" rel="stylesheet">
<script src="dist/notyf.min.js"></script>

创建一个新的 Notyf 实例,我们就可以开始了。

var notyf = new Notyf();

显示警报通知的 JavaScript。

notyf.alert('警报消息');

显示成功通知的 JavaScript。

notyf.confirm('成功消息');

可用的选择。

var notyf = new Notyf({
 
  // 延迟时间
  // 0 = 无限持续时间
  duration:2000,
 
  // 启用涟漪效应
  ripple: true,
 
  // 自定义位置
  position: {x:'right',y:'bottom'},
 
  // 允许用户通过按钮关闭通知
  dismissible: false,
   
  types: [
    {
      type: 'warning', // 消息类型
      duration: 2000,
      ripple: true,
      message: '自定义内容'
      background: 'orange',
      className: '', extra CSS class
      icon: {
        className: 'material-icons',
        tagName: 'i',
        text: 'warning'
      }
    }
  ]
   
});

关闭所有通知。

notyf.dismissAll();


官方网站:https://github.com/caroso1222/notyf

相关热词: Notyf通知库

声源:本站内容均来自互联网,仅供交流学习之用,请勿作商业用途,所有资源版权归原作者所有。如果有侵犯到您的权益,请联系本站删除,谢谢合作!
jQuery库 JavsScript库 Html5库 CSS3库