Bootstrap5 Toasts
Bootstrap5 Toasts est un composant de notification léger utilisé pour afficher des informations temporaires, des notifications ou des alertes dans les coins ou en bas d'une page.
Les toasts sont généralement utilisés pour afficher des messages à court terme aux utilisateurs, tels que des messages de réussite, des messages d'erreur, des avertissements ou d'autres notifications.
Les toasts peuvent être affichés à différentes positions sur la page, notamment en haut à gauche, en haut à droite, en bas à gauche, en bas à droite et en bas au centre.
Comment créer des toasts
Pour créer un toast, vous pouvez utiliser la classe.toast, et ajouter les classes .toast-header et .toast-body à l'intérieur pour représenter l'en-tête et le contenu.
Remarque :Les toasts sont masqués par défaut. Vous pouvez utiliser.show pour les afficher. Pour fermer un toast, vous pouvez ajouterdata-bs-dismiss="toast":
Exemple
<div class="toast show">
<div class="toast-header">En-tête du toast<button type="button" class="btn-close" data-bs-dismiss="toast"></button>
</div>
<div class="toast-body">Ceci est un exemple de toast Bootstrap 5.</div>
</div>
Pour afficher un toast en cliquant sur un bouton, vous devez l'initialiser avec JavaScript : récupérez l'événement click de l'élément spécifié par ID et appelez la méthodetoast().
Lorsque le bouton est cliqué, le code suivant affichera toutes les classestoastde la page :
Exemple
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())
}
Afficher le toast dans le coin inférieur droit :
Exemple
<div class="container mt-5">
<button class="btn btn-primary" onclick="showToast()">Afficher le toast</button>
</div>
<div class="position-fixed bottom-0 end-0 p-3">
<div id="toast" class="toast" role="alert" aria-live="assertive" aria-atomic="true">
<div class="toast-header">
<strong class="me-auto">Toast Bootstrap</strong>
<button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Fermer"></button>
</div>
<div class="toast-body">Ceci est un exemple de toast Bootstrap 5.</div>
</div>
</div>
Configurer plusieurs toasts :
Exemple
<div aria-live="polite" aria-atomic="true" class="position-relative">
<div class="toast-container top-0 end-0 p-3">
<div class="toast fade show" role="alert" aria-live="assertive" aria-atomic="true">
<div class="toast-header">
<svg class="bd-placeholder-img rounded me-2" width="20" height="20" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" preserveAspectRatio="xMidYMid slice" focusable="false"><rect width="100%" height="100%" fill="#007aff"></rect></svg>
<strong class="me-auto">Exemple de toast</strong>
<small class="text-muted">À l'instant</small>
<button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Fermer"></button>
</div>
<div class="toast-body">Ceci est le deuxième message</div>
</div>
<div class="toast fade show" role="alert" aria-live="assertive" aria-atomic="true">
<div class="toast-header">
<svg class="bd-placeholder-img rounded me-2" width="20" height="20" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" preserveAspectRatio="xMidYMid slice" focusable="false"><rect width="100%" height="100%" fill="#007aff"></rect></svg>
<strong class="me-auto">Exemple de toast</strong>
<small class="text-muted">il y a 2 secondes</small>
<button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Fermer"></button>
</div>
<div class="toast-body">Ceci est le premier message</div>
</div>
</div>
</div>
Autres extensions