Bikin Drawer Yang Ajib Pake Vaul 👀

Biasanya muncul dari bawah komponennya~

Mengenal Vaul

Vaul merupakan React component yang bisa digunakan untuk membuat drawer.

Kalo lo belum tau, drawer ini komponen yang awalnya nggak kelihatan, kemudian ada tombol yang digunakan buat trigger komponen tersebut buat muncul. Biasanya muncul (nggak selalu) dari bawah.

Di beberapa UI kit atau design system, drawer punya nama yang beda, bisa drawer, bottom sheet, atau bahkan off-canvas.

Cara pakenya gampang

Vaul ini dibikin di atas Radix Dialog, jadinya punya anatomi yang mirip.

Kayak gini:

Penggunaan dasar

Begini cara penggunaan dasarnya, biar nggak bingung kita nggak bakal kasih style apa-apa dulu, ya.

import { Drawer } from 'vaul';

export default function App() {
  return (
    <Drawer.Root>
      <Drawer.Trigger>Buka Drawer</Drawer.Trigger>
      <Drawer.Portal>
        <Drawer.Overlay />
        <Drawer.Content>
          Konten dari drawer-nya.
        </Drawer.Content>
      </Drawer.Portal>
    </Drawer.Root>
  );
}

Penggunaan styling

Basicnya udah kita coba, sekarang kita coba kasih styling pake Tailwind.

import { Drawer } from 'vaul';

export default function App() {
  return (
    <div className="flex items-center justify-center min-h-screen">
      <Drawer.Root>
        <Drawer.Trigger className="text-sm py-2 px-4 bg-blue-500 rounded-xl text-white cursor-white">Buka Drawer</Drawer.Trigger>
        <Drawer.Portal>
          <Drawer.Overlay className="fixed inset-0 bg-black/40" />
          <Drawer.Content className="bg-gray-100 h-fit fixed bottom-0 left-0 right-0 outline-none">
            <div className="p-4 bg-white">
              <Drawer.Title className="text-lg mb-4">Drawer Gue</Drawer.Title>
              Konten drawernya.
            </div>
          </Drawer.Content>
        </Drawer.Portal>
      </Drawer.Root>
    </div>
  );
}

Bedanya dengan komponen dialog

Secara fungsionalitas mirip dengan dialog atau modal, juga bisa dibuat sama secara visual. Hal yang ngebedain keduanya ada pada bagaimana lo berinteraksi dengan mereka.

• Kalo dialog, umumnya lo butuh tombol close atau klik backdrop di belakang dialog-nya buat nutup dialog tersebut.
• Kalo drawer, dia punya interaksi drag-to-dismiss. Jadi, lo bisa drag geser, misal, ke bawah buat nutup drawernya.

Selengkapnya

Kita udah bahas cara yang paling basic buat pake Vaul. Selebihnya lo bisa cek sendiri dokumentasinya. Vaul bisa diubah-ubah sesuai kebutuhan lo, kayak munculin drawer-nya dari kanan atau sekadar bikin custom handler.