Soon UI Design

Layout
Navigation
Input
Select
Display
Feedback

Dropdown

드롭다운 목록을 표시할 수 있습니다.

import { Dropdown } from 'sud-ui';

GitHub에서 소스코드 보기

사용할 때

사용자가 선택할 수 있는 옵션 목록을 표시할 때

공간을 효율적으로 사용하면서 여러 옵션을 제공해야 할 때

메뉴, 필터, 정렬 등의 기능을 구현할 때

사용자 인터페이스에서 추가 작업이나 옵션을 제공할 때

폼이나 설정에서 여러 선택지를 제공할 때

사용예제

Basic Usage

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

import { Dropdown, toast, Button } from "sud-ui";
import { AngleDown } from "sud-icons";

const items = [
  {
    key: "menu1",
    label: "Menu 1",
    onClick: () => toast.info("Menu 1 clicked")
  },
  {
    key: "menu2",
    label: "Menu 2",
    onClick: () => toast.info("Menu 2 clicked")
  }
];

export default function Example() {
  return (
    <Dropdown items={items}>
      <Button icon={<AngleDown size={16} />} iconPosition="right">
        Hover me!
      </Button>
    </Dropdown>
  );
}

Disabled

드롭다운을 비활성화할 수 있습니다.

import { Dropdown, toast, Button } from "sud-ui";
import { AngleDown } from "sud-icons";

const items = [
  {
    key: "menu1",
    label: "Menu 1",
    onClick: () => toast.info("Menu 1 clicked")
  },
  {
    key: "menu2",
    label: "Menu 2",
    onClick: () => toast.info("Menu 2 clicked")
  }
];

export default function Example() {
  return (
    <div>
      <Dropdown items={items} disabled>
        <Button icon={<AngleDown size={16} />} iconPosition="right" disabled>
          Disabled
        </Button>
      </Dropdown>
    </div>
  );
}

Placement

popupPlacement prop으로 드롭다운 메뉴의 위치를 지정할 수 있습니다. (top, bottom, left, right, top-left, top-right, bottom-left, bottom-right, left-top, left-bottom, right-top, right-bottom)

import { Dropdown, toast, Button } from "sud-ui";
import { AngleDown, AngleUp, AngleLeft, AngleRight } from "sud-icons";

const items = [
  {
    key: "menu1",
    label: "Menu 1",
    onClick: () => toast.info("Menu 1 clicked")
  },
  {
    key: "menu2",
    label: "Menu 2",
    onClick: () => toast.info("Menu 2 clicked")
  }
];

const placementItems = [
  { placement: "top", icon: <AngleUp size={16} /> },
  { placement: "bottom", icon: <AngleDown size={16} /> },
  { placement: "left", icon: <AngleLeft size={16} /> },
  { placement: "right", icon: <AngleRight size={16} /> },
  { placement: "top-left", icon: <AngleUp size={16} /> },
  { placement: "top-right", icon: <AngleUp size={16} /> },
  { placement: "bottom-left", icon: <AngleDown size={16} /> },
  { placement: "bottom-right", icon: <AngleDown size={16} /> },
  { placement: "left-top", icon: <AngleLeft size={16} /> },
  { placement: "left-bottom", icon: <AngleLeft size={16} /> },
  { placement: "right-top", icon: <AngleRight size={16} /> },
  { placement: "right-bottom", icon: <AngleRight size={16} /> }
];

export default function Example() {
  return (
    <div style={{ display: "flex", gap: "8px", flexWrap: "wrap" }}>
      {placementItems.map((item) => (
        <Dropdown
          key={item.placement}
          items={items}
          popupPlacement={item.placement}
        >
          <Button icon={item.icon} iconPosition="right">
            {item.placement}
          </Button>
        </Dropdown>
      ))}
    </div>
  );
}

Trigger

드롭다운의 트리거를 설정할 수 있습니다.

import { Dropdown, toast, Button } from "sud-ui";
import { AngleDown } from "sud-icons";

