Bootstrap 5 Toast

Toast（leipä)

Toast-komponentti muistuttaa varoitusikkunaa, ja se näyttää vain muutamia sekunteja, kun tapahtuu jotain (esimerkiksi kun käyttäjä napsauttaa painiketta, lähettää lomakkeen jne.).

Kuinka luoda Toast

Jos haluat luoda Toastin, käytä .toast luokat, ja lisää .toast-header ja .toast-body.

Huomioitavaa:Oletuksena toast on piilotettu. Jos haluat näyttää sen, käytä .show luokka. Jos haluat sulkea sen, käytä <button>-elementtiä ja lisää data-bs-dismiss="toast"：

<div class="toast show">
  <div class="toast-header">
    Toastin otsikko
    <button type="button" class="btn-close" data-bs-dismiss="toast"></button>
  </div>
  <div class="toast-body">
    Toastin sisällä oleva teksti.
  </div>
</div>

Kokeile itse

Avaa Toast

Jos haluat näyttää Toastin napsauttamalla nappia, sinun on käynnistettävä se JavaScriptillä: valitse määritetty elementti ja kutsu toast() Menetelmät.

Kun painat nappia, seuraava koodi näyttää kaikki toastit dokumentissa:

Esimerkki

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

Kokeile itse