toastify-js

简介: toastify-js

无论掌握哪一种知识,对智力都是有用的,它会把无用的东西抛开而把好的东西保留住。——达·芬奇

分享一个前端消息提示组件库ToastifyJs

https://github.com/apvarun/toastify-js

引入:

npm install --save toastify-js

或者

<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/toastify-js/src/toastify.min.css">
<script src="https://cdn.jsdelivr.net/npm/toastify-js"></script>

使用:

Toastify({ text: "This is a toast", duration: 3000 }).showToast();

复杂例子:

Toastify({
  text: "This is a toast",
  duration: 3000,
  destination: "https://github.com/apvarun/toastify-js",
  newWindow: true,
  close: true,
  gravity: "top", // `top` or `bottom`
  position: "left", // `left`, `center` or `right`
  stopOnFocus: true, // Prevents dismissing of toast on hover
  style: {
    background: "linear-gradient(to right, #00b09b, #96c93d)",
  },
  onClick: function(){} // Callback after click
}).showToast();

完整api:

Option Key type Usage Defaults
text string Message to be displayed in the toast “Hi there!”
node ELEMENT_NODE Provide a node to be mounted inside the toast. node takes higher precedence over text
duration number Duration for which the toast should be displayed.
-1 for permanent toast
3000
selector string | ELEMENT_NODE ShadowRoot CSS Selector or Element Node on which the toast should be added
destination URL string URL to which the browser should be navigated on click of the toast
newWindow boolean Decides whether the destination should be opened in a new window or not false
close boolean To show the close icon or not false
gravity “top” or “bottom” To show the toast from top or bottom “top”
position “left” or “right” To show the toast on left or right “right”
backgroundColor CSS background value To be deprecated, use style.background option instead. Sets the background color of the toast
avatar URL string Image/icon to be shown before text
className string Ability to provide custom class name for further customization
stopOnFocus boolean To stop timer when hovered over the toast (Only if duration is set) true
callback Function Invoked when the toast is dismissed
onClick Function Invoked when the toast is clicked
offset Object Ability to add some offset to axis
escapeMarkup boolean Toggle the default behavior of escaping HTML markup true
style object Use the HTML DOM Style properties to add any style directly to toast
ariaLive string Announce the toast to screen readers, see ARIA live regions - Accessibility | MDN for options “polite”
oldestFirst boolean Set the order in which toasts are stacked in page true
相关文章
|
12月前
|
存储 Prometheus NoSQL
大数据-44 Redis 慢查询日志 监视器 慢查询测试学习
大数据-44 Redis 慢查询日志 监视器 慢查询测试学习
154 3
|
C# C++
C# 自定义时间进度条
本文作者通过参考leslie_xin的一篇文章,成功创建了一个自定义的WinForms控件——时间进度条,该控件带有时间刻度和多种可定制的属性,如颜色、时间间隔等。作者在控件中加入了开始和结束时间,以及自适应的时间刻度间隔。控件能根据设置显示时间标签,并提供了事件处理,如值改变时的触发。代码中包含了计算时间刻度、绘制刻度线和时间标签的逻辑。作者强调了避免循环调用事件、使用OnXXX()形式的事件处理函数以及注意自定义控件中的属性和事件设计。
297 7
|
存储 缓存 应用服务中间件
|
12月前
|
存储 Oracle 关系型数据库
仿美团饿了么程序,外卖人9.0外卖订餐源码(PC+微信)
仿美团饿了么程序,外卖人9.0商业版外卖订餐源码,PC+微信+WAP+短信宝,多城市多色版 非常不错的独立版外卖跑腿网站源码,喜欢的可以下载调试看看吧!!
270 0
|
11月前
|
SQL 关系型数据库 MySQL
MySQL性能探究:count(*)与count(1)的性能对决
在MySQL数据库的性能优化中,对查询语句的细微差别有着深入的理解是非常重要的。`count(*)`和`count(1)`是两种常用的聚合函数,用于计算行数。在面试中,面试官经常会问到这两种函数的性能差异。本文将探讨`count(*)`与`count(1)`的性能对比,并整理十道经典的MySQL面试题,帮助你在面试中游刃有余。
295 3
|
存储 开发工具 git
Git 远程仓库地址管理:添加、修改和验证
Git 远程仓库地址管理:添加、修改和验证
820 4
|
JavaScript
Vue3基础(20)___Vue3配置错误路由重定向写法
本文介绍了Vue 3中配置错误路由重定向的正确写法,包括使用参数和自定义正则表达式来定义通配符路由。
207 0
Vue3基础(20)___Vue3配置错误路由重定向写法
|
12月前
|
存储 JSON 关系型数据库
PostgreSQL介绍
【10月更文挑战第11天】
|
开发工具 图形学 Android开发
Unity与安卓丨unity报错:SDK Tools version 0.0 < 26.1.1
Unity与安卓丨unity报错:SDK Tools version 0.0 < 26.1.1