Overlay
Drawer

Drawer

  • Drawer는 화면 가장자리에서 슬라이드되는 패널입니다.
  • 사용자가 현재 페이지를 벗어나지 않고 작업하거나 세부 정보를 확인해야 할 때 유용합니다.

Basic usage

() => {
  const [isOpen, setIsOpen] = useState(false);
 
  const handleClose = () => {
    setIsOpen(() => false);
  };
 
  return (
    <Drawer isOpen={isOpen} onClose={handleClose}>
      <h1>Drawer</h1>
    </Drawer>
  );
};

Placement

() => {
  const [isOpen, setIsOpen] = useState(false);
  const placement = 'top'; // 'top' | 'right' | 'bottom' | 'left'
 
  const handleClose = () => {
    setIsOpen(() => false);
  };
 
  return (
    <Drawer isOpen={isOpen} onClose={handleClose} placement={placement}>
      <h1>Drawer</h1>
    </Drawer>
  );
};

Size

() => {
  const [isOpen, setIsOpen] = useState(false);
  const size = 'large'; // 'default' | 'large'
 
  const handleClose = () => {
    setIsOpen(() => false);
  };
 
  return (
    <Drawer isOpen={isOpen} onClose={handleClose} size={size}>
      <h1>Drawer</h1>
    </Drawer>
  );
};

Customize transition duration

() => {
  const [isOpen, setIsOpen] = useState(false);
  const transitionDurationMS = 500;
 
  const handleClose = () => {
    setIsOpen(() => false);
  };
 
  return (
    <Drawer
      isOpen={isOpen}
      onClose={handleClose}
      transitionDurationMS={transitionDurationMS}
    >
      <h1>Drawer</h1>
    </Drawer>
  );
};

Props

children

Drawer 하위에 렌더링될 컴포넌트 (Header, 내용, 닫기 버튼, ...)

  • Type : ReactNode

isOpen

Drawer의 화면 표시 여부

  • Type : boolean
  • default: false

onClose

Drawer가 닫힐 때 실행될 함수

  • Type : () => void

placement (optional)

Drawer가 열릴 위치

  • Type : 'top' | 'right' | 'bottom' | 'left'
  • Default : 'right'

size (optional)

Drawer의 크기 (너비 / 높이)

  • Type : 'default' | 'large'
  • Default : 'default'

transitionDurationMS (optional)

Drawer가 열고 닫힐 때의 애니메이션 주기

  • Type : number
  • Default : 300

zIndex (optional)

Drawer의 z-index 속성 값

  • Type : number
  • Default : 1000

css (optional)

이외에 적용할 속성들이 담긴 스타일 객체

  • Type : CSSInterpolation
Overlay