Toasts
Envía notificaciones a tus visitantes con un toast, un mensaje de alerta ligero y fácilmente personalizable.
😎 Esta traducción es parte del proyecto esdocu.com.
¿Qué es toast?
Los toasts son notificaciones livianas diseñadas para imitar las notificaciones automáticas que se han popularizado en los sistemas operativos móviles y de escritorio. Están construidos con flexbox, por lo que son fáciles de alinear y colocar.
Descripción general
Cosas que debes saber al usar el complemento de toast:
- Los toasts son opcionales por motivos de rendimiento, por lo que debes inicializarlos tú mismo.
- Los toasts se ocultarán automáticamente si no especificas
autohide: false.
prefers-reduced-motion.
Consulta la sección de movimiento reducido
de nuestra documentación de accesibilidad.
Ejemplos
Básico
Para fomentar los toasts extensibles y predecibles, recomendamos un encabezado y un cuerpo. Los encabezados
de toasts usan display: flex, lo que permite una fácil alineación del contenido gracias a
nuestras utilidades margin y flexbox.
Los toasts son tan flexibles como necesites y requieren muy poco marcado. Como mínimo, requerimos que un solo elemento contenga tu contenido “toasted” y recomendamos enfáticamente un botón para descartar (cerrar).
<div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
<div class="toast-header">
<img src="..." class="rounded me-2" alt="...">
<strong class="me-auto">Bootstrap</strong>
<small>Hace 11 minutos</small>
<button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
</div>
<div class="toast-body">
¡Hola Mundo! Este es un mensaje de toast.
</div>
</div>.hide para ocultar completamente
un toast (con display:none, en lugar de solo con opacity:0). Esto ya no es
necesario. Sin embargo, para compatibilidad con versiones anteriores, nuestro script continuará alternando la
clase (aunque no haya una necesidad práctica de hacerlo) hasta la próxima versión major.
Ejemplo en vivo
Haz clic en el botón a continuación para mostrar un toast (ubicado con nuestras utilidades en la esquina inferior derecha) que se ha ocultado de forma predeterminada.
<button type="button" class="btn btn-primary" id="liveToastBtn">Mostrar el toast en vivo</button>
<div class="position-fixed bottom-0 end-0 p-3" style="z-index: 11">
<div id="liveToast" class="toast" role="alert" aria-live="assertive" aria-atomic="true">
<div class="toast-header">
<img src="..." class="rounded me-2" alt="...">
<strong class="me-auto">Bootstrap</strong>
<small>Hace 11 minutos</small>
<button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
</div>
<div class="toast-body">
¡Hola Mundo! Este es un mensaje de toast.
</div>
</div>
</div>
Usamos el siguiente JavaScript para activar nuestra demostración de toast en vivo:
var toastTrigger = document.getElementById('liveToastBtn')
var toastLiveExample = document.getElementById('liveToast')
if (toastTrigger) {
toastTrigger.addEventListener('click', function () {
var toast = new bootstrap.Toast(toastLiveExample)
toast.show()
})
}
Translúcido
Los toasts son ligeramente translúcidos para mezclarse con lo que hay debajo de ellos.
<div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
<div class="toast-header">
<img src="..." class="rounded me-2" alt="...">
<strong class="me-auto">Bootstrap</strong>
<small class="text-muted">Hace 11 minutos</small>
<button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
</div>
<div class="toast-body">
¡Hola Mundo! Este es un mensaje de toast.
</div>
</div>Apilamiento
Puedes apilar toasts envolviéndolas en un recipiente para toasts, lo que agregará algo de espacio verticalmente.
<div class="toast-container">
<div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
<div class="toast-header">
<img src="..." class="rounded me-2" alt="...">
<strong class="me-auto">Bootstrap</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">
¿Ves? Justo como esto
</div>
</div>
<div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
<div class="toast-header">
<img src="..." class="rounded me-2" alt="...">
<strong class="me-auto">Bootstrap</strong>
<small class="text-muted">2 seconds ago</small>
<button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
</div>
<div class="toast-body">
Atención, los toasts se apilarán automáticamente
</div>
</div>
</div>Contenido personalizado
Personaliza tus toasts eliminando subcomponentes, ajustándolos con utilidades, o agregando tu propio marcado. Aquí hemos creado un toast
más simple eliminando el .toast-header predeterminado, agregando un ícono de ocultación
personalizado de Iconos de Bootstrap, y usando algunas utilidades de flexbox para ajustar el diseño.
<div class="toast align-items-center" role="alert" aria-live="assertive" aria-atomic="true">
<div class="d-flex">
<div class="toast-body">
¡Hola Mundo! Este es un mensaje de toast.
</div>
<button type="button" class="btn-close me-2 m-auto" data-bs-dismiss="toast" aria-label="Close"></button>
</div>
</div>Alternativamente, también puedes agregar controles y componentes adicionales a los toasts.
<div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
<div class="toast-body">
¡Hola Mundo! Este es un mensaje de toast.
<div class="mt-2 pt-2 border-top">
<button type="button" class="btn btn-primary btn-sm">Tomar acción</button>
<button type="button" class="btn btn-secondary btn-sm" data-bs-dismiss="toast">Cerrar</button>
</div>
</div>
</div>Esquemas de color
Sobre la base del ejemplo anterior, puedes crear diferentes esquemas de colores con nuestras utilidades de color y background.
Aquí hemos agregado .bg-primary y .text-white a .toast, y luego
agregamos .btn-close-white a nuestro botón de cierre. Para un borde nítido, eliminamos el borde
predeterminado con .border-0.
<div class="toast align-items-center text-white bg-primary border-0" role="alert" aria-live="assertive" aria-atomic="true">
<div class="d-flex">
<div class="toast-body">
¡Hola Mundo! Este es un mensaje de toast.
</div>
<button type="button" class="btn-close btn-close-white me-2 m-auto" data-bs-dismiss="toast" aria-label="Close"></button>
</div>
</div>Colocación
Coloca toast con CSS personalizado a medida que los necesites. La parte superior derecha se usa a menudo para
notificaciones, al igual que la parte superior central. Si solo vas a mostrar un toast a la vez, coloca los
estilos de posicionamiento justo en .toast.
<form>
<div class="mb-3">
<label for="selectToastPlacement">Colocación del toast</label>
<select class="form-select mt-2" id="selectToastPlacement">
<option value="" selected>Selecciona una posición...</option>
<option value="top-0 start-0">Superior izquierda</option>
<option value="top-0 start-50 translate-middle-x">Superior central</option>
<option value="top-0 end-0">Superior derecha</option>
<option value="top-50 start-0 translate-middle-y">Medio izquierda</option>
<option value="top-50 start-50 translate-middle">Medio central</option>
<option value="top-50 end-0 translate-middle-y">Medio derecha</option>
<option value="bottom-0 start-0">Inferior izquierda</option>
<option value="bottom-0 start-50 translate-middle-x">Inferior central</option>
<option value="bottom-0 end-0">Inferior derecha</option>
</select>
</div>
</form>
<div aria-live="polite" aria-atomic="true" class="bg-dark position-relative bd-example-toasts">
<div class="toast-container position-absolute p-3" id="toastPlacement">
<div class="toast">
<div class="toast-header">
<img src="..." class="rounded me-2" alt="...">
<strong class="me-auto">Bootstrap</strong>
<small>Hace 11 minutos</small>
</div>
<div class="toast-body">
¡Hola Mundo! Este es un mensaje de toast.
</div>
</div>
</div>
</div>Para los sistemas que generan más notificaciones, considera usar un elemento envolvente para que puedan apilarse fácilmente.
<div aria-live="polite" aria-atomic="true" class="position-relative">
<!-- Posicionarlo: -->
<!-- - `.toast-container` para espaciado entre toasts -->
<!-- - `.position-absolute`, `top-0` & `end-0` para posicionar el toasts en la esquina superior izquierda -->
<!-- - `.p-3` para evitar que los toasts se peguen al borde del container -->
<div class="toast-container position-absolute top-0 end-0 p-3">
<!-- Then put toasts within -->
<div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
<div class="toast-header">
<img src="..." class="rounded me-2" alt="...">
<strong class="me-auto">Bootstrap</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">
¿Ves? Justo como esto
</div>
</div>
<div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
<div class="toast-header">
<img src="..." class="rounded me-2" alt="...">
<strong class="me-auto">Bootstrap</strong>
<small class="text-muted">2 seconds ago</small>
<button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
</div>
<div class="toast-body">
Atención, los toasts se apilarán automáticamente
</div>
</div>
</div>
</div>También pueden utilizarse las utilidades de flexbox para alinear los toasts horizontal y/o verticalmente.
<!-- Flexbox container para el alineamiento de toasts -->
<div aria-live="polite" aria-atomic="true" class="d-flex justify-content-center align-items-center w-100">
<!-- Then put toasts within -->
<div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
<div class="toast-header">
<img src="..." class="rounded me-2" alt="...">
<strong class="me-auto">Bootstrap</strong>
<small>Hace 11 minutos</small>
<button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
</div>
<div class="toast-body">
¡Hola Mundo! Este es un mensaje de toast.
</div>
</div>
</div>Accesibilidad
Los toasts están destinados a ser pequeñas interrupciones para tus visitantes o usuarios, por lo que para
ayudar a aquellos con lectores de pantalla y tecnologías de asistencia similares, debes envolver tus toasts en
una región
aria-live. Los lectores de pantalla anuncian automáticamente los cambios en las regiones
activas (como inyectar/actualizar un componente del sistema) sin necesidad de mover el foco del usuario o
interrumpirlo de otra manera. Además, incluye aria-atomic="true" para asegurarte de que todo los
toasts se anuncien siempre como una sola unidad (atómica), en lugar de simplemente anunciar lo que se cambió
(lo que podría ocasionar problemas si solo actualizas parte del contenido del toasts, o si muestras el mismo
contenido de toast en un momento posterior). Si la información necesaria es importante para el proceso, p.e.
para obtener una lista de errores en un formulario, utiliza el componente de alerta en lugar de toasts.
Ten en cuenta que la región en vivo debe estar presente en el marcado antes de que se genere o actualice el toasts. Si generas dinámicamente ambos al mismo tiempo y los insertas en la página, generalmente no serán anunciados por tecnologías de asistencia.
También necesitas adaptar el nivel de role y aria-live dependiendo del contenido.
Si es un mensaje importante como un error, usa role="alert" aria-live="assertive", de lo
contrario, use los atributos role="status" aria-live="polite".
A medida que cambias el contenido que estás mostrando, asegúrate de actualizar el tiempo
de espera de delay para que los usuarios tengan tiempo suficiente para leer el toasts.
<div class="toast" role="alert" aria-live="polite" aria-atomic="true" data-bs-delay="10000">
<div role="alert" aria-live="assertive" aria-atomic="true">...</div>
</div>
Al usar autohide: false, debes agregar un botón de cierre para permitir que los usuarios
descarten el toast.
<div role="alert" aria-live="assertive" aria-atomic="true" class="toast" data-bs-autohide="false">
<div class="toast-header">
<img src="..." class="rounded me-2" alt="...">
<strong class="me-auto">Bootstrap</strong>
<small>Hace 11 minutos</small>
<button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
</div>
<div class="toast-body">
¡Hola Mundo! Este es un mensaje de toast.
</div>
</div>Si bien técnicamente es posible agregar controles enfocables/accionables (como botones o enlaces adicionales)
en tu toast, debes evitar hacer esto para ocultar automáticamente los toasts. Incluso si das al toast un largo
tiempo de espera delay, los usuarios de tecnología de asistencia y teclado
pueden tener dificultades para llegar al toast a tiempo para tomar medidas (ya que los toasts no reciben
atención cuando se muestran) . Si es absolutamente necesario tener controles adicionales, te recomendamos usar
un toast con autohide: false.
Sass
Variables
$toast-max-width: 350px;
$toast-padding-x: .75rem;
$toast-padding-y: .5rem;
$toast-font-size: .875rem;
$toast-color: null;
$toast-background-color: rgba($white, .85);
$toast-border-width: 1px;
$toast-border-color: rgba($black, .1);
$toast-border-radius: $border-radius;
$toast-box-shadow: $box-shadow;
$toast-spacing: $container-padding-x;
$toast-header-color: $gray-600;
$toast-header-background-color: rgba($white, .85);
$toast-header-border-color: rgba($black, .05);
Uso
Inicializa los toasts a través de JavaScript:
var toastElList = Array.prototype.slice.call(document.querySelectorAll('.toast'))
var toastList = toastElList.map(function (toastEl) {
return new bootstrap.Toast(toastEl, option)
})
Triggers
El descarte (cierre) se puede lograr con el atributo data en un botón dentro de
toast como se muestra a continuación:
<button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
o en un botón fuera de toast usando data-bs-target como se muestra a
continuación:
<button type="button" class="btn-close" data-bs-dismiss="toast" data-bs-target="#my-toast" aria-label="Close"></button>
Opciones
Las opciones se pueden pasar a través de atributos de datos o JavaScript. Para los atributos de datos, agrega
el
nombre de la opción a data-bs-, como en data-bs-animation="".
| Nombre | Tipo | Por defecto | Descripción |
|---|---|---|---|
animation |
boolean | true |
Aplicar una transición de fundido CSS al toast |
autohide |
boolean | true |
Ocultar automáticamente el toast |
delay |
number |
5000
|
Retraso en ocultar el toast (ms) |
Métodos
Transiciones y métodos asíncronos
Todos los métodos de la API son asincrónicos e inician una transition. Regresan al lugar donde se realizó la llamada tan pronto como se inicia la transición, pero antes de que finalice. Además, se ignorará una llamada de método en un componente en medio de una transición.
Consulte nuestra documentación de JavaScript para obtener más información.
show
Revela el toast de un elemento. Regresa al punto de la llamada antes de que se muestre realmente el
toast (es decir, antes de que ocurra el evento shown.bs.toast).
Debes llamar manualmente a este método, caso contrario tu toast no se mostrará.
toast.show()
hide
Oculta el toast de un elemento. Regresa al punto de la llamada antes de que se haya ocultado
realmente el toast (es decir, antes de que ocurra el evento hidden.bs.toast). Tienes
que llamar manualmente a este método si asignaste autohide en false.
toast.hide()
dispose
Oculta el toast de un elemento. Tu toast permanecerá en el DOM pero ya no se mostrará.
toast.dispose()
getInstance
Método estático que te permite obtener la instancia de toast asociada con un elemento DOM
var myToastEl = document.getElementById('myToastEl')
var myToast = bootstrap.Toast.getInstance(myToastEl) // Devuelve una instancia de toast Bootstrap
getOrCreateInstance
Método estático que te permite obtener la instancia de toast asociada con un elemento DOM, o crear uno nuevo en caso de que no se haya inicializado
var myToastEl = document.getElementById('myToastEl')
var myToast = bootstrap.Toast.getOrCreateInstance(myToastEl) // Devuelve una instancia de toast Bootstrap
Eventos
| Tipo de evento | Descripción |
|---|---|
show.bs.toast |
Este evento se activa inmediatamente cuando se llama al método de instancia show. |
shown.bs.toast |
Este evento se activa cuando el usuario ya puede ver el toast. |
hide.bs.toast |
Este evento se activa inmediatamente cuando se llama al método de instancia hide. |
hidden.bs.toast |
Este evento se activa cuando el toast ha terminado de ocultarse al usuario. |
var myToastEl = document.getElementById('myToast')
myToastEl.addEventListener('hidden.bs.toast', function () {
// hacer algo...
})
😎 Esta traducción es parte del proyecto esdocu.com.