Bootstrap - Offcanvas: Panduan untuk Pemula

Hai sana, para pengembang web masa depan! Hari ini, kita akan melihat dunia yang menarik komponen Offcanvas Bootstrap. Jangan khawatir jika Anda baru dalam hal ini - saya akan menjadi panduan ramah Anda, dan kita akan meng eksplorasi topik ini secara langkah demi langkah. Jadi, ambil minuman favorit Anda, betahlah, 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 tambahan. Tiba-tiba, sebuah kompartemen tersembunyi muncul dari dinding - itu sebenarnya apa yang dinamakan Offcanvas dalam desain web! Itu adalah sidebar yang dapat bergeser masuk dan keluar dari pandangan, menyediakan ruang tambahan untuk navigasi, formulir, atau konten lain yang Anda ingin menyembunyikan sampai diperlukan.

Komponen Offcanvas

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

1. Pemicu: Biasanya ini adalah tombol yang, saat diklik, mengungkapkan Offcanvas.
2. Offcanvas itu sendiri: Panel yang bergeser ke pandangan.
3. Backdrop: Overlay opsional yang memudar konten utama saat Offcanvas terbuka.

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

Demo Langsung

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="Tutup"></button>
</div>
<div class="offcanvas-body">
<p>Ini adalah konten Offcanvas. Anda dapat menempatkan apa pun yang Anda inginkan di sini!</p>
</div>
</div>

mari kitauraikan ini:

1. Tombol memiliki data-bs-toggle="offcanvas" untuk memberitahu Bootstrap itu 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 (kami akan eksplorasi posisi lain kemudian).
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! Hanya 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 indah? Tak 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 Statis

Jika Anda ingin Offcanvas tetap terbuka kecuali ditutup secara eksplisit (yaitu, mengklik di 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

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

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

Responsif

Ini adalah trik yang 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 'lg' breakpoint dan menjadi Offcanvas di layar yang lebih kecil.

Penempatan

Ingat saat saya mengatakan bahwa kita dapat mengubah posisi? Berikut cara nya:

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 tapi bukan yang terpenting, mari kita bicarakan membuat Offcanvas dapat diakses oleh 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 Aksesible</h5>
<button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Tutup"></button>
</div>
<!-- Konten Offcanvas -->
</div>

2. Gunakan aria-controls di tombol pemicu:

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

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

Happy coding, dan semoga Offcanvas Anda selalu bergeser mulus!

Credits: Image by storyset