Aviso (toast)
Notificaciones cortas creadas desde JavaScript dentro de una región que ya está en la página. Los mensajes se insertan como texto, nunca como HTML. Los avisos informativos se cierran solos; los de danger no lo hacen nunca y usan role="alert". Cuando hay más de max visibles, los demás esperan en una cola en lugar de descartarse.
Toasts are created from JavaScript: Toast.get(region).show({ message: "Saved" }). The region above stays empty until an item is shown, and a danger toast never dismisses itself.
<div class="iv-toast-region" role="region" data-iv-component="toast" aria-label="Notifications"></div>
<p class="iv-u-text-sm iv-u-text-muted">Toasts are created from JavaScript: <code>Toast.get(region).show({ message: "Saved" })</code>. The region above stays empty until an item is shown, and a <code>danger</code> toast never dismisses itself.</p>Todos los demás ejemplos de este sitio funcionan en una página propia. Esta región no: los botones de abajo tienen que llamar a show() sobre la región que está justo encima, y una región dentro de un marco no se podría alcanzar desde esta página. Lo que ves es la propia fixture, funcionando aquí.
Pruébalo: los botones de abajo llaman a show() sobre la región de arriba (los avisos aparecen en el borde inferior final de la ventana).
Disparador declarativo
Un botón servido puede mostrar un aviso sin una línea de JavaScript: dale data-iv-toast con el id de la región y el texto en data-iv-message. La región recoge el clic con un único listener delegado y llama a show() con lo que lleve el disparador: data-iv-title, data-iv-variant, data-iv-timeout y data-iv-dismissible. El mensaje se lee como texto, nunca como HTML; una variante desconocida cae en info y un tiempo que no es un número cae en el de la región. showFromTrigger(trigger) hace lo mismo desde tu código.
<div id="notices" class="iv-toast-region" role="region" data-iv-component="toast" aria-label="Notifications"></div>
<div class="iv-u-flex iv-u-gap-3 iv-u-flex-wrap">
<button class="iv-button iv-button--primary" type="button" data-iv-toast="notices" data-iv-message="Profile saved." data-iv-title="Demo" data-iv-variant="success" data-iv-timeout="4000">Save (demo)</button>
<button class="iv-button iv-button--secondary" type="button" data-iv-toast="notices" data-iv-message="Export queued; nothing leaves this page." data-iv-timeout="6000">Export (demo)</button>
<button class="iv-button iv-button--ghost" type="button" data-iv-toast="notices" data-iv-message="The upload failed. This demo does not upload anything." data-iv-title="Upload" data-iv-variant="danger">Fail (demo)</button>
</div>
<p class="iv-u-text-sm iv-u-text-muted iv-u-mt-4">These buttons are demos: they show a toast and do nothing else — no profile is saved, nothing is exported or uploaded. Each one carries <code>data-iv-toast="notices"</code> plus the text of the message, so no JavaScript is written by the author. A <code>danger</code> toast never dismisses itself. Without JavaScript the buttons do nothing at all.</p>// data-iv-component="toast"
{
toast: "notices",
message: "Profile saved.",
title: "Demo",
variant: "success",
timeout: 4000,
}Es azúcar sobre show(), no una segunda forma de trabajar: la misma cola, la misma pausa al pasar el ratón y al enfocar, la misma negativa a cerrar solo un mensaje danger. Sin JavaScript estos botones no hacen absolutamente nada, y por eso la fixture marca cada uno como demostración: un botón que promete guardar algo y no lo guarda es peor que no tener botón.
API
import { Toast } from "@intervolutions/ivolt/toast";
const region = Toast.get(document.querySelector(".iv-toast-region"));
const item = region.show({ message: "Guardado", variant: "success" });
item.dismiss();
region.clear();| Opción | Dónde | Por defecto |
|---|---|---|
placement | región, data-iv-placement | bottom-end |
max | región, data-iv-max | 3 |
variant | elemento | info (success warning danger) |
timeout | elemento, ms | 6000; 0 nunca; forzado a 0 para danger |
dismissible | elemento | true |
Teclado y tiempos
Pasar el ratón por encima de un aviso o enfocarlo pausa su temporizador. Escape sobre un aviso enfocado lo descarta. Cada elemento emite iv:open/opened/close/closed con reason timeout, trigger, escape o api.
Sin JavaScript
No aplica: los avisos solo existen cuando un script los crea. Muestra también en línea, como alerta, los resultados importantes.
Índice de clases
Partes y modificadores de esta familia que los ejemplos de arriba no muestran. La lista completa por hoja está en la referencia.
| Clase | Qué hace |
|---|---|
iv-toast--info | Tono informativo (el de por defecto). |
iv-toast--warning | Tono de aviso. |
iv-toast--danger | Tono de peligro; nunca se cierra solo. |
iv-toast__title | Línea de título opcional del aviso. |
iv-toast__message | Cuerpo del aviso, siempre texto plano. |
iv-toast__body | Envoltorio del título y del mensaje. |
iv-toast__dismiss | Botón de cierre del aviso. |
iv-toast-region--top-start | Región anclada a la esquina superior de inicio. |
iv-toast-region--top-end | Esquina superior final. |
iv-toast-region--bottom-start | Esquina inferior de inicio. |
iv-toast-region--bottom-end | Esquina inferior final (la de por defecto). |