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

简单的Vanilla JavaScript Toast通知库 - Toastify
栏目分类:通知 / 提示   发布日期:2021-09-01   浏览次数:

Toastify 是一个简单、轻量级的原生 JavaScript 库,用于向最终用户发送可堆叠、非阻塞的Toast 消息。

使用:

将主要的 JavaScript 文件“toastify.js”导入到 html 文档中。

<script src="src/toastify.js"></script>

创建一个基本的 toast 消息并以毫秒为单位指定隐藏通知的持续时间。

var myToast = Toastify({
 text: "这是一个toast消息",
 duration: 5000
})

您还可以从 DOM 节点加载消息。

var myToast = Toastify({
 node: elementNode,
 duration: 5000
})

显示吐司消息。在此示例中,吐司消息将在 5 秒后自动关闭。

myToast.showToast();

Toast 消息的默认 CSS。将如下所示的 CSS 样式复制并粘贴到您的网页中。

.toastify {
  padding: 12px 20px;
  color: #ffffff;
  display: inline-block;
  box-shadow: 0 3px 6px -1px rgba(0, 0, 0, 0.12), 0 10px 36px -4px rgba(77, 96, 232, 0.3);
  background: -webkit-linear-gradient(315deg, #73a5ff, #5477f5);
  background: linear-gradient(135deg, #73a5ff, #5477f5);
  position: fixed;
  top: -150px;
  right: 15px;
  opacity: 0;
  transition: all 0.4s cubic-bezier(0.215, 0.61, 0.355, 1);
  border-radius: 2px;
  cursor: pointer;
}
 
.toastify.on { opacity: 1; }

指定要在其中显示 toast 消息的容器。

myToast = Toastify({ 
  text: "这是一个toast消息", 
  duration: 5000, 
  selector: '#container'
})

单击 toast 消息时执行回调函数。

myToast = Toastify({ 
  text: "这是一个toast消息", 
  duration: 5000, 
  onClick: function(){} 
})

在 Toast 消息被解除后执行回调函数。

myToast = Toastify({ 
  text: "这是一个toast消息", 
  duration: 5000, 
  callback: function(){} 
})

更多配置选项。

myToast = Toastify({
  // On-click destination
  destination: null,
 
  // 在新窗口中打开目的地
  newWindow: false,
 
  // 显示 Toast 关闭图标
  close: false,
 
  // Toast 位置 - top 或 bottom
  gravity: 'bottom',
 
  // Toast 位置 - left 或 right
  positionLeft: false,
  position: 'left',
 
  // Avatar
  avatar: "",
 
  // toast 的附加类
  classeName: ""
 
  // 防止在悬停时取消
  stopOnFocus: true,
 
  // Toast offset
  offset: { x: 0, y: 0 },
 
  //  切换转义HTML标记的默认行为
  escapeMarkup: true,
 
  // 这里自定义 CSS 样式
  style: {},
 
  // 设置toast在页面中的堆叠顺序
  oldestFirst: true,
})


官方网站:https://github.com/apvarun/toastify-js

相关热词: Toastify通知Vanilla

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