Installation

pnpm dlx kliping@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.

Requirements

Semua dipasang otomatis oleh kliping add; tabel ini untuk Anda yang memasang manual atau memeriksa project.

Requirement	Value
Project	Vue 3.5+, Tailwind CSS v4, alias @ — disiapkan kliping init
npm packages	@vueuse/core@^14.4.0, reka-ui@^2.10.3
Files	components/ui/drawer/drawer.vue components/ui/drawer/drawer-close.vue components/ui/drawer/drawer-content.vue components/ui/drawer/drawer-description.vue components/ui/drawer/drawer-footer.vue components/ui/drawer/drawer-header.vue components/ui/drawer/drawer-overlay.vue components/ui/drawer/drawer-title.vue components/ui/drawer/drawer-trigger.vue components/ui/drawer/index.ts

Anatomy

Susunan bagiannya seperti dipakai di contoh-contoh di atas. Impor semua bagian dari satu tempat, lalu susun begini:

<Drawer>
  <DrawerTrigger />
  <DrawerContent>
    <DrawerHeader>
      <DrawerTitle />
      <DrawerDescription />
    </DrawerHeader>
    <DrawerFooter>
      <DrawerClose />
    </DrawerFooter>
  </DrawerContent>
</Drawer>

Bagian lain yang tersedia: DrawerOverlay.

API Reference

Drawer

Prop	Type	Default	Description
defaultSnapPoint?	DrawerSnapPoint	—	Snap point the drawer opens at when uncontrolled (one of snapPoints).
open?	boolean	—	v-model:open
defaultOpen?	boolean	—	The initial open state when uncontrolled.
modal?	DrawerModal	—	Modality of the drawer. - true (default): modal with focus trap, scroll lock, and outside-press dismiss - 'trap-focus': traps focus but allows outside pointer events (non-modal side panels) - false: non-modal
swipeDirection?	SwipeDirection$1	—	Direction to swipe to dismiss.
snapPoints?	DrawerSnapPoint[]	—	Preset snap positions (fractions 0-1, pixels >1, or '148px'/'30rem' strings)
snapPoint?	DrawerSnapPoint	—	v-model:snapPoint
snapToSequentialPoints?	boolean	—	When true, snaps to the next sequential snap point (one step at a time). When false, snaps to the nearest snap point by distance.

Event	Payload	Description
@update:open	[value: boolean, details?: DrawerOpenChangeDetails | undefined]	Emitted when the open state changes.
@update:openComplete	[value: boolean]	Emitted when the open or close animation finishes, with the open state.
@update:snapPoint	[value: DrawerSnapPoint | null]	Emitted when snapPoint changes. Bind with v-model:snapPoint.

Slot	Props
#default	{ open: boolean; close: () => void; }

DrawerClose

Prop	Type	Default	Description
asChild?	boolean	—	Change the default rendered element for the one passed as a child, merging their props and behavior. Read our Composition guide for more details.
as?	AsTag | Component	—	The element or component this component should render as. Can be overwritten by asChild.

Slot	Props
#default	—

Data attribute	Value
[data-slot]	"drawer-close"

DrawerContent

Prop	Type	Default	Description
forceMount?	boolean	—	Keep the content mounted while closed, e.g. to control the animation yourself.
asChild?	boolean	—	Change the default rendered element for the one passed as a child, merging their props and behavior. Read our Composition guide for more details.
as?	AsTag | Component	—	The element or component this component should render as. Can be overwritten by asChild.
disableOutsidePointerEvents?	boolean	—	When true, hover/focus/click interactions will be disabled on elements outside the DismissableLayer. Users will need to click twice on outside elements to interact with them: once to close the DismissableLayer, and again to trigger the element.
initialFocus?	boolean | HTMLElement	—	Initial focus target when the drawer opens. - true / default: focus the first focusable element inside - false: do not focus anything - element ref: focus that specific element
finalFocus?	boolean | HTMLElement	—	Final focus target when the drawer closes. - true / default: focus the trigger - false: do not restore focus - element ref: focus that specific element

Event	Payload	Description
@escapeKeyDown	[event: KeyboardEvent]	Emitted when Escape is pressed; call event.preventDefault() to keep it open.
@pointerDownOutside	[event: PointerDownOutsideEvent]	Emitted on a pointer down outside; call event.preventDefault() to keep it open.
@focusOutside	[event: FocusOutsideEvent]	Emitted when focus moves outside; call event.preventDefault() to keep it open.
@interactOutside	[event: PointerDownOutsideEvent | FocusOutsideEvent]	Emitted on any pointer down or focus outside; call event.preventDefault() to keep it open.
@openAutoFocus	[event: Event]	Emitted when focus moves in on open; call event.preventDefault() to stop it.
@closeAutoFocus	[event: Event]	Emitted when focus returns on close; call event.preventDefault() to stop it.

Slot	Props
#default	—

Data attribute	Value
[data-slot]	"drawer-content"
[data-swiping]	set at runtime

DrawerDescription

Prop	Type	Default	Description
asChild?	boolean	—	Change the default rendered element for the one passed as a child, merging their props and behavior. Read our Composition guide for more details.
as?	AsTag | Component	—	The element or component this component should render as. Can be overwritten by asChild.

Slot	Props
#default	—

Data attribute	Value
[data-slot]	"drawer-description"

DrawerFooter

Slot	Props
#default	—

Data attribute	Value
[data-slot]	"drawer-footer"

DrawerHeader

Slot	Props
#default	—

Data attribute	Value
[data-slot]	"drawer-header"

DrawerOverlay

Prop	Type	Default	Description
forceMount?	boolean	—	Keep mounted for animation control.
forceRender?	boolean	—	Render even when inside a nested drawer.
asChild?	boolean	—	Change the default rendered element for the one passed as a child, merging their props and behavior. Read our Composition guide for more details.
as?	AsTag | Component	—	The element or component this component should render as. Can be overwritten by asChild.

Data attribute	Value
[data-slot]	"drawer-overlay"

DrawerTitle

Prop	Type	Default	Description
asChild?	boolean	—	Change the default rendered element for the one passed as a child, merging their props and behavior. Read our Composition guide for more details.
as?	AsTag | Component	—	The element or component this component should render as. Can be overwritten by asChild.

Slot	Props
#default	—

Data attribute	Value
[data-slot]	"drawer-title"

DrawerTrigger

Prop	Type	Default	Description
asChild?	boolean	—	Change the default rendered element for the one passed as a child, merging their props and behavior. Read our Composition guide for more details.
as?	AsTag | Component	—	The element or component this component should render as. Can be overwritten by asChild.

Slot	Props
#default	—

Data attribute	Value
[data-slot]	"drawer-trigger"

Keyboard Interactions

Perilaku keyboard-nya datang dari primitif Reka UI Drawer yang dipakai komponen ini, mengikuti pola WAI-ARIA.

Key	Description
Space	Opens/closes the drawer.
Enter	Opens/closes the drawer.
Tab	Moves focus to the next focusable element.
Shift + Tab	Moves focus to the previous focusable element.
Esc	Closes the drawer and moves focus to DrawerTrigger.

CSS Variables

Token tema yang dibaca komponen ini — ubah nilainya di CSS global (:root dan .dark, lihat Theming) untuk mengubah tampilannya tanpa menyentuh komponennya: --background, --foreground, --muted, --muted-foreground, --radius.

Credits

Berasal dari shadcn-vue (MIT, Copyright (c) 2023 unovue). Rantai lengkapnya di Credits.