toastify js
1.12.0
烤面包是一个轻巧的香草JS吐司通知库。
点击这里
多个堆叠通知
可自定义
没有阻止执行线程
通知文本
期间
烤面包背景颜色
关闭图标显示
显示位置
偏移位置
运行以下命令将toastify-j添加到您现有或新项目中。
npm install --save toastify-js
或者
yarn add toastify-js -S
将to tostify-j的导入到您的模块中以开始使用它。
import Toastify from 'toastify-js'
您可以在下面的tostify中使用默认的CSS,然后覆盖它,或者选择编写自己的CSS。
import "toastify-js/src/toastify.css"
要开始使用Toastify ,请将以下CSS添加到您的页面上。
<link rel =“ stylesheet” type =“ text/css” href =“ https://cdn.jsdelivr.net/npm/toastify-js/src/src/toastify.min.css”>
和页面底部的脚本
<script type =“ text/javascript” src =“ https://cdn.jsdelivr.net/npm/toastify-js”> </script>
文件是通过JSdeliver提供的CDN服务传递的
烤({ 文字:“这是吐司”, 持续时间:3000, 目的地:“ https://github.com/apvarun/toastify-js”, Newwindow:是的, 关闭:是的, 重力:“顶部”,//`top'或'底部' 位置:“左”,//`左','中心'或``右'' oponfocus:是的,//防止悬停在悬停的吐司 样式:{背景:“线性毕业生(右,#00b09b,#96c93d)”, },, onclick:function(){} // callback off lick})。showtoast();
吐司消息将集中在屏幕宽度小于360px的设备上。
请参阅Changelog
如果要在吐司上使用自定义类进行自定义(例如信息或警告),则可以如下执行以下操作:
烤({ 文字:“这是吐司”, className:“ info”, 样式:{背景:“线性毕业生(右,#00b09b,#96c93d)”, }})。showtoast();
多个类也可以分配为字符串,在类名称之间具有空格。
如果要增加烤面包的偏移,则可以按以下方式执行此操作:
烤({ 文字:“这是带有偏移的吐司”, 偏移:{x:50,//水平轴 - 可以是指示统一的数字或字符串。例如:'2em'y:10 //垂直轴 - 可以是指示统一的数字或字符串。例如:'2em' },})。showtoast();
吐司将在X轴上从右侧向右推出50px,并从Y轴上从顶部推出10px。
笔记:
如果position
等于left
,则将从左推动。如果gravity
等于bottom
,则将从底部推动。
选项密钥 | 类型 | 用法 | 默认值 |
---|---|---|---|
文本 | 细绳 | 消息要在烤面包中显示 | “你好呀!” |
节点 | element_node | 提供一个可以安装在烤面包内的节点。 node 优先于text | |
期间 | 数字 | 应显示烤面包的持续时间。 -1用于永久吐司 | 3000 |
选择器 | 字符串| element_node | 影子根 | CSS选择器或元素节点应添加烤面包 |
目的地 | URL字符串 | 单击烤面包时应将浏览器导航到的URL | |
Newwindow | 布尔 | 决定是否应在新窗口中打开destination | 错误的 |
关闭 | 布尔 | 是否显示关闭图标 | 错误的 |
重力 | “顶部”或“底部” | 从顶部或底部显示吐司 | “顶部” |
位置 | “左”或“右” | 在左右显示吐司 | “正确的” |
背景色 | CSS背景值 | 要弃用,请改用style.background 选项。设置烤面包的背景颜色 | |
头像 | URL字符串 | 图像/图标要在文本之前显示 | |
className | 细绳 | 能够提供自定义类名称以进行进一步自定义 | |
oponfocus | 布尔 | 悬停在烤面包上时停止计时器(仅在设置持续时间时) | 真的 |
打回来 | 功能 | 吐司被解雇时被调用 | |
onclick | 功能 | 单击烤面包时调用 | |
抵消 | 目的 | 能够增加轴的偏移 | |
Escapemarkup | 布尔 | 切换逃脱HTML标记的默认行为 | 真的 |
风格 | 目的 | 使用HTML DOM样式属性将任何样式直接添加到Toast | |
杂种 | 细绳 | 向屏幕读者宣布敬酒,请访问https://developer.mozilla.org/en-us/docs/web/accessibility/aria/aria/aria/aria_live_rive_rigions for Option | “有礼貌的” |
最老的 | 布尔 | 设置烤面包堆放在页面中的顺序 | 真的 |
弃用的属性:
backgroundColor
- 使用style.background
选项
即 /边缘 | Firefox | 铬合金 | 野生动物园 | 歌剧 |
---|---|---|---|---|
IE10,IE11,边缘 | 最后10个版本 | 最后10个版本 | 最后10个版本 | 最后10个版本 |
震惊 | Caiomoura1994 | rndevfx | 1ess | D4RN0K | Danielkaiser80 |
SKJNLDSV | Chasedeanda | 克里斯格拉汉 | wachiwi | feixuruins | 加文胡格里 |
Haydster7 | Joaquinwojcik | Juliushaertl | mort3za | Sandip124 | tadaz |
t12ung | Victorfeijo | 菲亚特贾夫 | 普鲁索 - 科勒姆 |
麻省理工学院©Varun AP