Toast Bootstrap 5

Toast (pain)

Le composant Toast est similaire à une boîte de dialogue d'alerte, qui ne s'affiche que quelques secondes lors de certains événements (par exemple, lorsque l'utilisateur clique sur un bouton, soumet un formulaire, etc.).

Comment créer un Toast

Pour créer un Toast, utilisez .toast Classe, et ajoutez .toast-header et .toast-body.

Attention :Par défaut, le toast est caché. Pour le montrer, utilisez .show Classe. Pour le fermer, utilisez l'élément <button> et ajoutez data-bs-dismiss="toast":

<div class="toast show">
  <div class="toast-header">
    Titre du Toast
    <button type="button" class="btn-close" data-bs-dismiss="toast"></button>
  </div>
  <div class="toast-body">
    Texte du corps du Toast.
  </div>
</div>

Essayez-le vous-même

Ouvrir Toast

Pour afficher un Toast en cliquant sur un bouton, vous devez l'initialiser avec JavaScript : sélectionnez l'élément spécifié et appelez toast() Méthode.

Lorsque vous cliquez sur le bouton, le code suivant affichera tous les toast du document :

Exemple

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

Essayez-le vous-même