Sheet

Dialog를 확장해 화면의 주요 콘텐츠를 보완하는 콘텐츠를 표시합니다.

examples/krds/sheet-demo.tsx

import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Label } from "@/components/ui/label"

설치

pnpm dlx shadcn@latest add https://krdscn.gwlee.kr/r/sheet.json

사용법

import {
  Sheet,
  SheetClose,
  SheetContent,
  SheetDescription,
  SheetFooter,
  SheetHeader,
  SheetTitle,
  SheetTrigger,
} from "@/components/ui/sheet"

<Sheet>
  <SheetTrigger>Open</SheetTrigger>
  <SheetContent>
    <SheetHeader>
      <SheetTitle>Are you absolutely sure?</SheetTitle>
      <SheetDescription>This action cannot be undone.</SheetDescription>
    </SheetHeader>
  </SheetContent>
</Sheet>

구성

다음 조합으로 Sheet:

Sheet
├── SheetTrigger
└── SheetContent
    ├── SheetHeader
    │   ├── SheetTitle
    │   └── SheetDescription
    └── SheetFooter

예제

Side

SheetContent의 side prop으로 Sheet가 나타날 화면 가장자리를 지정합니다. 값은 top, right, bottom, left입니다.

examples/krds/sheet-side.tsx

import { Button } from "@/components/ui/button"
import {
  Sheet,

No Close Button

Use showCloseButton={false} on SheetContent to hide the close button.

examples/krds/sheet-no-close-button.tsx

import { Button } from "@/components/ui/button"
import {
  Sheet,

RTL

RTL 지원을 활성화하려면 RTL 설정 가이드를 참고하세요.

examples/krds/sheet-rtl.tsx

"use client"

import {

API 참조

Radix UI Dialog 문서를 참고하세요.

Skip Link Sidebar