9.7k

Sheet

PreviousNext

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

Docs API Reference 
<!-- AUTO-GENERATED BY scripts/generate-custom-demos.ts. DO NOT EDIT DIRECTLY. -->
<script setup lang="ts">
import VButton from '@ui-kit/src/components/Base/VButton/VButton.vue'
import {
  VSheet,
  VSheetContent,
  VSheetDescription,
  VSheetFooter,
  VSheetHeader,
  VSheetTitle,
  VSheetTrigger,
} from '@ui-kit/src/components/Base/VSheet'
</script>

<template>
  <VSheet>
    <VSheetTrigger as-child>
      <VButton variant="outlined">
      Open sheet
    </VButton>
    </VSheetTrigger>
    <VSheetContent side="right" class="max-w-sm">
      <VSheetHeader class="grid gap-2">
        <VSheetTitle>Workspace settings</VSheetTitle>
        <VSheetDescription>
          Review a compact side panel driven by the internal sheet primitives.
        </VSheetDescription>
      </VSheetHeader>
      <div class="grid gap-4">
        <label class="grid gap-1">
          <span>Workspace name</span>
          <input value="Webdevelop">
        </label>
        <label class="grid gap-1">
          <span>Default view</span>
          <input value="Components">
        </label>
      </div>
      <VSheetFooter class="mt-6 flex flex-wrap justify-end gap-3">
        <VButton variant="outlined">
      Cancel
    </VButton>
        <VButton>
      Apply
    </VButton>
      </VSheetFooter>
    </VSheetContent>
  </VSheet>
</template>

Installation

pnpm dlx shadcn-vue@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>
SeparatorSidebar