shadcn-vue/sheet.md at f51a8da08d287267f9d05de4845f702b7732bb64

Sadegh Barati d34c620055

chore: lint and enable Volar hybrid mode (#419 )

* chore: update deps

* feat: enable Volar hybrid mode

* chore: lint

* chore: build registry

2024-03-20 22:29:42 +03:30

1.7 KiB

Raw Blame History

title	description	source	primitive
Sheet	Extends the Dialog component to display content that complements the main content of the screen.	apps/www/src/lib/registry/default/ui/sheet	https://www.radix-vue.com/components/dialog.html

Installation

npx 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 sure 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>

Examples

Side

Use the side property to <SheetContent /> to indicate the edge of the screen where the component will appear. The values can be top, right, bottom or left.

Size

You can adjust the size of the sheet using CSS classes:

<template>
  <Sheet>
    <SheetTrigger>Open</SheetTrigger>
    <SheetContent class="w-[400px] sm:w-[540px]">
      <SheetHeader>
        <SheetTitle>Are you sure 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>

1.7 KiB Raw Blame History