Bootstrap JS Toasts

Clases CSS Toast

El componente Toast es como un cuadro de alerta que solo se muestra durante un par de segundos cuando ocurre algo (es decir, cuando el usuario hace clic en un botón, envía un formulario, etc.).

Clase Descripción
.toast Crea un toast
.toast-header Crea un encabezado toast
.toast-body Crea un cuerpo toast

Activando vía Javascript

Las toast deben inicializarse con jQuery: selecciona el elemento especificado y llama al método toast().

Ejm

<script>
$(document).ready(function(){
  $('.toast').toast('show');
});
</script>

Opciones toast

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 Por defecto Descripción
animation boolean true Especifica si se debe agregar un efecto de transición de desvanecimiento CSS al mostrar y ocultar la toast.

true: agrega un efecto de desvanecimiento
false: no agrega un efecto de desvanecimiento
autohide boolean true Especifica si se debe ocultar la toast de forma predeterminada.
delay number 500 Especifica el número de milisegundos que se necesitará para ocultar la toast una vez que se muestra.

Métodos toast

La siguiente tabla muestra todos los posibles métodos toast.

Método Descripción
.toast(opciones) Activa el toast con una opción. Ver opciones anteriores para valores válidos
.toast(«show») Muestra el toast
.toast(«hide») Oculta el toast
.toast(«dispose») Oculta y destruye el toast

Ejm

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container mt-3">
  <h3>Toast Methods</h3>
  <p>Click on the buttons to manually control the toast.</p> 
  
  <button type="button" class="btn btn-primary" id="myShowBtn">Show Toast</button>
  <button type="button" class="btn btn-danger" id="myHideBtn">Hide Toast</button>
  <button type="button" class="btn btn-warning" id="myDisposeBtn">Dispose Toast</button>
  
  <div class="toast mt-3">
    <div class="toast-header">
      Toast Header
    </div>
    <div class="toast-body">
      Some text inside the toast body
    </div>
  </div>
</div>

<script>
$(document).ready(function(){
  $("#myShowBtn").click(function(){
    $('.toast').toast('show');
  });
  $("#myHideBtn").click(function(){
    $('.toast').toast('hide');
  });
  $("#myDisposeBtn").click(function(){
    $('.toast').toast('dispose');
  });
});
</script>

</body>
</html>

Eventos toast

La siguiente tabla muestra todos los posibles eventos toast.

Evento Descripción
show.bs.toast Se produce cuando el toast está a punto de mostrarse
shown.bs.toast Se produce cuando el toast se muestra completamente (después de que se hayan completado las transiciones CSS)
hide.bs.toast Se produce cuando el toast está a punto de ocultarse
hidden.bs.toast Se produce cuando el brindis está completamente oculto (después de que se hayan completado las transiciones CSS)