Sheet

Extends the Dialog component to display content that complements the main screen.

Examples

Default

<script setup>
import {
  Sheet,
  SheetClose,
  SheetContent,
  SheetDescription,
  SheetFooter,
  SheetHeader,
  SheetTitle,
  SheetTrigger,
  Button
} from '@empathyds/vue'
</script>

<Sheet>
  <SheetTrigger as-child>
    <Button variant="outline">Open</Button>
  </SheetTrigger>
  <SheetContent>
    <SheetHeader>
      <SheetTitle>Edit profile</SheetTitle>
      <SheetDescription>
        Make changes to your profile here. Click save when you're done.
      </SheetDescription>
    </SheetHeader>
    <div class="grid gap-4 py-4">
      <div class="grid grid-cols-4 items-center gap-4">
        <label for="name" class="text-right text-sm">
          Name
        </label>
        <input
          id="name"
          value="Pedro Duarte"
          class="col-span-3 h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50"
        />
      </div>
      <div class="grid grid-cols-4 items-center gap-4">
        <label for="username" class="text-right text-sm">
          Username
        </label>
        <input
          id="username"
          value="@peduarte"
          class="col-span-3 h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50"
        />
      </div>
    </div>
    <SheetFooter>
      <SheetClose as-child>
        <Button type="submit">Save changes</Button>
      </SheetClose>
    </SheetFooter>
  </SheetContent>
</Sheet>

Props

Sheet

Prop	Type	Default	Description
open	boolean	-	The controlled open state of the sheet.
defaultOpen	boolean	false	The open state of the sheet when it is initially rendered.
modal	boolean	true	The modality of the sheet.

Events

Sheet

Event	Payload	Description
update:open	boolean	Event handler called when the open state of the sheet changes.

Slots

Sheet

Slot	Description
default	The content of the sheet.

SheetTrigger

Slot	Description
default	The content of the trigger.

SheetContent

Slot	Description
default	The content of the sheet.

SheetHeader

Slot	Description
default	The header content.

SheetFooter

Slot	Description
default	The footer content.

SheetTitle

Slot	Description
default	The title content.

SheetDescription

Slot	Description
default	The description content.