Drawer

Drawer (드로어)

화면의 한쪽에서 콘텐츠가 슬라이드되어 들어오는 패널을 렌더링할 때 사용하는 컴포넌트예요. 사이드 메뉴나 필터 패널 같은 곳에 많이 쓰여요.

출처: 문서

본문

사용법 (Usage)

import { Drawer } from "@chakra-ui/react"

<Drawer.Root>
  <Drawer.Backdrop />
  <Drawer.Trigger />
  <Drawer.Positioner>
    <Drawer.Content>
      <Drawer.CloseTrigger />
      <Drawer.Header>
        <Drawer.Title />
      </Drawer.Header>
      <Drawer.Body />
      <Drawer.Footer />
    </Drawer.Content>
  </Drawer.Positioner>
</Drawer.Root>

예제 (Examples)

제어 (Controlled)

open과 onOpenChange prop을 사용해서 드로어 컴포넌트를 제어할 수 있어요.

| 예제 (drawer-controlled) |

크기 (Sizes)

size prop을 사용해서 드로어 컴포넌트의 크기를 바꿀 수 있어요.

| 예제 (drawer-with-sizes) |

컨텍스트 (Context)

DrawerContext 컴포넌트를 사용해서 드로어 바깥에서 드로어의 상태와 메서드에 접근할 수 있어요.

| 예제 (drawer-with-context) |

오프셋 (Offset)

Drawer.Positioner에 CSS padding 속성을 사용해서 드로어 컴포넌트의 오프셋을 조정할 수 있어요.

| 예제 (drawer-with-offset) |

배치 (Placement)

placement prop을 사용해서 드로어 컴포넌트의 위치를 바꿀 수 있어요.

| 예제 (drawer-with-placement) |

초기 포커스 (Initial Focus)

initialFocusEl prop을 사용해서 드로어 컴포넌트의 초기 포커스를 설정할 수 있어요.

| 예제 (drawer-with-initial-focus) |

initialFocusEl이 없으면 포커스가 data-autofocus로 표시된 첫 번째 요소로 이동하고, 그런 요소가 없다면 data-no-autofocus로 표시되지 않은 첫 번째 탭 가능(tabbable) 요소로 이동해요.

<Input data-autofocus />

커스텀 컨테이너 (Custom Container)

드로어 컴포넌트를 커스텀 컨테이너에 렌더링하는 예시예요.

드로어 바깥과 상호작용할 때 드로어가 닫히지 않도록 closeOnInteractOutside를 false로 설정하는 것을 고려해 보세요.

| 예제 (drawer-with-custom-container) |

헤더 액션 (Header Actions)

드로어 컴포넌트의 헤더에 액션을 렌더링하는 예시예요.

| 예제 (drawer-with-header-actions) |

조건부 변형을 사용한 드로어 (Drawer with conditional variants)

다양한 브레이크포인트에 따라 변형(variant)을 바꾸는 예시예요.

이 예제는 mdDown 브레이크포인트를 사용해서 더 작은 화면에서 드로어의 배치를 바꿔요. 두 조건 모두 CSS 미디어 쿼리로 변환되기 때문에 base 스타일 병합 문제를 피할 수 있어서 이 방식을 권장해요.

꼭 base 조건을 사용하고 싶다면 해당 크기도 함께 정의해야 해요. 예를 들면: <Drawer.Root placement={{ base: "bottom", md: "end" }} size={{ base: "xs", md: "md" }}>

| 예제 (drawer-with-conditional-variants) |

접근성 문제 때문에 논모달 드로어는 권장하지 않아요. 꼭 필요하다면 다음과 같이 할 수 있어요.

modal prop을 false로 설정
Drawer.Positioner 컴포넌트에 pointerEvents를 none으로 설정
(선택 사항) closeOnInteractOutside prop을 false로 설정

| 예제 (drawer-non-modal) |

Props

Root

| PropTable (Drawer / Root) |