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.

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

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 end-0 p-3" style="z-index: 11">
  <div id="liveToast" class="toast hide" 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>

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.

<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

<div class="toast-container">
  <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.

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

<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 .bg-primaryy .text-whiteal .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.

<div class="toast align-items-center text-white 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.

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

<div aria-live="polite" aria-atomic="true" class="position-relative">
  <!-- Position it: -->
  <!-- - `.toast-container` for spacing between toasts -->
  <!-- - `.position-absolute`, `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 position-absolute 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.

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

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

Hablar con descaro a

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:                1px;
$toast-border-color:                rgba(0, 0, 0, .1);
$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(0, 0, 0, .05);

Uso

Inicialice los brindis a través de JavaScript:

var toastElList = [].slice.call(document.querySelectorAll('.toast'))
var toastList = toastElList.map(function (toastEl) {
  return new bootstrap.Toast(toastEl, 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-bs-, como en data-bs-animation="".

Nombre	Escribe	Defecto	Descripción
`animation`	booleano	`true`	Aplicar una transición de fundido CSS al brindis
`autohide`	booleano	`true`	Ocultar automáticamente el brindis
`delay`	número	`5000`	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 .

mostrar

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

toast.show()

ocultar

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.

toast.hide()

disponer

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

toast.dispose()

obtener Instancia

Método estático que le permite obtener la instancia de scrollspy asociada con un elemento DOM

var myToastEl = document.getElementById('myToastEl')
var myToast = bootstrap.Toast.getInstance(myToastEl) // Returns a Bootstrap toast instance

getOrCreateInstance

Método estático que le permite obtener la instancia de scrollspy asociada con un elemento DOM, o crear uno nuevo en caso de que no se haya inicializado

var myToastEl = document.getElementById('myToastEl')
var myToast = bootstrap.Toast.getOrCreateInstance(myToastEl) // Returns a Bootstrap toast instance

Eventos

Tipo de evento	Descripción
`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.
`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.

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