Drawer

Open

계약

Overview

Machine-readable contract from Component Spec.

component: drawerexport: Drawerversion: 1attributes: data-refineui=drawer

Anatomy

Part	data-refineui
root	drawer

Variants

Axis	Values
type	overlay, inline
size	sm, md, lg

States

Scope	Category	Values
component	component	data-state: open, closed
component	environment	forced-colors, dir
drawer	component	data-state: open, closed

Accessibility

Slot	Element	Role
drawer	div	dialog

Keyboard

Key	Action	Native
Escape	close	—

Focus

Section	Property	Value
visual	required	true
visual	selector	:focus-visible
behavior	trap	true
behavior	initial	first-focusable
behavior	return	trigger

Layout

Property	Value
direction	logical
rtl	true

설치

npmyarnpnpmbun

npm install @refineui/react @refineui/tokens

사용법

import {
  Drawer,
  DrawerTrigger,
  DrawerContent,
  DrawerHeader,
  DrawerTitle,
  DrawerDescription,
  DrawerBody,
  DrawerFooter,
  DrawerClose,
  Button
} from "@refineui/react";

<Drawer>
  <DrawerTrigger asChild>
    <Button>Open Drawer</Button>
  </DrawerTrigger>
  <DrawerContent>
    <DrawerHeader>
      <DrawerTitle>Settings</DrawerTitle>
      <DrawerDescription>Adjust your preferences</DrawerDescription>
    </DrawerHeader>
    <DrawerBody>
      {/* Drawer content */}
    </DrawerBody>
    <DrawerFooter>
      <DrawerClose>Close</DrawerClose>
    </DrawerFooter>
  </DrawerContent>
</Drawer>

<Drawer type="inline" placement="left" size="md" showFooter>
  {/* Drawer content */}
</Drawer>

API 레퍼런스

Drawer

Prop	Default	Type	Description
open	—	boolean	제어형 열림 상태.
defaultOpen	—	boolean	비제어형 초기 열림 상태.
onOpenChange	—	(open: boolean) => void	열림 상태 변경 시 이벤트 핸들러.
type	"overlay"	"overlay" | "inline"	Drawer 표시 타입.
placement	"right"	"left" | "right"	화면 쪽.
size	"md"	"sm" | "md" | "lg"	Drawer 너비.
showFooter	false	boolean	푸터 섹션을 표시합니다.

DrawerTrigger

트리거 요소(보통 Button).

DrawerContent

Drawer 패널 컨테이너.

DrawerHeader

Prop	Default	Type	Description
showClose	true	boolean	닫기 버튼을 표시합니다.
actions	—	ReactNode	추가 헤더 액션.

DrawerTitle

Drawer 제목 요소.

DrawerDescription

Drawer 설명 텍스트.

DrawerBody

스크롤 가능한 콘텐츠 영역.

DrawerFooter

Prop	Default	Type	Description
state	—	"icons" | "single" | "split"	푸터 버튼 레이아웃.

DrawerClose

닫기 버튼.