Bootstrap - Offcanvas: Panduan untuk Pemula

Hai teman-teman pengembang web masa depan! Hari ini, kita akan melihat dunia yang menakjubkan komponen Offcanvas Bootstrap. Jangan khawatir jika Anda baru saja memulai - saya akan menjadi panduan ramah Anda, dan kita akan mengembangkan topik ini bersama langkah demi langkah. Jadi, ambil minuman kesukaan Anda, duduk nyaman, dan mari kita mulai perjalanan yang menarik ini!

Overview

Pertama-tama - apa sebenarnya Offcanvas? Well, bayangkan Anda berada di apartemen kecil dan memerlukan ruang penyimpanan lebih. Tiba-tiba, sebuah kompartemen tersembunyi geser keluar dari tembok - itu adalah esensi apa yang dijelaskan Offcanvas dalam desain web! Itu adalah sidebar yang dapat geser masuk dan keluar pandangan, menyediakan ruang ekstra untuk navigasi, formulir, atau konten lainnya yang Anda ingin menyembunyikan sampai saat diperlukan.

Komponen Offcanvas

Sebelum kita mulai membangun, mari kitauraikan bagian utama dari Offcanvas:

1. Pemicu (trigger): Biasanya ini adalah tombol yang, saat diklik, menampilkan Offcanvas.
2. Offcanvas itu sendiri: Panel yang bergeser ke pandangan.
3. Backdrop: Overlay opsional yang memadamkan konten utama saat Offcanvas terbuka.

Sekarang, mari kita lihat bagaimana komponen ini bersatu dalam kode!

Live Demo

Berikut adalah contoh sederhana untuk memulai:

<button class="btn btn-primary" type="button" data-bs-toggle="offcanvas" data-bs-target="#demoOffcanvas">
Buka Offcanvas
</button>

<div class="offcanvas offcanvas-start" tabindex="-1" id="demoOffcanvas">
<div class="offcanvas-header">
<h5 class="offcanvas-title">Judul Offcanvas</h5>
<button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
</div>
<div class="offcanvas-body">
<pIni adalah konten Offcanvas. Anda dapat memasukkan apa pun yang Anda inginkan di sini!</p>
</div>
</div>

Mari kitauraikan ini:

1. Tombol memiliki data-bs-toggle="offcanvas" untuk memberitahu Bootstrap ini adalah pemicu Offcanvas.
2. data-bs-target="#demoOffcanvas" menghubungkan tombol ke Offcanvas dengan ID yang cocok.
3. Offcanvas itu sendiri adalah div dengan kelas offcanvas.
4. offcanvas-start menempatkannya di sebelah kiri (kita akan mengembangkan posisi lain nanti).
5. Header berisi judul dan tombol tutup.
6. Body adalah tempat konten utama Anda.

Scrolling Body

Secara default, saat Offcanvas terbuka, body di belakangnya tidak dapat di-scroll. Tetapi apa bila Anda ingin mengizinkan scrolling? Mudah-mudahan! cukup tambahkan data-bs-scroll="true" ke div Offcanvas Anda:

<div class="offcanvas offcanvas-start" data-bs-scroll="true" tabindex="-1" id="scrollableOffcanvas">
<!-- Konten Offcanvas -->
</div>

Scrolling Body dan Backdrop

Ingin mengizinkan scrolling tetapi tetap menjaga backdrop yang menarik? Tidak masalah! Tambahkan data-bs-backdrop="false" bersamaan dengan data-bs-scroll="true":

<div class="offcanvas offcanvas-start" data-bs-scroll="true" data-bs-backdrop="false" tabindex="-1" id="scrollableBackdropOffcanvas">
<!-- Konten Offcanvas -->
</div>

Backdrop Statik

Jika Anda ingin Offcanvas tetap terbuka kecuali ditutup secara eksplisit (yaitu, mengklik luar tidak akan menutupnya), gunakan data-bs-backdrop="static":

<div class="offcanvas offcanvas-start" data-bs-backdrop="static" tabindex="-1" id="staticBackdropOffcanvas">
<!-- Konten Offcanvas -->
</div>

Offcanvas Gelap

Rasa goth sedikit? Mari kita buat Offcanvas gelap! cukup tambahkan kelas text-bg-dark:

<div class="offcanvas offcanvas-start text-bg-dark" tabindex="-1" id="darkOffcanvas">
<!-- Konten Offcanvas -->
</div>

Responsif

Ini adalah trik menarik - Anda dapat membuat Offcanvas Anda responsif! Itu bisa menjadi Offcanvas di layar kecil dan konten inline di layar besar. Gunakan kelas .offcanvas-{breakpoint}:

<div class="offcanvas-lg offcanvas-start" tabindex="-1" id="responsiveOffcanvas">
<!-- Konten Offcanvas -->
</div>

Offcanvas ini akan inline di layar yang lebih besar dari breakpoint 'lg' dan Offcanvas di layar kecil.

Penempatan

Ingat saat saya mengatakan bahwa kita dapat mengubah posisi? Mari kita lihat bagaimana:

Kelas	Posisi
offcanvas-start	Kiri
offcanvas-end	Kanan
offcanvas-top	Atas
offcanvas-bottom	Bawah

Misalnya, untuk menempatkan Offcanvas di kanan:

<div class="offcanvas offcanvas-end" tabindex="-1" id="rightOffcanvas">
<!-- Konten Offcanvas -->
</div>

Aksesibilitas

Terakhir tetapi bukan yang paling penting, mari kita bicarakan membuat Offcanvas aksesibel bagi semua pengguna:

1. Gunakan aria-labelledby untuk menghubungkan Offcanvas ke judulnya:

<div class="offcanvas offcanvas-start" tabindex="-1" id="accessibleOffcanvas" aria-labelledby="offcanvasLabel">
<div class="offcanvas-header">
<h5 class="offcanvas-title" id="offcanvasLabel">Offcanvas Aksesibel</h5>
<button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
</div>
<!-- Konten Offcanvas -->
</div>

2. Gunakan aria-controls pada tombol pemicu:

<button class="btn btn-primary" type="button" data-bs-toggle="offcanvas" data-bs-target="#accessibleOffcanvas" aria-controls="accessibleOffcanvas">
Buka Offcanvas Aksesibel
</button>

Dan itu adalah dia, teman-teman! Anda sekarang ahli Offcanvas. Ingat, latihan membuat sempurna, jadi jangan khawatir untuk mencoba komponen ini dalam proyek Anda. Siapa tahu? Anda mungkin saja menciptakan sensasi sliding besar berikutnya dalam desain web!

Happy coding, dan semoga Offcanvas Anda selalu bergeser mulus!

Credits: Image by storyset