toastify js Download - toastify js Téléchargement du code source

toastify js

Autre code source

1.12.0

Télécharger

Griller

Toastify est une bibliothèque de notification de toast vanille légère et vanille.

Démo

Cliquez ici

Caractéristiques

Notifications empilées multiples
Personnalisable
Pas de blocage du fil d'exécution

Options de personnalisation

Texte de notification
Durée
Couleur d'arrière-pain
Fermer l'affichage de l'icône
Position d'affichage
Position compensée

Installation

Toastify prend désormais en charge l'installation via NPM

Exécutez la commande ci-dessous pour ajouter Toastify-Js à votre projet existant ou nouveau.

npm install --save toastify-js

ou

yarn add toastify-js -S

Importez Toastify-js dans votre module pour commencer à l'utiliser.

import Toastify from 'toastify-js'

Vous pouvez utiliser le CSS par défaut à partir de toastify comme ci-dessous et de le remplacer ultérieurement ou de choisir d'écrire votre propre CSS.

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

Ajout de toastifyjs à la page HTML en utilisant la méthode traditionnelle

Pour commencer à utiliser Toastify , ajoutez le CSS suivant à votre page.

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

Et le script en bas de la page

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

Les fichiers sont livrés via le service CDN fourni par JSDeliver

Documentation

 Toastify ({
  Texte: "Ceci est un toast",
  Durée: 3000,
  destination: "https://github.com/apvarun/toastify-js",
  Newwindow: vrai,
  Close: vrai,
  Gravity: "haut", // `top` ou` en bas '
  Position: "gauche", // `gauche`,` `Centre` ou 'droite'
  stoponfocus: true, // empêche le rejet du toast sur le plan de survol
  Style: {Background: "Linear-Gradient (à droite, # 00B09B, # 96C93D)",
  },
  onClick: function () {} // callback après clic}). showtoast ();

Les messages de toast seront centrés sur les appareils avec une largeur d'écran inférieure à 360px.

Voir le Changelog

Ajouter ses propres classes personnalisées

Si vous souhaitez utiliser des classes personnalisées sur le toast pour la personnalisation (comme des informations ou des avertissements par exemple), vous pouvez le faire comme suit:

 Toastify ({
  Texte: "Ceci est un toast",
  ClassName: "Info",
  Style: {Background: "Linear-Gradient (à droite, # 00B09B, # 96C93D)",
  }}). showtoast ();

Plusieurs classes peuvent également être attribuées sous forme de chaîne, avec des espaces entre les noms de classe.

Ajouter un décalage

Si vous souhaitez ajouter du décalage au toast, vous pouvez le faire comme suit:

 Toastify ({
  Texte: "Ceci est un toast avec décalage",
  Offset: {x: 50, // axe horizontal - peut être un nombre ou une chaîne indiquant l'unité. EG: '2em'y: 10 // axe vertical - peut être un nombre ou une chaîne indiquant l'unité. Par exemple: «2em»
  },}). showtoast ();

Le pain grillé sera poussé à 50px à partir de droite dans l'axe x et 10px du haut dans l'axe Y.

Note:

Si position est égale à left , elle sera poussée à partir de gauche. Si gravity est égale au bottom , elle sera poussée par le bas.

API

Clé d'option	taper	Usage	Par défaut
texte	chaîne	Message à afficher dans le toast	"Salut!"
nœud	Element_node	Fournissez un nœud à monter à l'intérieur du toast. `node` prend une priorité plus élevée sur `text`
durée	nombre	Durée pour laquelle le toast doit être affiché. -1 pour le toast permanent	3000
sélecteur	String \| Element_node	Shadowroot	Sélecteur ou nœud d'élément CSS sur lequel le toast doit être ajouté
destination	Chaîne d'URL	URL à laquelle le navigateur doit être navigué en clic du toast
débutant	booléen	Décide si la `destination` doit être ouverte dans une nouvelle fenêtre ou non	FAUX
fermer	booléen	Pour montrer l'icône étroite ou non	FAUX
pesanteur	"haut" ou "en bas"	Pour montrer le toast en haut ou en bas	"haut"
position	"gauche" ou "droite"	Pour montrer le toast à gauche ou à droite	"droite"
fond de fond	Valeur d'arrière-plan CSS	Pour être obsolète, utilisez à la place `style.background` . Définit la couleur d'arrière-plan du toast
avatar	Chaîne d'URL	Image / icône à afficher avant le texte
nom de classe	chaîne	Capacité à fournir un nom de classe personnalisé pour une personnalisation plus approfondie
stoponfocus	booléen	Pour arrêter la minuterie lorsqu'il a survolé le toast (seulement si la durée est définie)	vrai
rappel	Fonction	Invoqué lorsque le toast est rejeté
onclick	Fonction	Invoqué lorsque le toast est cliqué
compenser	Objet	Capacité à ajouter un peu de décalage à l'axe
escapadarme	booléen	Basculer le comportement par défaut de l'échappement du balisage HTML	vrai
style	objet	Utilisez les propriétés de style HTML DOM pour ajouter n'importe quel style directement au toast
arial	chaîne	Annoncez le toast pour sélectionner les lecteurs, voir https://developer.mozilla.org/en-us/docs/web/accessibility/aria/aria_live_regions pour les options pour	"poli"
oldstfirst	booléen	Définissez l'ordre dans lequel les toasts sont empilés en page	vrai

Propriétés obsolètes: backgroundColor - Utilisez plutôt style.background

Support des navigateurs

C'est-à-dire / bord	Incendier	Chrome	Safari	Opéra
IE10, IE11, bord	10 dernières versions	10 dernières versions	10 dernières versions	10 dernières versions

Contributeurs

Astoker	Caiomoura1994	rndevfx	1ess	d4rn0k	Danielvaiser80
skjnldsv	Chaseanda	Chrisgraham	Wachiwi	Feixuruins	gavinhungry
Haydster7	Joaquinwojcik	Juliushaertl	Mort3za	Sandip124	Tadaz
T12UNG	victorfeijo	fiatjaf	prousseau-korem