toastify js

トースト

Toistifyは、軽量のバニラJSトースト通知ライブラリです。

デモ

ここをクリック

特徴

• 複数の積み重ねられた通知

• カスタマイズ可能

• 実行スレッドのブロッキングはありません

カスタマイズオプション

• 通知テキスト

• 間隔

• 背景色を乾杯します

• アイコンディスプレイを閉じます

• 表示位置

• オフセット位置

インストール

Toistifyは、NPM経由のインストールをサポートするようになりました

• 以下のコマンドを実行して、既存または新しいプロジェクトにToistify-JSを追加します。

npm install --save toastify-js

または

yarn add toastify-js -S

• Toastify-JSをモジュールにインポートして、使用を開始します。

import Toastify from 'toastify-js'

以下のようにToistifyのデフォルトのCSSを使用して、後でそれをオーバーライドするか、独自のCSSを作成することを選択できます。

import "toastify-js/src/toastify.css"

従来の方法を使用して、toastifyjsをHTMLページに追加します

Toistifyの使用を開始するには、次のCSSをページに追加します。

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

ページの下部にあるスクリプト

<script type = "text/javascript" src = "https://cdn.jsdelivr.net/npm/toasify-js"> </script>

ファイルはJSDeliverが提供するCDNサービスを介して配信されます

ドキュメント

トースト（{
  テキスト：「これはトーストです」、
  期間：3000、
  目的地： "https://github.com/apvarun/toastify-js"、
  NewWindow：本当、
  閉じる：本当、
  重力：「トップ」、//「トップ」または「ボトム」
  ポジション：「左」、// `left`、` center`または `right`
  StopOnfocus：true、//ホバーでのトーストの却下を防ぎます
  スタイル：{背景： "線形勾配（右、＃00B09B、＃96C93D）、
  }、
  onclick：function（）{} // click後にコールバック}）。showtoast（）;

トーストメッセージは、画面幅が360px未満のデバイスに集中します。

• Changelogを参照してください

独自のカスタムクラスを追加します

トーストでカスタムクラスを使用してカスタマイズしたい場合（たとえば、情報や警告など）、次のように行うことができます。

トースト（{
  テキスト：「これはトーストです」、
  クラス名：「情報」、
  スタイル：{背景： "線形勾配（右、＃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を新しいウィンドウで開くべきかどうかを決定します	間違い
近い	ブール	近いアイコンを表示するかどうか	間違い
重力	「トップ」または「ボトム」	上または下からトーストを表示します	"トップ"
位置	「左」または「右」	左または右にトーストを表示します	"右"
BackgroundColor	CSSの背景値	非推奨するには、代わりにstyle.backgroundオプションを使用してください。トーストの背景色を設定します
アバター	URL文字列	テキストの前に表示される画像/アイコン
className	弦	さらなるカスタマイズのためにカスタムクラス名を提供する機能
stoponfocus	ブール	トーストの上にホバリングしたときにタイマーを停止する（期間が設定されている場合のみ）	真実
折り返し電話	関数	トーストが却下されたときに呼び出されます
オンクリック	関数	トーストがクリックされたときに呼び出されます
オフセット	物体	軸にオフセットを追加する機能
ESCAPEMARKUP	ブール	HTMLマークアップの脱出のデフォルトの動作を切り替えます	真実
スタイル	物体	HTML DOMスタイルのプロパティを使用して、あらゆるスタイルをトーストに直接追加する
arialive	弦	トーストを画面読者に発表するには、https：//developer.mozilla.org/en-us/docs/web/accessibility/aria/aria_live_regionsを参照してください。	"礼儀正しい"
最も古いもの	ブール	トーストがページに積み重ねられている順序を設定します	真実

非推奨プロパティ： backgroundColor style.backgroundオプションを使用する代わりに使用します

ブラウザのサポート

IE / EDGE	Firefox	クロム	サファリ	オペラ
IE10、IE11、エッジ	最後の10バージョン	最後の10バージョン	最後の10バージョン	最後の10バージョン

貢献者

アストカー	Caiomoura1994	rndevfx	1ess	D4RN0K	Danielkaiser80
skjnldsv	Chasedeanda	クリスグラハム	ワチウィ	Feixuruins	Gavinhungry
Haydster7	Joaquinwojcik	Juliushaertl	Mort3Za	SANDIP124	タダズ
T12ung	ビクトルフェジョ	fiatjaf	プルソーコレム

ライセンス

MIT©Varun AP