@jdesignlab/drawer v0.8.2

Drawer

Drawer 컴포넌트는 마치 서랍 처럼 화면 사이드에서 정보를 출력하는 UI 입니다.

Usage

Storybook

<>
  <Button
    onClick={e => {
      setDrawerOpen(true);
    }}
  >
    OPEN Drawer.
  </Button>
  <Drawer
    open={open}
    onClose={() => {
      setDrawerOpen(false);
    }}
    onOpen={() => {
      setDrawerOpen(true);
    }}
  >
    <Drawer.Content>
      <Drawer.Header>Drawer Title</Drawer.Header>
      <Drawer.Body>
        <h3>Body</h3>
        <p>본문내용</p>
        <p>본문내용</p>
        <p>본문내용</p>
      </Drawer.Body>
      <Drawer.Footer>
        <Flex justify="space-around" items="center">
          <div>
            <Button
              color="red-base"
              onClick={e => {
                setDrawerOpen(false);
              }}
            >
              닫기
            </Button>
          </div>
          <div>
            <Button color="blue-base">저장</Button>
          </div>
        </Flex>
      </Drawer.Footer>
    </Drawer.Content>
  </Drawer>
</>

Props

Drawer

Drawer.Header

Drawer.Body

Drawer.Footer