Components/Drawer & Bottom Sheet (AppDrawer)
Drawer & Bottom Sheet (AppDrawer)
● Needs Review Web Nuxt 4 + Mobile React Native
Panel meluncur dari sisi samping (Side Drawer untuk Web Desktop) atau dari bawah (Bottom Sheet untuk Mobile) untuk alur filter katalog, keranjang belanja, dan rincian subtes.
Import
<AppDrawer v-model="isOpen" title="..." position="right" />Side Drawer vs. Bottom Sheet
Gunakan position="bottom" (Bottom Sheet) pada konteks mobile agar konten mudah dijangkau satu tangan, seperti rincian pembelian sebelum checkout. Gunakan position="right" (Side Drawer) pada layar lebar, biasanya untuk filter katalog yang tidak butuh perhatian penuh layar. Jangan biarkan konten drawer melebihi ~80% tinggi layar tanpa area scroll mandiri — panel sudah membatasi tinggi Bottom Sheet ke max-h-[80vh], tapi konten Anda sendiri tetap perlu dibungkus agar bisa scroll di dalam batas itu, bukan mendorong footer aksi keluar dari layar.
Drawer & Sheet Triggers
Butuh detail props, events, dan slot?