Toast Bootstrap 5

Toast (Tos)

Komponen Toast seakan pengumuman, apabila terjadi sesuatu (seperti saat pengguna mengklik tombol, mengirim formulir, dll), dia hanya akan muncul untuk beberapa saat.

Bagaimana Membuat Toast

Untuk membuat Toast, gunakan .toast Kelas, dan tambahkan .toast-header dan .toast-body。

Perhatian:Secara bawaan, toast adalah tersembunyi. Jika ingin menampilkannya, gunakan .show Kelas. Jika ingin menutupnya, gunakan elemen <button> dan tambahkan data-bs-dismiss="toast"：

<div class="toast show">
  <div class="toast-header">
    Judul Toast
    <button type="button" class="btn-close" data-bs-dismiss="toast"></button>
  </div>
  <div class="toast-body">
    Teks dalam badan Toast.
  </div>
</div>

Coba Sendiri

Buka Toast

Untuk menampilkan Toast melalui klik tombol, Anda harus menginisialisasikannya dengan JavaScript: pilih elemen yang ditentukan dan panggil toast() Metode.

Ketika Anda mengklik tombol, kode berikut ini akan menampilkan semua toast didalam dokumen:

Contoh

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

Coba Sendiri