Sheet

화면 가장자리 패널에서 설정, 상세 정보, 편집 작업을 처리할 때 사용합니다.

미리보기

프로필 이름 편집

제어 상태의 필수 이름 입력과 닫기 버튼을 갖춘 프로필 설정 패널입니다.

미리보기를 불러오는 중입니다.

설치

Registry를 처음 사용한다면 기본 설정과 공통 스타일 설치 을 먼저 완료하세요.

npx shadcn@latest add @neumorphism-ui/sheet

공통 base를 한 번 설치한 뒤 CLI로 필요한 컴포넌트와 의존성을 추가합니다.

프로필 이름 편집

npx shadcn@latest add @neumorphism-ui/button @neumorphism-ui/sheet @neumorphism-ui/field

Registry JSON

사용법

SheetTrigger, SheetContent, 제목과 설명을 구성하세요. 필요한 필드를 배치하고 닫기는 SheetClose로, 저장 처리는 앱 상태와 연결합니다.

"use client";

import { Button } from "@/components/ui/button";
import { Sheet, SheetContent, SheetDescription, SheetTitle, SheetTrigger } from "@/components/ui/sheet";

export default function Example() {
  return (
    <Sheet>
      <SheetTrigger render={<Button />}>Workspace details</SheetTrigger>
      <SheetContent>
        <SheetTitle>Team workspace</SheetTitle>
        <SheetDescription>Review this workspace without leaving the page.</SheetDescription>
      </SheetContent>
    </Sheet>
  );
}

API 레퍼런스

화면 가장자리에서 여는 스크롤 가능한 작업 패널. SheetTitle과 설명을 포함하세요. 작은 화면에서도 닫기와 마지막 필드에 도달할 수 있어야 합니다.

컴포넌트	속성	타입	기본값	설명
`SheetContent`	`side`	`"left" \| "right" \| "top" \| "bottom"`	`—`	화면 경계를 고려한 패널 위치와 간격입니다.
`SheetContent`	`closeLabel`	`string`	`—`	닫기 버튼의 접근 가능한 이름입니다.
`Sheet`	`open / onOpenChange`	`Dialog.Root.Props`	`—`	제어 상태 또는 최초 상태를 지정합니다.

미리보기

프로필 이름 편집

설치

사용법

API 레퍼런스

접근성