Bootstrap 5 Toast

Toast (Panino)

Il componente Toast è simile a una finestra di avviso, che viene visualizzato per pochi secondi quando si verificano determinati eventi (ad esempio, quando l'utente clicca su un pulsante, invia un modulo, ecc.).

Come creare un Toast

Per creare un Toast, utilizzare .toast Classe, e aggiungere .toast-header e .toast-body.

Attenzione:Per impostazione predefinita, il toast è nascosto. Per visualizzarlo, utilizzare .show Classe. Per chiudere, utilizzare l'elemento <button> e aggiungere data-bs-dismiss="toast":

<div class="toast show">
  <div class="toast-header">
    Titolo del Toast
    <button type="button" class="btn-close" data-bs-dismiss="toast"></button>
  </div>
  <div class="toast-body">
    Testo nel corpo del Toast.
  </div>
</div>

Prova personalmente

Apri Toast

Per visualizzare il Toast tramite un clic sul pulsante, è necessario inizializzarlo con JavaScript: selezionare l'elemento specificato e chiamare toast() Metodi.

Quando fate clic su un pulsante, il seguente codice visualizzerà tutti i toast nel documento:

Esempio

<script>
document.getElementById("toastbtn").onclick = function() {
  var toastElList = [].slice.call(document.querySelectorAll('.toast'))
  var toastList = toastElList.map(function(toastEl) {
    return new bootstrap.Toast(toastEl)
  }
  toastList.forEach(toast => toast.show())
}
</script>

Prova personalmente