Bootstrap5 Mensajes Emergentes (Toasts)
Bootstrap5 Toasts es un componente de notificación ligero que se utiliza para mostrar información, notificaciones o advertencias temporales en las esquinas o en la parte inferior de la página.
Los toasts generalmente se usan para mostrar mensajes de corta duración al usuario, como mensajes de éxito, mensajes de error, advertencias u otras notificaciones.
Los toasts pueden mostrarse en diferentes posiciones de la página, incluyendo la esquina superior izquierda, la esquina superior derecha, la esquina inferior izquierda, la esquina inferior derecha y el centro inferior de la página.
Cómo crear toasts
Para crear un toast se puede usar la.toastclase, y dentro de esa clase agregar las clases .toast-header y .toast-body para representar el título y el contenido.
Nota:El toast está cerrado por defecto; se puede usar.show para configurar su visualización; para cerrar el toast, se puede agregar en el elemento <button>data-bs-dismiss="toast":
Ejemplo
<div class="toast show">
<div class="toast-header">Título del toast<button type="button" class="btn-close" data-bs-dismiss="toast"></button>
</div>
<div class="toast-body">Este es un ejemplo de un toast de Bootstrap 5.</div>
</div>
Para mostrar el toast al hacer clic en un botón, necesitas inicializarlo con JavaScript: obtén el evento de clic del elemento especificado mediante su ID y llama altoast()método.
Al hacer clic en el botón, el siguiente código mostrará todos lostoastde la clase:
Ejemplo
document.getElementById("toastbtn").onclick = function() {
var toastElList = [].slice.call(document.querySelectorAll('.toast'))
var toastList = toastElList.map(function(toastEl) {
return new bootstrap.Toast(toastEl)
})
toastList.forEach(toast => toast.show())
}
Mostrar el toast en la esquina inferior derecha:
Ejemplo
<div class="container mt-5">
<button class="btn btn-primary" onclick="showToast()">Mostrar toast</button>
</div>
<div class="position-fixed bottom-0 end-0 p-3">
<div id="toast" class="toast" role="alert" aria-live="assertive" aria-atomic="true">
<div class="toast-header">
<strong class="me-auto">Bootstrap Toast</strong>
<button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
</div>
<div class="toast-body">Este es un ejemplo de un toast de Bootstrap 5.</div>
</div>
</div>
Configurar múltiples toasts:
Ejemplo
<div aria-live="polite" aria-atomic="true" class="position-relative">
<div class="toast-container top-0 end-0 p-3">
<div class="toast fade show" role="alert" aria-live="assertive" aria-atomic="true">
<div class="toast-header">
<svg class="bd-placeholder-img rounded me-2" width="20" height="20" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" preserveAspectRatio="xMidYMid slice" focusable="false"><rect width="100%" height="100%" fill="#007aff"></rect></svg>
<strong class="me-auto">Ejemplo de toast</strong>
<small class="text-muted">Justo ahora</small>
<button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
</div>
<div class="toast-body">Este es el segundo mensaje</div>
</div>
<div class="toast fade show" role="alert" aria-live="assertive" aria-atomic="true">
<div class="toast-header">
<svg class="bd-placeholder-img rounded me-2" width="20" height="20" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" preserveAspectRatio="xMidYMid slice" focusable="false"><rect width="100%" height="100%" fill="#007aff"></rect></svg>
<strong class="me-auto">Ejemplo de toast</strong>
<small class="text-muted">Hace 2 segundos</small>
<button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
</div>
<div class="toast-body">Este es el primer mensaje</div>
</div>
</div>
</div>
Otras extensiones