const items = [
  {
    key: "menu1",
    label: "Menu 1",
    onClick: () => toast.info("Menu 1 clicked")
  },
  {
    key: "menu2",
    label: "Menu 2",
    onClick: () => toast.info("Menu 2 clicked")
  }
];

export default function Example() {
  return (
    <div className="flex flex-col gap-[20px]">
      <div>
        <Dropdown items={items} trigger="click">
          <Button icon={<AngleDown size={16} />} iconPosition="right">
            Click me!
          </Button>
        </Dropdown>
      </div>
      <div>
        <Dropdown items={items} trigger="contextMenu">
          <Button icon={<AngleDown size={16} />} iconPosition="right">
            Right Click me!
          </Button>
        </Dropdown>
      </div>
    </div>
  );
}

Color Customization

드롭다운의 색상을 커스텀할 수 있습니다.

import { Dropdown, toast, Button } from "sud-ui";
import { AngleDown } from "sud-icons";

const items = [
  {
    key: "menu1",
    label: "Menu 1",
    onClick: () => toast.info("Menu 1 clicked")
  },
  {
    key: "menu2",
    label: "Menu 2",
    onClick: () => toast.info("Menu 2 clicked")
  }
];

export default function Example() {
  return (
    <div style={{ display: 'flex', gap: '8px' }}>
      <Dropdown items={items} colorType="default">
        <Button icon={<AngleDown size={16} />} iconPosition="right">
          Default
        </Button>
      </Dropdown>
      <Dropdown items={items} colorType="primary">
        <Button icon={<AngleDown size={16} />} iconPosition="right" colorType="primary">
          Primary
        </Button>
      </Dropdown>
    </div>
  );
}

사용 방법

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

children

드롭다운을 트리거하는 요소 (PopupBase)

ReactNode

title

드롭다운 메뉴의 제목 (PopupBase)

string

trigger

드롭다운을 여는 방식 (PopupBase)

hover

click

contextMenu

hover

open

드롭다운의 열림 상태 (PopupBase, 제어용)

boolean

defaultOpen

드롭다운의 기본 열림 상태 (PopupBase)

boolean

false

onOpenChange

드롭다운 열림 상태 변경 시 호출되는 콜백 (open: boolean) => void

(open: boolean) => void

closeOnClick

메뉴 항목 클릭 시 드롭다운 닫기 여부 (PopupBase)

boolean

false

disabled

드롭다운 비활성화 여부 (PopupBase)

boolean

false

items

드롭다운 메뉴 항목 배열 (Menu)

Array<MenuItem>

[]

expandType

메뉴 확장 방식 (Menu)

popover

accordion

popover

popupPlacement

드롭다운 팝업의 위치 (PopupBase) (top, bottom, left, right, top-left, top-right, bottom-left, bottom-right, left-top, left-bottom, right-top, right-bottom)

top

bottom

right

left

top-left

top-right

bottom-left

bottom-right

left-top

left-bottom

right-top

right-bottom

bottom

placement

메뉴의 위치 배열 (Menu) (top, bottom, left, right, top-left, top-right, bottom-left, bottom-right, left-top, left-bottom, right-top, right-bottom)

[

top

bottom

right

left

top-left

top-right

bottom-left

bottom-right

left-top

left-bottom

right-top

right-bottom

]

[

right

]

colorType

색상 타입 (PopupBase, Menu)

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

background

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

string

color

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

string

border

테두리 표시 여부 (PopupBase)

boolean

borderColor

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

string

borderType

테두리 스타일 (PopupBase)

solid

dashed

dotted

double

groove

ridge

inset

outset

none

borderWeight

테두리 두께 (PopupBase)

number

shape

모서리 형태 (PopupBase)

square

circle

rounded

capsule

rounded

shadow

그림자 크기 (PopupBase)

none

className

추가 클래스명 (PopupBase)

string

style

추가 스타일 (PopupBase)

React.CSSProperties

{}

개인정보 처리방침

서비스 약관