Toasts
Envíe notificaciones automáticas a sus visitantes con un brindis, un mensaje de alerta ligero y fácilmente personalizable.
Los brindis son notificaciones ligeras diseñadas para imitar las notificaciones push 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.
Visión general
Cosas que debe saber al usar el complemento toast:
-
Si está construyendo nuestro JavaScript desde la fuente,
requiere
util.js
. - Los brindis son opcionales por razones de rendimiento, por lo que debe inicializarlos usted mismo .
- Tenga en cuenta que usted es responsable de colocar las tostadas.
-
Las tostadas se ocultarán automáticamente si no lo especifica
autohide: false
.
El efecto de animación de este componente depende de la
prefers-reduced-motion
consulta de medios.
Consulte la
sección de movimiento reducido de nuestra documentación de accesibilidad
.
Ejemplos
Básico
Para fomentar brindis extensibles y predecibles, recomendamos un encabezado y cuerpo.
Se utilizan encabezados de tostadas
display: flex
, lo que permite alinear fácilmente el contenido gracias a nuestras utilidades de margen y flexbox.
Los brindis son tan flexibles como necesita y tienen muy poco marcado requerido. Como mínimo, requerimos un solo elemento para contener su contenido "tostado" y recomendamos encarecidamente un botón para descartar.
Translúcido
Las tostadas también son ligeramente translúcidas, por lo que se mezclan con cualquier cosa sobre la que puedan aparecer.
Para los navegadores que admiten la
backdrop-filter
propiedad CSS, también intentaremos difuminar los elementos debajo de un brindis.
Apilado
Cuando tienes varios brindis, por defecto los apilamos verticalmente de manera legible.
Colocación
Coloca tostadas con CSS personalizado cuando las necesites.
La parte superior derecha se usa a menudo para notificaciones, al igual que la parte superior central. posicionamiento en el
.toast
.
Para los sistemas que generan más notificaciones, considere usar un elemento de envoltura para que puedan apilarse fácilmente.
También puede ser elegante con las utilidades de flexbox para alinear tostadas horizontal y / o verticalmente.
Accesibilidad
Los brindis están pensados para ser pequeñas interrupciones para sus visitantes o usuarios, por lo que para ayudar a quienes tienen lectores de pantalla y tecnologías de asistencia similares, debe envolver sus brindis en una
aria-live
región
. Los lectores de pantalla anuncian automáticamente los cambios en las regiones en vivo (como la inyección / actualización de un componente de brindis) sin necesidad de mover el enfoque del usuario o interrumpir al usuario.
Además, incluya
aria-atomic="true"
para asegurarse de que todo el brindis siempre se anuncie como una sola unidad (atómica), en lugar de anunciar lo que se cambió (lo que podría generar problemas si solo actualiza parte del contenido del brindis o si muestra el mismo contenido del brindis en un punto posterior en el tiempo).
Si la información necesaria es importante para el proceso, por ejemplo, para una lista de errores en un formulario, utilice el
componente de alerta.
en lugar de tostadas.
Tenga en cuenta que la región activa debe estar presente en el marcado antes de que se genere o actualice el brindis. Si genera dinámicamente ambos al mismo tiempo y los inyecta en la página, generalmente no se anunciarán mediante tecnologías de asistencia.
También es necesario adaptar el nivel
role
y en
aria-live
función del contenido. Si es un mensaje importante como un error, use
role="alert" aria-live="assertive"
, de lo contrario, use
role="status" aria-live="polite"
atributos.
A medida que cambie el contenido que muestra, asegúrese de actualizar el
delay
tiempo
de
espera
para asegurarse de que las personas tengan tiempo suficiente para leer el brindis.
Al usar
autohide: false
, debe agregar un botón de cierre para permitir que los usuarios descarten el brindis.
Comportamiento de JavaScript
Uso
Inicializar tostadas a través de JavaScript:
Opciones
Las opciones se pueden pasar a través de atributos de datos o JavaScript.
Para los atributos de datos, agregue el nombre de la opción a
data-
, como en
data-animation=""
.
Nombre | Tipo | Defecto | Descripción |
---|---|---|---|
animación | booleano | cierto | Aplicar una transición de atenuación CSS al brindis |
auto-escondite | booleano | cierto | Ocultar automáticamente el brindis |
retrasar | número |
500
|
Retraso ocultando la tostada (ms) |
Métodos
Transiciones y métodos asincrónicos
Todos los métodos API son asincrónicos e inician una transición . Vuelven a la persona que llama tan pronto como se inicia la transición, pero antes de que finalice . Además, se ignorará una llamada a un método en un componente en transición .
Consulte nuestra documentación de JavaScript para obtener más información .
$().toast(options)
Adjunta un controlador de tostadas a una colección de elementos.
.toast('show')
Revela el brindis de un elemento.
Vuelve a la persona que llama antes de que se haya mostrado realmente el brindis
(es decir, antes de
shown.bs.toast
que ocurra el evento). Debe llamar manualmente a este método, en su lugar, su brindis no se mostrará.
.toast('hide')
Oculta el brindis de un elemento.
Vuelve a la persona que llama antes de que el brindis se haya ocultado
(es decir, antes de
hidden.bs.toast
que ocurra el evento). Tienes que llamar a este método de forma manual si ha realizado
autohide
a false
.
.toast('dispose')
Oculta el brindis de un elemento. Tu brindis permanecerá en el DOM pero ya no se mostrará.
Eventos
Tipo de evento | Descripción |
---|---|
show.bs.toast |
Este evento se activa inmediatamente cuando
show
se llama al método de instancia.
|
tostadas mostradas | Este evento se activa cuando el brindis se ha hecho visible para el usuario. |
hide.bs.toast |
Este evento se activa inmediatamente cuando
hide
se llama al método de instancia.
|
tostadas ocultas | Este evento se activa cuando el brindis ha terminado de ocultarse al usuario. |