Sheet

시트 컴포넌트는 화면 측면에서 슬라이드되는 패널입니다.

기본 사용법

import {
  Sheet,
  SheetTrigger,
  SheetContent,
  SheetHeader,
  SheetTitle,
} from '@aift/ui/Sheet';

export default function Preview() {
  return (
    <div className="max-w-md">
      <Sheet>
        <SheetTrigger>열기</SheetTrigger>
        <SheetContent>
          <SheetHeader>
            <SheetTitle>제목</SheetTitle>
          </SheetHeader>
          시트 콘텐츠
        </SheetContent>
      </Sheet>
    </div>
  );
}

import {  Sheet,  SheetTrigger,  SheetContent,  SheetHeader,  SheetTitle,} from '@aift/ui/Sheet';export default function Preview() {  return (    <div className="max-w-md">      <Sheet>        <SheetTrigger>열기</SheetTrigger>        <SheetContent>          <SheetHeader>            <SheetTitle>제목</SheetTitle>          </SheetHeader>          시트 콘텐츠        </SheetContent>      </Sheet>    </div>  );}

Props

Sheet 컴포넌트는 Radix UI의 Dialog를 기반으로 하며, 여러 하위 컴포넌트로 구성됩니다.

Sheet: 루트 컴포넌트
SheetTrigger: 시트를 여는 트리거
SheetContent: 시트 콘텐츠
SheetHeader: 헤더 영역
SheetTitle: 제목
SheetDescription: 설명
SheetFooter: 푸터 영역
SheetClose: 닫기 버튼

Sheet

Sheet

기본 사용법

Props

On this page