toastify js

烤

烤面包是一个轻巧的香草JS吐司通知库。

演示

点击这里

特征

• 多个堆叠通知

• 可自定义

• 没有阻止执行线程

自定义选项

• 通知文本

• 期间

• 烤面包背景颜色

• 关闭图标显示

• 显示位置

• 偏移位置

安装

烤面包现在支持通过NPM安装

• 运行以下命令将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"

使用传统方法将toastifyjs添加到HTML页面

要开始使用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 ，则将从底部推动。

API

选项密钥	类型	用法	默认值
文本	细绳	消息要在烤面包中显示	“你好呀！”
节点	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