Bootstrap - Toasts: Panduan Ramah untuk Pemula

Halo sana, para pengembang web masa depan! Hari ini, kita akan membanjiri ke dalam dunia yang menakjubkan Bootstrap Toasts. Jangan khawatir jika Anda belum pernah mendengar tentang mereka sebelumnya - pada akhir tutorial ini, Anda akan bisa membuat Toast seperti seorang ahli! ?

Apa Itu Bootstrap Toasts?

Sebelum kita masuk ke detil, mari bicarakan apa itu Toasts. Bayangkan Anda menggunakan sebuah aplikasi mobile, dan tiba-tiba sebuah notifikasi kecil muncul di bagian bawah layar Anda. Itu adalah esensi dari apa yang Toast adalah dalam pengembangan web! Itu adalah sebuah notifikasi ringan yang dirancang untuk meniru notifikasi push yang kita lihat di perangkat mobile.

Toast Dasar

Mari kita mulai dengan Toast dasar. Berikut adalah penampilannya dalam kode:

<div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
<div class="toast-header">
<img src="..." class="rounded me-2" alt="...">
<strong class="me-auto">Bootstrap</strong>
<small>11 menit yang lalu</small>
<button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
</div>
<div class="toast-body">
Halo, dunia! Ini adalah pesan Toast.
</div>
</div>

mariuraikan ini:

• div luar dengan kelas toast adalah wadah utama kita.
• Didalamnya, kita memiliki toast-header dan toast-body.
• Header biasanya mengandung gambar, judul, timestamp, dan tombol tutup.
• Body adalah tempat pesan utama kita.

Toast Langsung

Sekarang, mari kita membuat Toast kita hidup! Untuk ini, kita butuh sedikit JavaScript:

<button type="button" class="btn btn-primary" id="liveToastBtn">Tampilkan toast langsung</button>

<div class="toast-container position-fixed bottom-0 end-0 p-3">
<div id="liveToast" class="toast" role="alert" aria-live="assertive" aria-atomic="true">
<div class="toast-header">
<img src="..." class="rounded me-2" alt="...">
<strong class="me-auto">Bootstrap</strong>
<small>11 menit yang lalu</small>
<button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
</div>
<div class="toast-body">
Halo, Dunia! Ini adalah pesan toast langsung.
</div>
</div>
</div>

<script>
const toastTrigger = document.getElementById('liveToastBtn')
const toastLiveExample = document.getElementById('liveToast')
if (toastTrigger) {
toastTrigger.addEventListener('click', () => {
const toast = new bootstrap.Toast(toastLiveExample)
toast.show()
})
}
</script>

Di sini, kita menambahkan tombol yang, saat diklik, akan menampilkan Toast. JavaScript di bagian bawah mendengarkan klik dan kemudian menampilkan Toast.

Toast Translucen

Ingin membuat Toast Anda sedikit terlihat melintang? Hanya tambahkan kelas bg-light:

<div class="toast bg-light" role="alert" aria-live="assertive" aria-atomic="true">
<div class="toast-header">
<img src="..." class="rounded me-2" alt="...">
<strong class="me-auto">Bootstrap</strong>
<small>11 menit yang lalu</small>
<button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
</div>
<div class="toast-body">
Halo, Dunia! Ini adalah toast translusen.
</div>
</div>

Toast Tumpuk

Apa jika Anda ingin menampilkan beberapa Toast? Tak masalah! Bootstrap akan menumpuk mereka rapi:

<div class="toast-container position-fixed bottom-0 end-0 p-3">
<div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
<div class="toast-header">
<img src="..." class="rounded me-2" alt="...">
<strong class="me-auto">Bootstrap</strong>
<small>sekarang</small>
<button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
</div>
<div class="toast-body">
Lihat? Seperti ini.
</div>
</div>

<div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
<div class="toast-header">
<img src="..." class="rounded me-2" alt="...">
<strong class="me-auto">Bootstrap</strong>
<small>2 detik yang lalu</small>
<button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
</div>
<div class="toast-body">
Perhatikan, toast akan tumpuk secara otomatis
</div>
</div>
</div>

Konten Khusus

Toasts tidak terbatas hanya untuk teks. Anda dapat menambahkan konten HTML apa pun yang Anda inginkan:

<div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
<div class="toast-body">
Halo, dunia! Ini adalah pesan toast.
<div class="mt-2 pt-2 border-top">
<button type="button" class="btn btn-primary btn-sm">Ambil tindakan</button>
<button type="button" class="btn btn-secondary btn-sm" data-bs-dismiss="toast">Tutup</button>
</div>
</div>
</div>

Di sini, kita menambahkan tombol ke body Toast. Bujuk kreativitas Anda!

Skema Warna

Toasts dapat datang dalam warna yang berbeda untuk mencocokkan tema situs Anda atau untuk menandakan jenis pesan yang berbeda:

<div class="toast bg-primary text-white" role="alert" aria-live="assertive" aria-atomic="true">
<div class="toast-header">
<strong class="me-auto">Bootstrap</strong>
<small>11 menit yang lalu</small>
<button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
</div>
<div class="toast-body">
Halo, dunia! Ini adalah toast utama.
</div>
</div>

Anda dapat mengganti bg-primary dengan bg-success, bg-danger, bg-warning, dll.

Penempatan Toast

Toasts dapat ditempatkan di mana saja di halaman Anda. Berikut cara menempatkan nya di sudut kanan atas:

<div aria-live="polite" aria-atomic="true" class="position-relative">
<div class="toast-container position-absolute top-0 end-0 p-3">
<!-- Toast Anda di sini -->
</div>
</div>

Aksesibilitas

Aksesibilitas sangat penting! Selalu sertakan atribut role="alert" dan aria-live="assertive" untuk memastikan pembaca layar dapat mengumumkan Toast Anda dengan benar.

Berikut adalah tabel yang menggabungkan metode kunci Toast:

Metode	Deskripsi
show()	Menampilkan Toast
hide()	Menyembunyikan Toast
dispose()	Menyembunyikan Toast dan menghapusnya dari DOM

Dan itu saja! Anda sekarang adalah seorang master Toast. Ingat, latihan membuat sempurna, jadi cobalah untuk mengintegrasikan ini ke proyek berikutnya. Selamat coding! ?

Credits: Image by storyset