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