Soon UI Design

Layout
Navigation
Input
Select
Display
Feedback

Drawer

화면 가장자리에서 슬라이드되어 나오는 패널 컴포넌트입니다.

import { Drawer } from 'sud-ui';

GitHub에서 소스코드 보기

사용할 때

사이드 메뉴나 네비게이션을 표시할 때.

추가 정보나 세부 내용을 보여줄 때.

모달보다 덜 방해되는 방식으로 콘텐츠를 표시할 때.

사용예제

Basic Usage

기본적인 사용방법입니다.

import { useState } from "react";
import { Drawer, Button } from "sud-ui";

export default function Example() {
  const [open, setOpen] = useState(false);
  return (
    <div>
      <Button colorType="primary" onClick={() => setOpen(true)}>Open Drawer</Button>
      <Drawer open={open} onClose={() => setOpen(false)} title="Drawer">
        <div>Drawer Content</div>
      </Drawer>
    </div>
  );
}

Position

드로어의 위치를 설정할 수 있습니다.

import { useState } from "react";
import { Drawer, Button, Segmented } from "sud-ui";

export default function Example() {
  const [open, setOpen] = useState(false);
  const [placement, setPlacement] = useState("right");
  return (
    <div>
      <div>
        <Segmented
          options={["left", "right", "top", "bottom"]}
          value={placement}
          onChange={(value) => setPlacement(value)}
          style={{ marginBottom: "20px" }}
        />
      </div>
      <Button colorType="primary" onClick={() => setOpen(true)}>
        Open Drawer
      </Button>
      <Drawer
        open={open}
        onClose={() => setOpen(false)}
        title="Drawer"
        placement={placement}
      >
        <div>Drawer Content</div>
      </Drawer>
    </div>
  );
}

Footer

footer를 설정할 수 있습니다.

import { useState } from "react";
import { Drawer, Button } from "sud-ui";

export default function Example() {
  const [open, setOpen] = useState(false);
  return (
    <div>
      <Button colorType="primary" onClick={() => setOpen(true)}>
        Open Drawer
      </Button>
      <Drawer
        open={open}
        onClose={() => setOpen(false)}
        title="Drawer"
        footer={
          <div className="flex justify-end gap-[10px]">
            <Button onClick={() => setOpen(false)}>Cancel</Button>
            <Button colorType="primary" onClick={() => setOpen(false)}>
              Confirm
            </Button>
          </div>
        }
      >
        <div>Drawer Content</div>
      </Drawer>
    </div>
  );
}

Size

드로어의 크기를 설정할 수 있습니다.

import { useState } from "react";
import { Drawer, Button } from "sud-ui";

export default function Example() {
  const [open, setOpen] = useState(false);
  return (
    <div>
      <Button colorType="primary" onClick={() => setOpen(true)}>Open 50% Drawer</Button>
      <Drawer open={open} onClose={() => setOpen(false)} title="Wide Drawer" width={"50%"}>
        <div>width=50% Drawer</div>
      </Drawer>
    </div>
  );
}

Shape

드로어의 모서리 형태를 설정할 수 있습니다.

import { useState } from "react";
import { Drawer, Button } from "sud-ui";

export default function Example() {
  const [open, setOpen] = useState(false);
  return (
    <div>
      <Button colorType="primary" onClick={() => setOpen(true)}>Open Drawer</Button>
      <Drawer open={open} onClose={() => setOpen(false)} title="Drawer" shape="square">
        <div>shape=square Drawer</div>
      </Drawer>
    </div>
  );
}

사용 방법

컴포넌트의 props를 설정하는 방법입니다.

open

Drawer의 열림/닫힘 상태 (true/false)

boolean

false

onClose

Drawer를 닫는 콜백 함수 () => void

() => void

onEsc

Escape 키로 Drawer를 닫을지 여부

boolean

true

title

Drawer 상단에 표시되는 제목

ReactNode

children

Drawer 내부에 표시할 내용

ReactNode

footer

Drawer 하단에 표시할 내용

ReactNode

placement

Drawer가 나타나는 위치 (left, right, top, bottom)

left

right

top

bottom

right

width

Drawer의 너비 (px 또는 %)

number | string

300

height

Drawer의 높이 (placement가 top/bottom일 때)

number | string

300

divider

타이틀/푸터 구분선 표시 여부

boolean

true

dividerColor

구분선 색상(palette값 또는 HEX code)

string

colorType

색상 타입

default

primary

success

warning

danger

info

red

rose

coral

orange

volcano

apricot

yellow

gold

amber

green

lime

mint

blue

sky

cerulean

indigo

cobalt

navy

purple

plum

orchid

forest

sage

warm-gray

cool-gray

neutral

text

ghost

default

background

Drawer 배경색(palette값 또는 HEX code)

string

color

Drawer 텍스트 색상(palette값 또는 HEX code)

string

border

테두리 표시 여부

boolean

true

borderColor

테두리 색상(palette값 또는 HEX code)

string

borderType

테두리 스타일

solid

dashed

dotted

double

groove

ridge

inset

outset

none

solid

borderWeight

테두리 두께

number

shape

모서리 형태

square

circle

rounded

capsule

rounded

shadow

그림자 크기

none

className

추가 클래스명

string

style

추가 스타일

React.CSSProperties

{}

ariaLabel

접근성을 위한 레이블

string

ariaDescribedby

설명을 제공하는 요소의 id

string

개인정보 처리방침

서비스 약관