toastify js
1.12.0
Toastify es una biblioteca liviana de notificaciones de tostadas de vainilla JS.
haga clic aquí
Múltiples notificaciones apiladas
Personalizable
No hay bloqueo de hilo de ejecución
Texto de notificación
Duración
Color de fondo tostado
Cerrar pantalla de icono
Posición de visualización
Posición de compensación
Ejecute el siguiente comando para agregar Toastify-JS a su proyecto existente o nuevo.
npm install --save toastify-js
o
yarn add toastify-js -S
Importe Toastify-JS en su módulo para comenzar a usarlo.
import Toastify from 'toastify-js'
Puede usar el CSS predeterminado de Toastify como a continuación y luego anularlo o elegir escribir su propio CSS.
import "toastify-js/src/toastify.css"
Para comenzar a usar Toastify , agregue los siguientes CSS a su página.
<link rel = "stylesheet" type = "text/css" href = "https://cdn.jsdelivr.net/npm/toastify-js/src/toastify.min.css">
Y el script en la parte inferior de la página
<script type = "text/javaScript" src = "https://cdn.jsdelivr.net/npm/toastify-js"> </script>
Los archivos se entregan a través del servicio CDN proporcionado por JSDeliver
Toastify ({
Texto: "Esto es una tostada",
Duración: 3000,
Destino: "https://github.com/apvarun/toastify-js",
NewWindow: Verdadero,
Cerrar: verdadero,
Gravity: "Top", // `Top` o` Bottom`
Posición: "Izquierda", // `Left`,` Center` o `Right`
stoponfocus: verdadero, // evita que descartar de tostadas en el flotador
Estilo: {fondo: "Gradiente lineal (a la derecha, #00B09B, #96C93D)",
},
onClick: function () {} // devolución de llamada después de hacer clic}). showToast ();Los mensajes Toast se centrarán en dispositivos con un ancho de pantalla inferior a 360px.
Ver el CangeLog
Si desea usar clases personalizadas en la tostada para personalizar (como información o advertencia, por ejemplo), puede hacerlo de la siguiente manera:
Toastify ({
Texto: "Esto es una tostada",
ClassName: "Info",
Estilo: {fondo: "Gradiente lineal (a la derecha, #00B09B, #96C93D)",
}}). showToast ();Múltiples clases también se pueden asignar como una cadena, con espacios entre los nombres de clase.
Si desea agregar desplazamiento a la tostada, puede hacerlo de la siguiente manera:
Toastify ({
Texto: "Esto es un tostado con desplazamiento",
offset: {x: 50, // eje horizontal: puede ser un número o una cadena que indica unidad. por ejemplo: '2em'y: 10 // eje vertical - puede ser un número o una cadena que indica unidad. por ejemplo: '2em'
},}). showToast ();Toast se empujará 50px desde la derecha en el eje x y 10px desde la parte superior en el eje Y.
Nota:
Si position es igual a left , se empujará desde la izquierda. Si gravity es igual a bottom , se empujará desde la parte inferior.
| Clave de opción | tipo | Uso | Valores predeterminados |
|---|---|---|---|
| texto | cadena | Mensaje que se mostrará en la tostada | "¡Hola!" |
| nodo | Elemento_node | Proporcione un nodo para montar dentro de la tostada. node tiene mayor precedencia sobre text | |
| duración | número | Duración para la cual se debe mostrar el tostado. -1 para tostadas permanentes | 3000 |
| selector | cadena | Elemento_node | Sombreado | Selector CSS o nodo de elemento en el que se debe agregar el tostado |
| destino | Cadena de url | URL a la que se debe navegar al navegador al hacer clic en la tostada | |
| Newwindow | booleano | Decide si el destination debe abrirse en una nueva ventana o no | FALSO |
| cerca | booleano | Para mostrar el icono de cierre o no | FALSO |
| gravedad | "Top" o "Bottom" | Para mostrar la tostada desde la parte superior o inferior | "arriba" |
| posición | "izquierda" o "derecha" | Para mostrar la tostada a la izquierda o a la derecha | "bien" |
| beckcolor | Valor de fondo CSS | Para estar en desorden, use la opción style.background en su lugar. Establece el color de fondo de la tostada | |
| avatar | Cadena de url | Imagen/icono que se mostrará antes del texto | |
| nombre de clase | cadena | Capacidad para proporcionar un nombre de clase personalizado para una mayor personalización | |
| stoponfocus | booleano | Para detener el temporizador cuando se rondaba sobre la tostada (solo si se establece la duración) | verdadero |
| llamar de vuelta | Función | Invocado cuando se descarta la tostada | |
| en el tope | Función | Invocado cuando se hace clic en la tostada | |
| compensar | Objeto | Capacidad para agregar algo de desplazamiento al eje | |
| escaparca | booleano | Alternar el comportamiento predeterminado de escapar del marcado HTML | verdadero |
| estilo | objeto | Use las propiedades de estilo HTML DOM para agregar cualquier estilo directamente a Toast | |
| arial | cadena | Anunciar el brindis a los lectores de la pantalla, ver https://developer.mozilla.org/en-us/docs/web/accessibility/aria/aria_live_regions para opciones | "educado" |
| el más antiguo | booleano | Establezca el orden en el que se apilan las tostadas en la página | verdadero |
Propiedades en desacuerdo:
backgroundColor- Use la opciónstyle.backgrounden su lugar
Es decir / borde | Firefox | Cromo | Safari | Ópera |
|---|---|---|---|---|
| IE10, IE11, borde | Últimas 10 versiones | Últimas 10 versiones | Últimas 10 versiones | Últimas 10 versiones |
Asentador | Caiomoura1994 | rndevfx | 1 de la vida | d4rn0k | danielkaiser80 |
skjnldsv | chasedanda | chrisgraham | Wachiwi | Feixuruina | gavinhungry |
Haydster7 | joaquinwojcik | juliushaertl | mort3za | Sandip124 | Tadaz |
t12ung | Victorfeijo | Fiatjaf | prousseau-norema |
MIT © Varun AP
