tostadas

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

En esta página

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:

Los brindis son opcionales por motivos de rendimiento, por lo que debe inicializarlos usted mismo .
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.

html

<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>11 mins ago</small>
    <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
  </div>
  <div class="toast-body">
    Hello, world! This is a toast message.
  </div>
</div>

Anteriormente, nuestras secuencias de comandos agregaban dinámicamente la .hideclase para ocultar por completo un brindis (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 principal.

ejemplo en vivo

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

Hello, world! This is a toast message.

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

<div class="toast-container position-fixed bottom-0 end-0 p-3">
  <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>11 mins ago</small>
      <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
    </div>
    <div class="toast-body">
      Hello, world! This is a toast message.
    </div>
  </div>
</div>

Usamos el siguiente JavaScript para activar nuestra demostración de brindis en vivo:

const toastTrigger = document.getElementById('liveToastBtn')
const toastLiveExample = document.getElementById('liveToast')
if (toastTrigger) {
  toastTrigger.addEventListener('click', () => {
    const toast = new bootstrap.Toast(toastLiveExample)

    toast.show()
  })
}

Translúcido

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

¡Hola Mundo! Este es un mensaje de brindis.

html

<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">11 mins ago</small>
    <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
  </div>
  <div class="toast-body">
    Hello, world! This is a toast message.
  </div>
</div>

Apilado

Puede apilar tostadas envolviéndolas en un recipiente para tostadas, lo que agregará algo de espacio verticalmente.

¿Ver? Justo como esto

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

html

<div class="toast-container position-static">
  <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">just now</small>
      <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></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 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">
      Heads up, toasts will stack automatically
    </div>
  </div>
</div>

Contenido personalizado

Personalice sus tostadas eliminando subcomponentes, modificándolos con utilidades o agregando su propio marcado. Aquí hemos creado un brindis más simple eliminando el predeterminado .toast-header, agregando un ícono oculto personalizado de Bootstrap Icons y usando algunas utilidades de Flexbox para ajustar el diseño.

¡Hola Mundo! Este es un mensaje de brindis.

html

<div class="toast align-items-center" role="alert" aria-live="assertive" aria-atomic="true">
  <div class="d-flex">
    <div class="toast-body">
      Hello, world! This is a toast message.
    </div>
    <button type="button" class="btn-close me-2 m-auto" data-bs-dismiss="toast" aria-label="Close"></button>
  </div>
</div>

Alternativamente, también puede agregar controles y componentes adicionales a los brindis.

¡Hola Mundo! Este es un mensaje de brindis.

html

<div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
  <div class="toast-body">
    Hello, world! This is a toast message.
    <div class="mt-2 pt-2 border-top">
      <button type="button" class="btn btn-primary btn-sm">Take action</button>
      <button type="button" class="btn btn-secondary btn-sm" data-bs-dismiss="toast">Close</button>
    </div>
  </div>
</div>

Esquemas de color

Sobre la base del ejemplo anterior, puede crear diferentes esquemas de colores tostados con nuestras utilidades de color y fondo . Aquí hemos agregado .text-bg-primarya .toast, y luego agregado .btn-close-whitea nuestro botón de cerrar. Para un borde nítido, eliminamos el borde predeterminado con .border-0.

¡Hola Mundo! Este es un mensaje de brindis.

html

<div class="toast align-items-center text-bg-primary border-0" role="alert" aria-live="assertive" aria-atomic="true">
  <div class="d-flex">
    <div class="toast-body">
      Hello, world! This is a toast message.
    </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

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.

html

<form>
  <div class="mb-3">
    <label for="selectToastPlacement">Toast placement</label>
    <select class="form-select mt-2" id="selectToastPlacement">
      <option value="" selected>Select a position...</option>
      <option value="top-0 start-0">Top left</option>
      <option value="top-0 start-50 translate-middle-x">Top center</option>
      <option value="top-0 end-0">Top right</option>
      <option value="top-50 start-0 translate-middle-y">Middle left</option>
      <option value="top-50 start-50 translate-middle">Middle center</option>
      <option value="top-50 end-0 translate-middle-y">Middle right</option>
      <option value="bottom-0 start-0">Bottom left</option>
      <option value="bottom-0 start-50 translate-middle-x">Bottom center</option>
      <option value="bottom-0 end-0">Bottom right</option>
    </select>
  </div>
</form>
<div aria-live="polite" aria-atomic="true" class="bg-dark position-relative bd-example-toasts">
  <div class="toast-container 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>11 mins ago</small>
      </div>
      <div class="toast-body">
        Hello, world! This is a toast message.
      </div>
    </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

html

<div aria-live="polite" aria-atomic="true" class="position-relative">
  <!-- Position it: -->
  <!-- - `.toast-container` for spacing between toasts -->
  <!-- - `top-0` & `end-0` to position the toasts in the upper right corner -->
  <!-- - `.p-3` to prevent the toasts from sticking to the edge of the container  -->
  <div class="toast-container 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">just now</small>
        <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></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 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">
        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.

html

<!-- Flexbox container for aligning the 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>11 mins ago</small>
      <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></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-bs-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.

html

<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>11 mins ago</small>
    <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></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.

CSS

Variables

Añadido en v5.2.0

Como parte del enfoque de variables CSS en evolución de Bootstrap, los brindis ahora usan variables CSS locales .toastpara mejorar la personalización en tiempo real. Los valores para las variables CSS se establecen a través de Sass, por lo que también se admite la personalización de Sass.

  --#{$prefix}toast-zindex: #{$zindex-toast};
  --#{$prefix}toast-padding-x: #{$toast-padding-x};
  --#{$prefix}toast-padding-y: #{$toast-padding-y};
  --#{$prefix}toast-spacing: #{$toast-spacing};
  --#{$prefix}toast-max-width: #{$toast-max-width};
  @include rfs($toast-font-size, --#{$prefix}toast-font-size);
  --#{$prefix}toast-color: #{$toast-color};
  --#{$prefix}toast-bg: #{$toast-background-color};
  --#{$prefix}toast-border-width: #{$toast-border-width};
  --#{$prefix}toast-border-color: #{$toast-border-color};
  --#{$prefix}toast-border-radius: #{$toast-border-radius};
  --#{$prefix}toast-box-shadow: #{$toast-box-shadow};
  --#{$prefix}toast-header-color: #{$toast-header-color};
  --#{$prefix}toast-header-bg: #{$toast-header-background-color};
  --#{$prefix}toast-header-border-color: #{$toast-header-border-color};

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:                $border-width;
$toast-border-color:                var(--#{$prefix}border-color-translucent);
$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

Inicialice los brindis a través de JavaScript:

const toastElList = document.querySelectorAll('.toast')
const toastList = [...toastElList].map(toastEl => new bootstrap.Toast(toastEl, option))

disparadores

El despido se puede lograr con el dataatributo en un botón dentro del brindis 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 del brindis usando el data-bs-targetcomo 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

Como las opciones se pueden pasar a través de atributos de datos o JavaScript, puede agregar un nombre de opción a data-bs-, como en data-bs-animation="{value}". Asegúrese de cambiar el tipo de caso del nombre de la opción de " camelCase " a " kebab-case " al pasar las opciones a través de atributos de datos. Por ejemplo, use data-bs-custom-class="beautifier"en lugar de data-bs-customClass="beautifier".

A partir de Bootstrap 5.2.0, todos los componentes admiten un atributo de datos reservados experimentaldata-bs-config que puede albergar una configuración de componente simple como una cadena JSON. Cuando un elemento tiene atributos data-bs-config='{"delay":0, "title":123}'y , el valor final será y los atributos de datos separados anularán los valores dados en . Además, los atributos de datos existentes pueden albergar valores JSON como .data-bs-title="456"title456data-bs-configdata-bs-delay='{"show":0,"hide":150}'

Nombre	Escribe	Defecto	Descripción
`animation`	booleano	`true`	Aplique una transición de fundido CSS al brindis.
`autohide`	booleano	`true`	Oculta automáticamente el brindis después del retraso.
`delay`	número	`5000`	Retraso en milisegundos antes de ocultar el brindis.

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 .

Método	Descripción
`dispose`	Oculta el brindis de un elemento. Su brindis permanecerá en el DOM pero ya no se mostrará.
`getInstance`	Método estático que le permite obtener la instancia de brindis asociada con un elemento DOM. Por ejemplo: `const myToastEl = document.getElementById('myToastEl')` `const myToast = bootstrap.Toast.getInstance(myToastEl)`Devuelve una instancia de brindis de Bootstrap.
`getOrCreateInstance`	Método estático que le permite obtener la instancia de brindis asociada con un elemento DOM, o crear uno nuevo, en caso de que no se haya inicializado. `const myToastEl = document.getElementById('myToastEl')` `const myToast = bootstrap.Toast.getOrCreateInstance(myToastEl)`Devuelve una instancia de brindis de Bootstrap.
`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.toast`que ocurra el evento). `autohide`Tiene que llamar manualmente a este método si hizo `false`.
`isShown`	Devuelve un valor booleano según el estado de visibilidad de la tostada.
`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.toast`que ocurra el evento). Debe llamar manualmente a este método, en su lugar, su brindis no se mostrará.

Eventos

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

const myToastEl = document.getElementById('myToast')
myToastEl.addEventListener('hidden.bs.toast', () => {
  // do something...
})