Installation

pnpm dlx kliping@latest add sheet

Usage

<script setup lang="ts">
import {
  Sheet,
  SheetContent,
  SheetDescription,
  SheetHeader,
  SheetTitle,
  SheetTrigger,
} from '@/components/ui/sheet'
</script>

<template>
  <Sheet>
    <SheetTrigger>Open</SheetTrigger>
    <SheetContent>
      <SheetHeader>
        <SheetTitle>Are you absolutely sure?</SheetTitle>
        <SheetDescription>
          This action cannot be undone. This will permanently delete your account
          and remove your data from our servers.
        </SheetDescription>
      </SheetHeader>
    </SheetContent>
  </Sheet>
</template>

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	@lucide/vue@^1.31.0, @vueuse/core@^14.4.0, reka-ui@^2.10.3
Files	components/ui/sheet/sheet.vue components/ui/sheet/sheet-close.vue components/ui/sheet/sheet-content.vue components/ui/sheet/sheet-description.vue components/ui/sheet/sheet-footer.vue components/ui/sheet/sheet-header.vue components/ui/sheet/sheet-overlay.vue components/ui/sheet/sheet-title.vue components/ui/sheet/sheet-trigger.vue components/ui/sheet/index.ts

Anatomy

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

<Sheet>
  <SheetTrigger />
  <SheetContent>
    <SheetHeader>
      <SheetTitle />
      <SheetDescription />
    </SheetHeader>
    <SheetFooter>
      <SheetClose />
    </SheetFooter>
  </SheetContent>
</Sheet>

API Reference

Sheet

Prop	Type	Default	Description
open?	boolean	—	The controlled open state of the dialog. Can be binded as v-model:open.
defaultOpen?	boolean	—	The open state of the dialog when it is initially rendered. Use when you do not need to control its open state.
modal?	boolean	—	The modality of the dialog When set to true, interaction with outside elements will be disabled and only dialog content will be visible to screen readers.
unmountOnHide?	boolean	—	When set to false, the dialog content will not be unmounted when closed, but instead hidden with CSS. Useful for SEO or when you want to improve performance by not remounting the component on every open.

Event	Payload	Description
@update:open	[value: boolean]	Emitted when the open state changes.

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

Data attribute	Value
[data-slot]	"sheet"

SheetClose

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]	"sheet-close"

SheetContent

Prop	Type	Default	Description
side?	"bottom" | "top" | "right" | "left"	"right"	Screen edge the sheet slides in from: "top", "right", "bottom", or "left".
forceMount?	boolean	—	Used to force mounting when more control is needed. Useful when controlling animation with Vue animation libraries.
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.

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]	"sheet-content"

SheetDescription

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]	"sheet-description"

SheetFooter

Slot	Props
#default	—

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

SheetHeader

Slot	Props
#default	—

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

SheetTitle

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]	"sheet-title"

SheetTrigger

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]	"sheet-trigger"

Keyboard Interactions

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

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

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, --border, --foreground, --muted-foreground, --ring, --secondary.

Credits

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