Toast Bootstrap 5

Toast (Tos)

Komponen Toast mirip dengan kotak peringatan, yang hanya muncul untuk beberapa detik saat terjadi beberapa hal (contoh, saat pengguna menekan tombol, mengirim formulir, dll).

Bagaimana Membuat Toast

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

Perhatian:Secara default, toast 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 tombol tekan, Anda harus menginisialisasikannya dengan JavaScript: pilih elemen yang ditentukan dan panggil toast() Metode.

Ketika Anda menekan tombol, kode berikut ini akan menampilkan semua toast dalam 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