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

可定制的JavaScript通知弹出库 - Awesome Notifications
栏目分类:通知 / 提示   发布日期:2021-09-30   浏览次数:

Awesome Notifications 是一个独立的 JavaScript 库,用于在网页上创建动画、可自定义的通知弹出窗口。

特征:

  • 模态样式通知。

  • Toast 样式通知。

  • 支持 HTML 内容。

  • 确认和警报对话框。

  • 一定超时后自动关闭。

  • 倒计时进度条。

  • 基于字体真棒的图标。

  • 信息/成功/警告/警报主题。

  • 异步支持。

使用:

安装和导入:

# NPM 
$ npm install awesome-notifications --save
// ES 6
import AWN from 'awesome-notifications';
 
// CommonJS:
const AWN = require('awesome-notifications');

对于浏览器,在页面的头部部分包含 Font Awesome 和 Awesome Notifications 的样式表。

<link rel="stylesheet" href="https://netdna.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<link href="dist/style.css" rel="stylesheet">

需要时在页面中包含 Awesome Notifications 的 JavaScript。

<script src="dist/index.var.js"></script>

使用默认选项初始化 Awesome Notifications 库。要配置库,请将选项(见下文)作为对象传递给AWN()函数。

var notifier = new AWN();

使用以下 JavaScript 语法创建您自己的通知弹出窗口。

// 基本的
notifier.tip('Message here'); 
 
// info message 
notifier.info('Message here'); 
 
// 成功消息
notifier.success('Message here'); 
 
// 警告消息
notifier.warning('Message here'); 
 
// 警报消息
notifier.alert('Message here'); 
 
// 确认对话框
notifier.confirm('Are you sure?', okFunc, cancelFunc); 
 
// 带有自定义 css 类的模态窗口
notifier.modal('<h2>Your custom title</h2><p>Your custom text</p>', 'custom-class-name') 
 
// 异步 toast 
notifier.async (promise, onResolve, onReject, html) 
 
// 显示加载器并阻止屏幕
notifier.asyncBlock(promise, onResolve, onReject, html)

自定义通知弹出窗口的默认选项。

maxNotifications: 10,
animationDuration: 300,
position: "bottom-right",
labels: {
  tip: "Tip",
  info: "Info",
  success: "Success",
  warning: "Attention",
  alert: "Error",
  async: "Loading",
  confirm: "Confirmation required",
  confirmOk: "OK",
  confirmCancel: "Cancel"
},
icons: {
  tip: "question-circle",
  info: "info-circle",
  success: "check-circle",
  warning: "exclamation-circle",
  alert: "exclamation-triangle",
  async: "cog fa-spin",
  confirm: "exclamation-triangle",
  prefix: "<i class='fa fas fa-fw fa-",
  suffix: "'></i>",
  enabled: true
},
replacements: {
  tip: null,
  info: null,
  success: null,
  warning: null,
  alert: null,
  async: null,
  "async-block": null,
  modal: null,
  confirm: null,
  general: {
    "<script>": "",
    "</script>": ""
  }
},
messages: {
  tip: "",
  info: "",
  success: "Action has been succeeded",
  warning: "",
  alert: "Action has been failed",
  confirm: "This action can't be undone. Continue?",
  async: "Please, wait...",
  "async-block": "Loading"
},
formatError(err) {
  if (err.response) {
    if (!err.response.data) return '500 API Server Error'
    if (err.response.data.errors) {
      return err.response.data.errors.map(o => o.detail).join('<br>')
    }
    if (err.response.statusText) {
      return `${err.response.status} ${err.response.statusText}: ${err.response.data}`
    }
  }
  if (err.message) return err.message
  return err
},
durations: {
  global: 5000,
  success: null,
  info: null,
  tip: null,
  warning: null,
  alert: null
},
minDurations: {
  async: 1000,
  "async-block": 1000
},

官方网站:https://github.com/f3oall/awesome-notifications

相关热词: 通知弹出

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