Toast Bootstrap 5

Toast (chleb tostowy)

Komponenta Toast podobna do okienka ostrzeżenia, która wyświetla się przez kilka sekund, gdy coś się dzieje (np. gdy użytkownik kliknie przycisk, złoży formularz itp.).

Jak utworzyć Toast

Aby utworzyć Toast, użyj .toast klasy, i dodaj .toast-header i .toast-body.

Uwaga:Domyślnie, toast jest ukryty. Aby go wyświetlić, użyj .show klasa. Aby zamknąć ją, użyj elementu <button> i dodaj data-bs-dismiss="toast":

<div class="toast show">
  <div class="toast-header">
    Tytuł Toast
    <button type="button" class="btn-close" data-bs-dismiss="toast"></button>
  </div>
  <div class="toast-body">
    Tekst w ciele Toast
  </div>
</div>

Spróbuj sam

Otwórz Toast

Aby wyświetlić Toast za pomocą kliknięcia przycisku, musisz zainicjować go za pomocą JavaScript: wybierz określony element i wywołaj toast() Metoda.

Kiedy klikniesz przycisk, poniższy kod wyświetli wszystkie toast w dokumencie:

Przykład

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

Spróbuj sam