행동과 오버레이@neumorphism-ui/drawer

Drawer

Base UI Drawer의 swipe gesture와 포커스 관리를 사용합니다. Sheet가 고정된 작업 패널이라면 Drawer는 터치 환경에서 손가락으로 닫거나 방향을 바꿀 수 있는 임시 작업 표면에 적합합니다.

@neumorphism-ui/drawer

Registry JSON

미리보기

설치

npx shadcn@latest add @neumorphism-ui/drawer

CLI가 npm 의존성, base 토큰, utils와 컴포넌트 소스를 순서대로 확인하고 설치합니다.

Registry를 처음 사용한다면 namespace 설정 을 먼저 완료하세요.

사용법

npx shadcn@latest add @neumorphism-ui/drawer @neumorphism-ui/button

Import

"use client";
import {
  Drawer,
  DrawerClose,
  DrawerContent,
  DrawerDescription,
  DrawerFooter,
  DrawerHeader,
  DrawerTitle,
  DrawerTrigger,
} from "@/components/ui/drawer";
import { Button } from "@/components/ui/button";

Example

export default function Example() {
  return <Drawer swipeDirection="down">
    <DrawerTrigger render={<Button />}>빠른 설정</DrawerTrigger>
    <DrawerContent>
      <DrawerHeader>
        <DrawerTitle>빠른 설정</DrawerTitle>
        <DrawerDescription>화면을 떠나지 않고 자주 쓰는 옵션을 조절합니다.</DrawerDescription>
      </DrawerHeader>
      <div className="grid gap-3 px-5 py-4"><p>알림과 표시 옵션을 이 영역에 배치할 수 있습니다.</p></div>
      <DrawerFooter><DrawerClose render={<Button variant="primary" />}>완료</DrawerClose></DrawerFooter>
    </DrawerContent>
  </Drawer>;
}

API 레퍼런스

컴포넌트	속성	타입	기본값	설명
`Drawer`	`swipeDirection`	`"down" \| "up" \| "left" \| "right"`	`"down"`	패널이 열리고 닫히는 방향과 swipe 방향을 지정합니다.
`Drawer`	`open / onOpenChange`	`boolean / (open: boolean) => void`	`—`	Drawer의 controlled 열림 상태를 관리합니다.
`Drawer`	`snapPoints`	`number[]`	`—`	필요할 때 중간 정지 지점을 구성합니다.
`DrawerTrigger`	`render`	`ReactElement`	`—`	기존 Button이나 다른 요소를 trigger로 합성합니다.
`DrawerContent`	`className`	`string \| (state) => string`	`—`	기본 방향·gesture 동작을 유지하면서 패널 스타일을 확장합니다.

미리보기

설치

사용법

Import

Example

API 레퍼런스

접근성