Bootstrap 5 Toast

Toast (Tost)

Toast bileşeni, belirli olaylar olduğunda (örneğin, kullanıcı bir düğmeye tıkladığında, bir formu gönderdiğinde vb.) sadece birkaç saniye gösterir.

Toast Nasıl Oluşturulur

Toast oluşturmak için .toast sınıflarını kullanın ve bunlara .toast-header ve .toast-body.

Dikkat:varsayılan olarak, toast gizlidir. Göstermek için .show sınıfı. Kapatmak için <button> elementini kullanın ve data-bs-dismiss="toast":

<div class="toast show">
  <div class="toast-header">
    Toast Başlığı
    <button type="button" class="btn-close" data-bs-dismiss="toast"></button>
  </div>
  <div class="toast-body">
    Toast ana metni.
  </div>
</div>

Kişisel Deneyin

Toast Aç

Butona tıklayarak Toast göstermek için, JavaScript ile onu başlatmanız gerekmektedir: belirlenen elementi seçin ve çağırın toast() Yöntemler.

Butona tıkladığınızda, aşağıdaki kod belgedeki tüm toast'ları gösterecektir:

Örnek

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

Kişisel Deneyin