toastify js Download - toastify js Quellcode Download

toastify js

Anderer Quellcode

1.12.0

Herunterladen

Toastify

Toastify ist eine leichte Vanille -JS -Toast -Benachrichtigungsbibliothek.

Demo

klicken Sie hier

Merkmale

Mehrere gestapelte Benachrichtigungen
Anpassbar
Keine Blockierung des Ausführungs -Threads

Anpassungsoptionen

Benachrichtigungstext
Dauer
Toast -Hintergrundfarbe
Symbol Display schließen
Anzeigeposition
Offset -Position

Installation

Toastify unterstützt jetzt die Installation über NPM

Fügen Sie den folgenden Befehl aus, um Ihr vorhandenes oder neues Projekt Toastify-Js hinzuzufügen.

npm install --save toastify-js

oder

yarn add toastify-js -S

Importieren Sie Toastify-Js in Ihr Modul, um es zu verwenden.

import Toastify from 'toastify-js'

Sie können das Standard -CSS von Toastify wie unten verwenden und später überschreiben oder Ihr eigenes CSS schreiben.

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

Hinzufügen von ToastifyJs auf die HTML -Seite mit der herkömmlichen Methode

Fügen Sie die folgende CSS auf Ihre Seite hinzu .

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

Und das Skript am Ende der Seite

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

Dateien werden über den von JSDeliver bereitgestellten CDN -Dienst bereitgestellt

Dokumentation

 Toastify ({{
  Text: "Das ist ein Toast",
  Dauer: 3000,
  Ziel: "https://github.com/apvarun/toastify-js",
  NewWindow: Richtig,
  Schließen: wahr,
  Schwerkraft: "Top", // `top` oder` boden`
  Position: "links", // `links`,` center` oder `rechts`
  STOPONFOCUS: TRUE, // verhindert die Abweisung des Toasts auf Schwebeplätze
  Stil: {Hintergrund: "Linear-Gradient (nach rechts, #00b09b, #96c93d)",
  },
  Onclick: function () {} // Rückruf nach Click}). showToast ();

Toastmeldungen werden auf Geräten mit einer Bildschirmbreite von weniger als 360px zentriert.

Siehe den Changelog

Fügen Sie eigene benutzerdefinierte Klassen hinzu

Wenn Sie für den Toast benutzerdefinierte Klassen zum Anpassen verwenden möchten (z. B. beispielsweise Informationen oder Warnung), können Sie dies wie folgt tun:

 Toastify ({{
  Text: "Das ist ein Toast",
  Klassenname: "Info",
  Stil: {Hintergrund: "Linear-Gradient (nach rechts, #00b09b, #96c93d)",
  }}). showToast ();

Mehrere Klassen können auch als Zeichenfolge mit Leerzeichen zwischen Klassennamen zugewiesen werden.

Fügen Sie etwas Offset hinzu

Wenn Sie dem Toast einen Versatz hinzufügen möchten, können Sie dies wie folgt tun:

 Toastify ({{
  Text: "Dies ist ein Toast mit Offset",
  Offset: {x: 50, // Horizontale Achse - kann eine Zahl oder eine Zeichenfolge sein, die die Einheit angibt. zB: '2em'y: 10 // vertikale Achse - kann eine Zahl oder eine Zeichenfolge sein, die die Einheit angibt. zB: '2em'
  },}). showToast ();

Der Toast wird 50px von rechts in x -Achse und 10px von der Oberachse von oben gedrückt.

Notiz:

Wenn position nach left entspricht, wird sie von links gedrückt. Wenn gravity dem bottom entspricht, wird sie vom Boden gedrückt.

API

Optionschlüssel	Typ	Verwendung	Standardeinstellungen
Text	Saite	Nachricht, die im Toast angezeigt werden soll	"Hallo!"
Knoten	Element_node	Geben Sie einen Knoten an, der im Toast montiert werden soll. `node` hat eine höhere Vorrang vor `text`
Dauer	Nummer	Dauer, für die der Toast angezeigt werden sollte. -1 für permanentes Toast	3000
Wähler	String \| Element_node	Shadowroot	CSS -Selektor oder Elementknoten, auf dem der Toast hinzugefügt werden soll
Ziel	URL -Zeichenfolge	URL, zu der der Browser auf dem Klick auf den Toast navigiert werden sollte
NewWindow	boolean	Entscheidet, ob das `destination` in einem neuen Fenster geöffnet werden soll oder nicht	FALSCH
schließen	boolean	Das enge Symbol zeigen oder nicht	FALSCH
Schwerkraft	"oben" oder "unten"	Um den Toast von oben oder unten zu zeigen	"Spitze"
Position	"links" oder "rechts"	Um den Toast links oder rechts zu zeigen	"Rechts"
Hintergrundkolor	CSS -Hintergrundwert	Um veraltet zu sein, verwenden Sie stattdessen `style.background` -Option. Legt die Hintergrundfarbe des Toasts fest
Avatar	URL -Zeichenfolge	Bild/Symbol, das vor dem Text angezeigt werden soll
Klassenname	Saite	Fähigkeit, benutzerdefinierten Klassennamen für eine weitere Anpassung anzugeben
Stoponfocus	boolean	Timer zu stoppen, wenn er über den Toast schwebt (nur wenn die Dauer festgelegt ist)	WAHR
Rückruf	Funktion	Aufgerufen, wenn der Toast entlassen wird
ONCLICK	Funktion	Aufgerufen, wenn der Toast angeklickt wird
Offset	Objekt	Fähigkeit, Achse einen Offset hinzuzufügen
Escapemarkup	boolean	Schalten Sie das Standardverhalten der Flucht des HTML -Markups um	WAHR
Stil	Objekt	Verwenden Sie die Eigenschaften des HTML -Dom -Stils, um einen beliebigen Stil direkt zum Toast hinzuzufügen
arialiv	Saite	Kündigen Sie den Toast auf Screen-Leser an, siehe https://developer.mozilla.org/en-us/docs/web/accessibility/aria/aria_live_regions für Optionen	"höflich"
älteste	boolean	Stellen Sie die Reihenfolge fest, in der Toast auf Seite gestapelt ist	WAHR

Veraltete Eigenschaften: backgroundColor - Verwenden Sie style.background -Option stattdessen

Browser unterstützen

Dh / rande	Firefox	Chrom	Safari	Oper
IE10, IE11, Edge	Letzte 10 Versionen	Letzte 10 Versionen	Letzte 10 Versionen	Letzte 10 Versionen

Mitwirkende

Astoker	Caiomoura1994	rndevfx	1ES	D4RN0K	Danielkaiser80
SkJnldsv	chasedeanda	Chrisgraham	Wachiwi	Feixuruins	Gavinhungry
Haydster7	Joaquinwojcik	Juliushaertl	Mort3za	Sandip124	Tadaz
t12ung	Victorfeijo	Fiatjaf	Prousseau-Korem