tostadas

Envía notificaciones a tus visitantes con un brindis, un mensaje de alerta ligero y fácilmente personalizable.

Los brindis 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.

Visión general

Cosas que debe saber al usar el complemento de tostadas:

Si está compilando nuestro JavaScript desde la fuente, requiereutil.js .
Los brindis son opcionales por motivos de rendimiento, por lo que debe inicializarlos usted mismo .
Tenga en cuenta que usted es responsable de colocar los brindis.
Las tostadas se ocultarán automáticamente si no las especifica autohide: false.

El efecto de animación de este componente depende de la prefers-reduced-motionconsulta de medios. Consulte la sección de movimiento reducido de nuestra documentación de accesibilidad .

Ejemplos

Básico

Para fomentar los brindis extensibles y predecibles, recomendamos un encabezado y un cuerpo. Toast headers use display: flex, lo que permite una fácil alineación del contenido gracias a nuestras utilidades margin y flexbox.

Las tostadas son tan flexibles como usted necesita y requieren muy poco margen de beneficio. Como mínimo, requerimos que un solo elemento contenga su contenido "tostado" y recomendamos enfáticamente un botón para descartar.

¡Hola Mundo! Este es un mensaje de brindis.

<div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
  <div class="toast-header">
    <img src="..." class="rounded mr-2" alt="...">
    <strong class="mr-auto">Bootstrap</strong>
    <small>11 mins ago</small>
    <button type="button" class="ml-2 mb-1 close" data-dismiss="toast" aria-label="Close">
      <span aria-hidden="true">&times;</span>
    </button>
  </div>
  <div class="toast-body">
    Hello, world! This is a toast message.
  </div>
</div>

Translúcido

Las tostadas también son ligeramente translúcidas, por lo que se mezclan con cualquier cosa sobre la que aparezcan. Para los navegadores que admiten la backdrop-filterpropiedad CSS, también intentaremos desenfocar los elementos debajo de un brindis.

¡Hola Mundo! Este es un mensaje de brindis.

<div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
  <div class="toast-header">
    <img src="..." class="rounded mr-2" alt="...">
    <strong class="mr-auto">Bootstrap</strong>
    <small class="text-muted">11 mins ago</small>
    <button type="button" class="ml-2 mb-1 close" data-dismiss="toast" aria-label="Close">
      <span aria-hidden="true">&times;</span>
    </button>
  </div>
  <div class="toast-body">
    Hello, world! This is a toast message.
  </div>
</div>

Apilado

Cuando tiene varios brindis, por defecto los apilamos verticalmente de manera legible.

¿Ver? Justo como esto

Atención, las tostadas se apilarán automáticamente

<div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
  <div class="toast-header">
    <img src="..." class="rounded mr-2" alt="...">
    <strong class="mr-auto">Bootstrap</strong>
    <small class="text-muted">just now</small>
    <button type="button" class="ml-2 mb-1 close" data-dismiss="toast" aria-label="Close">
      <span aria-hidden="true">&times;</span>
    </button>
  </div>
  <div class="toast-body">
    See? Just like this.
  </div>
</div>

<div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
  <div class="toast-header">
    <img src="..." class="rounded mr-2" alt="...">
    <strong class="mr-auto">Bootstrap</strong>
    <small class="text-muted">2 seconds ago</small>
    <button type="button" class="ml-2 mb-1 close" data-dismiss="toast" aria-label="Close">
      <span aria-hidden="true">&times;</span>
    </button>
  </div>
  <div class="toast-body">
    Heads up, toasts will stack automatically
  </div>
</div>

Colocación

Coloque brindis con CSS personalizado a medida que los necesite. La parte superior derecha se usa a menudo para notificaciones, al igual que la parte superior central. Si solo va a mostrar un brindis a la vez, coloque los estilos de posicionamiento justo en el archivo .toast.

¡Hola Mundo! Este es un mensaje de brindis.

<div aria-live="polite" aria-atomic="true" style="position: relative; min-height: 200px;">
  <div class="toast" style="position: absolute; top: 0; right: 0;">
    <div class="toast-header">
      <img src="..." class="rounded mr-2" alt="...">
      <strong class="mr-auto">Bootstrap</strong>
      <small>11 mins ago</small>
      <button type="button" class="ml-2 mb-1 close" data-dismiss="toast" aria-label="Close">
        <span aria-hidden="true">&times;</span>
      </button>
    </div>
    <div class="toast-body">
      Hello, world! This is a toast message.
    </div>
  </div>
</div>

Para los sistemas que generan más notificaciones, considere usar un elemento envolvente para que puedan apilarse fácilmente.

¿Ver? Justo como esto

Atención, las tostadas se apilarán automáticamente

