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. 


  <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 puedan aparecer. Para los navegadores que admiten la backdrop-filter propiedad CSS, también intentaremos difuminar los elementos debajo de un 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 tienes varios brindis, por defecto los apilamos verticalmente de manera legible. 


  <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

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.

Bootstrap 11 mins ago
Hello, world! This is a toast message.

  <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 de envoltura para que puedan apilarse fácilmente. 


  <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 ser elegante con las utilidades de flexbox para alinear tostadas horizontal y / o verticalmente. 


  <!-- Flexbox container for aligning the toasts -->
  <div aria-live="polite" aria-atomic="true" class="d-flex justify-content-center align-items-center" style="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 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. 


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


  <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

Inicializar tostadas 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 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á. 


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

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


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

.toast('dispose')

Oculta el brindis de un elemento. Tu 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.
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. 

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