Drawer

화면의 한쪽에서 슬라이드 형태로 나타나는 메뉴나 사이드바를 제공하는 컴포넌트입니다.

import { Drawer } from 'layout-component-hp';

Anatomy

• Drawer: 화면의 한쪽에서 슬라이드 형태로 나타나는 메뉴나 사이드바 컴포넌트입니다.
• Drawer.Backdrop: Drawer 외부 백그라운드. 클릭으로 Drawer를 닫을 수 있습니다.
• Drawer.Content: Drawer 내부 컨텐츠입니다.
• Drawer.CloseButton: Drawer를 닫을 수 있는 버튼입니다.

Usage

Drawer 컴포넌트의 사용법은 다음과 같습니다. 함께 제공하는 useDisclosure 훅과 사용 가능합니다.

결과

라이브 에디터

function DrawerExample() { const { isOpen, onOpen, onClose } = useDisclosure(); return ( <> <button type='button' onClick={onOpen}> Open Drawer </button> <Drawer isOpen={isOpen} onClose={onClose} placement='right'> <Drawer.Backdrop /> <Drawer.Content> <Drawer.CloseButton /> <p>This is Drawer</p> </Drawer.Content> </Drawer> </> ); }

function DrawerExample() {
  const { isOpen, onOpen, onClose } = useDisclosure();

  return (
    <>
      <button type='button' onClick={onOpen}>
        Open Drawer
      </button>
      <Drawer isOpen={isOpen} onClose={onClose} placement='right'>
        <Drawer.Backdrop />
        <Drawer.Content>
          <Drawer.CloseButton />
          <p>This is Drawer</p>
        </Drawer.Content>
      </Drawer>
    </>
  );
}