<div aria-live="polite" aria-atomic="true" style="position: relative; min-height: 200px;">
  <!-- Position it -->
  <div style="position: absolute; top: 0; right: 0;">

    <!-- Then put toasts within -->
    <div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
      <div class="toast-header">
        <img src="..." class="rounded mr-2" alt="...">
        <strong class="mr-auto">Bootstrap</strong>
        <small class="text-muted">just now</small>
        <button type="button" class="ml-2 mb-1 close" data-dismiss="toast" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="toast-body">
        See? Just like this.
      </div>
    </div>

    <div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
      <div class="toast-header">
        <img src="..." class="rounded mr-2" alt="...">
        <strong class="mr-auto">Bootstrap</strong>
        <small class="text-muted">2 seconds ago</small>
        <button type="button" class="ml-2 mb-1 close" data-dismiss="toast" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="toast-body">
        Heads up, toasts will stack automatically
      </div>
    </div>
  </div>
</div>

También puede volverse elegante con las utilidades de flexbox para alinear las tostadas horizontal y/o verticalmente.

¡Hola Mundo! Este es un mensaje de brindis.

<!-- Flexbox container for aligning the toasts -->
<div aria-live="polite" aria-atomic="true" class="d-flex justify-content-center align-items-center" style="min-height: 200px;">

  <!-- Then put toasts within -->
  <div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
    <div class="toast-header">
      <img src="..." class="rounded mr-2" alt="...">
      <strong class="mr-auto">Bootstrap</strong>
      <small>11 mins ago</small>
      <button type="button" class="ml-2 mb-1 close" data-dismiss="toast" aria-label="Close">
        <span aria-hidden="true">&times;</span>
      </button>
    </div>
    <div class="toast-body">
      Hello, world! This is a toast message.
    </div>
  </div>
</div>

Accesibilidad

Los brindis están destinados a ser pequeñas interrupciones para sus visitantes o usuarios, por lo que para ayudar a aquellos con lectores de pantalla y tecnologías de asistencia similares, debe envolver sus brindis en una aria-liveregión . Los lectores de pantalla anuncian automáticamente los cambios en las regiones activas (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 se anuncie siempre 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 momento 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 alertaen lugar de tostadas.

Tenga en cuenta que la región en vivo 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 inserta en la página, generalmente no serán anunciados por tecnologías de asistencia.

También es necesario adaptar el roley el aria-livenivel en 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 cambia el contenido que está mostrando, asegúrese de actualizar el tiempo de delayespera para asegurarse de que las personas tengan tiempo suficiente para leer el brindis.

<div class="toast" role="alert" aria-live="polite" aria-atomic="true" data-delay="10000">
  <div role="alert" aria-live="assertive" aria-atomic="true">...</div>
</div>

Al usar autohide: false, debe agregar un botón de cierre para permitir que los usuarios descarten el brindis.

¡Hola Mundo! Este es un mensaje de brindis.

<div role="alert" aria-live="assertive" aria-atomic="true" class="toast" data-autohide="false">
  <div class="toast-header">
    <img src="..." class="rounded mr-2" alt="...">
    <strong class="mr-auto">Bootstrap</strong>
    <small>11 mins ago</small>
    <button type="button" class="ml-2 mb-1 close" data-dismiss="toast" aria-label="Close">
      <span aria-hidden="true">&times;</span>
    </button>
  </div>
  <div class="toast-body">
    Hello, world! This is a toast message.
  </div>
</div>

Comportamiento de JavaScript

Uso

Inicialice los brindis a través de JavaScript:

$('.toast').toast(option)

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	Escribe	Defecto	Descripción
animación	booleano	verdadero	Aplicar una transición de fundido CSS al brindis
auto-escondite	booleano	verdadero	Ocultar automáticamente el brindis
demora	número	`500`	Retraso ocultando el brindis (ms)

Métodos

Transiciones y métodos asíncronos

Todos los métodos de API son asíncronos 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 de 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 brindis a una colección de elementos.

`.toast('show')`

Revela el brindis de un elemento. Vuelve a la persona que llama antes de que se muestre el brindis (es decir, antes de shown.bs.toastque ocurra el evento). Debe llamar manualmente a este método, en su lugar, su brindis no se mostrará.

$('#element').toast('show')

`.toast('hide')`

Oculta el brindis de un elemento. Vuelve a la persona que llama antes de que se haya ocultado realmente el brindis (es decir, antes de hidden.bs.toastque ocurra el evento). autohideTiene que llamar manualmente a este método si hizo false.

$('#element').toast('hide')

`.toast('dispose')`

Oculta el brindis de un elemento. Su brindis permanecerá en el DOM pero ya no se mostrará.

$('#element').toast('dispose')

Eventos

Tipo de evento	Descripción
show.bs.toast	Este evento se activa inmediatamente cuando `show`se llama al método de instancia.
mostrado.bs.toast	Este evento se activa cuando el brindis se ha hecho visible para el usuario.
ocultar.bs.toast	Este evento se activa inmediatamente cuando `hide`se llama al método de instancia.
oculto.bs.toast	Este evento se dispara cuando el brindis ha terminado de ocultarse al usuario.

$('#myToast').on('hidden.bs.toast', function () {
  // do something...
})