Sheet
화면 가장자리에서 슬라이드되는 패널 컴포넌트입니다. 모바일 드로어, 사이드 패널 등에 활용됩니다.
설치
Terminal
npx @msub-core/ui-cli add sheet
사용법
TSX
import {
Sheet,
SheetTrigger,
SheetContent,
SheetHeader,
SheetBody,
SheetFooter,
SheetTitle,
SheetDescription,
SheetClose,
} from "@msub-core/ui/components/sheet"
function MyComponent() {
return (
<Sheet>
<SheetTrigger asChild>
<Button>Open Sheet</Button>
</SheetTrigger>
<SheetContent>
<SheetHeader>
<SheetTitle>제목</SheetTitle>
<SheetDescription>설명 텍스트</SheetDescription>
</SheetHeader>
<SheetBody>
{/* 콘텐츠 */}
</SheetBody>
<SheetFooter>
<Button>저장</Button>
</SheetFooter>
</SheetContent>
</Sheet>
)
}기본
| Prop | Type | Default | Required | Description |
|---|---|---|---|---|
| open | boolean | - | No | 제어 모드 열림 상태 |
| defaultOpen | boolean | false | No | 기본 열림 상태 |
| onOpenChange | (open: boolean) => void | - | No | 열림 상태 변경 콜백 |
방향
| Prop | Type | Default | Required | Description |
|---|---|---|---|---|
| side | "top" | "bottom" | "left" | "right" | "right" | No | 시트가 나타나는 방향 |