Installation

pnpm dlx shadcn-vue@latest add drawer

Usage

<script setup lang="ts">
import {
  Drawer,
  DrawerClose,
  DrawerContent,
  DrawerDescription,
  DrawerFooter,
  DrawerHeader,
  DrawerTitle,
  DrawerTrigger,
} from '@/components/ui/drawer'
</script>

<template>
  <Drawer>
    <DrawerTrigger>Open</DrawerTrigger>
    <DrawerContent>
      <DrawerHeader>
        <DrawerTitle>Are you absolutely sure?</DrawerTitle>
        <DrawerDescription>
          This action cannot be undone.
        </DrawerDescription>
      </DrawerHeader>
      <DrawerFooter>
        <Button>Submit</Button>
        <DrawerClose>
          <Button variant="outline">
            Cancel
          </Button>
        </DrawerClose>
      </DrawerFooter>
    </DrawerContent>
  </Drawer>
</template>

Examples

Konten yang Bisa Digulir

Menjaga tombol aksi tetap terlihat selagi kontennya digulir.

Sisi

Pakai prop swipe-direction untuk menentukan ke arah mana drawer digeser saat ditutup. Drawer menempel pada sisi yang jadi arah penutupannya — up membuka drawer di sisi atas, down di sisi bawah. Pilihannya: up, right, down, dan left.

Modal Responsif (Dialog & Drawer)

Pakai komponen Drawer untuk layar kecil, dan Dialog untuk layar yang lebih lebar. Pola ini bisa Anda jadikan komponen pakai-ulang dengan memanfaatkan slot untuk tiap bagian modal.