Bootstrap 5 Toasts

Toast (broodje)

Het Toast-component is vergelijkbaar met een waarschuwingsoven, dat slechts enkele seconden wordt weergegeven wanneer er iets gebeurt (bijvoorbeeld wanneer de gebruiker op een knop klikt, een formulier indient, enzovoort).

Hoe Toast te maken

Om Toast te maken, gebruik dan .toast Class, en voeg .toast-header en .toast-body。

Opmerking:Standaard is toast verborgen. Om het weer te geven, gebruik dan .show Class. Om het te sluiten, gebruik dan een <button> element en voeg data-bs-dismiss="toast"：

<div class="toast show">
  <div class="toast-header">
    Titel van Toast
    <button type="button" class="btn-close" data-bs-dismiss="toast"></button>
  </div>
  <div class="toast-body">
    Tekst in de toast-hoofdinhoud.
  </div>
</div>

Probeer het zelf

Open Toast

Om Toast via een klik op de knop weer te geven, moet u het met JavaScript initialiseren: kies het gespecificeerde element en roep toast() Methoden.

Wanneer u op de knop klikt, zal het volgende code alle toast in het document weergeven:

Voorbeeld

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

Probeer het zelf