in English

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.

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

Vivir

Haga clic en el botón a continuación para mostrar un brindis (ubicado con nuestras utilidades en la esquina inferior derecha) que se ha ocultado de manera predeterminada con .hide.

<button type="button" class="btn btn-primary" id="liveToastBtn">Show live toast</button>

<div class="position-fixed bottom-0 right-0 p-3" style="z-index: 5; right: 0; bottom: 0;">
  <div id="liveToast" class="toast hide" role="alert" aria-live="assertive" aria-atomic="true" data-delay="2000">
    <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>

Translúcido

Las tostadas son ligeramente translúcidas para mezclarse con lo que hay debajo de ellas.

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

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

Oreja hace 11 minutos
¡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.

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

<!-- 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 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 siempre se anuncie como una sola unidad (atómica), en lugar de simplemente 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). 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 que los usuarios tengan suficiente tiempo 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>

Si bien técnicamente es posible agregar controles enfocables/accionables (como botones o enlaces adicionales) en su notificación del sistema, debe evitar hacer esto para ocultar automáticamente las notificaciones del sistema. Incluso si otorga a la notificación del brindis un tiempo de delayespera prolongado , es posible que a los usuarios del teclado y de la tecnología de asistencia les resulte difícil llegar a la notificación del brindis a tiempo para actuar (ya que las notificaciones del brindis no reciben atención cuando se muestran). Si es absolutamente necesario tener controles adicionales, le recomendamos usar un brindis con autohide: false.

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 showse 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 hidese 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...
})