Bootstrap - Toasts: Panduan Kawan untuk Pemula

Hai sana, bakal pengembang web! Hari ini, kita akan melihat dunia yang menakjubkan Bootstrap Toasts. Jangan khawatir jika Anda belum pernah mendengar tentang mereka sebelumnya - pada akhir panduan ini, Anda akan bisa membuat Toast seperti seorang ahli! ?

Bootstrap - Toasts

Apa Itu Bootstrap Toasts?

Sebelum kita masuk ke detil, mari bicarakan apa itu Toasts. Bayangkan Anda menggunakan aplikasi seluler, dan tiba-tiba pemberitahuan kecil muncul di bagian bawah layar Anda. Itu sebenarnya apa yang Toast adalah dalam pengembangan web! Itu adalah 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 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>

mari kitauraikan ini:

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

Toast Langsung

Sekarang, mari kita membuat Toast kita hidup! Untuk melakukan 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 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, ketika 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 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? Tidak 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>baru saja</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 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

Toast 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 aksi</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. Bujang budaya!

Skema Warna

Toast dapat datang dalam warna yang berbeda untuk mencocokkan tema situs Anda atau untuk menandai 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 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

Toast dapat ditempatkan di mana saja di halaman Anda. Berikut cara menempatkan itu 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 role="alert" dan aria-live="assertive" atribut untuk memastikan screen reader dapat mengumumkan Toast Anda dengan baik.

Berikut adalah tabel yang menguraikan metode kunci Toast:

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

Dan itu saja! Anda sekarang adalah mastar Toast. Ingat, latihan membuat sempurna, jadi cobalah menggabungkan ini ke proyek berikutnya. Selamat coding! ?

Credits: Image by storyset