Dropdown

@hua-labs/ui

v1.1.0

자동 위치 조정, 외부 클릭 처리, 커스터마이징 가능한 위치를 지원하는 드롭다운 메뉴 컴포넌트입니다.

설치

bash

npm install @hua-labs/hua

Import

tsx

import { Dropdown, DropdownItem, DropdownSeparator, DropdownLabel } from "@hua-labs/hua";

@hua-labs/ui의 UI 컴포넌트를 @hua-labs/hua에서 통합 제공합니다.

UI 컴포넌트, 모션 훅, i18n을 하나의 패키지로 사용할 수 있습니다.

라이브 데모

기본 드롭다운

아이콘 트리거

라벨 그룹

위치 옵션

Align

Arrow

제어 모드

상태: 닫힘

Props

이름	타입	기본값	설명
`trigger*`	`React.ReactNode`	-	드롭다운을 열기 위한 트리거 요소
`children*`	`React.ReactNode`	-	드롭다운 내용
`open`	`boolean`	-	제어 모드 열림 상태
`onOpenChange`	`(open: boolean) => void`	-	열림 상태 변경 시 콜백
`placement`	`"top" \| "bottom" \| "left" \| "right"`	`"bottom"`	드롭다운 표시 위치
`align`	`"start" \| "center" \| "end"`	`"start"`	드롭다운 정렬
`offset`	`number`	`8`	트리거와 드롭다운 사이 간격 (px)
`disabled`	`boolean`	`false`	드롭다운 비활성화
`showArrow`	`boolean`	`true`	화살표 표시 여부

코드 예시

기본 사용법tsx

1// Via framework (recommended)
2import { Dropdown, DropdownItem } from '@hua-labs/ui/overlay';
3import { Button } from '@hua-labs/ui';
4// Or direct import
5// import { Dropdown, DropdownItem } from '@hua-labs/ui/overlay';
6 
7<Dropdown trigger={<Button>Menu</Button>}>
8  <DropdownItem onClick={() => console.log('Profile')}>
9    Profile
10  </DropdownItem>
11  <DropdownItem onClick={() => console.log('Settings')}>
12    Settings
13  </DropdownItem>
14</Dropdown>

아이콘과 구분자tsx

1<Dropdown trigger={<Button variant="ghost"><DotsThree /></Button>}>
2  <DropdownItem icon={<Pencil />}>Edit</DropdownItem>
3  <DropdownItem icon={<Copy />}>Duplicate</DropdownItem>
4  <DropdownSeparator />
5  <DropdownItem icon={<Trash />} variant="destructive">
6    Delete
7  </DropdownItem>
8</Dropdown>

라벨 그룹tsx

1<Dropdown trigger={<Button>Actions</Button>}>
2  <DropdownLabel>Account</DropdownLabel>
3  <DropdownItem icon={<User />}>Profile</DropdownItem>
4  <DropdownItem icon={<Gear />}>Settings</DropdownItem>
5  <DropdownSeparator />
6  <DropdownItem icon={<SignOut />} variant="destructive">
7    Sign out
8  </DropdownItem>
9</Dropdown>

위치 변경tsx

1<Dropdown trigger={<Button>Top</Button>} placement="top">
2  <DropdownItem>Item 1</DropdownItem>
3  <DropdownItem>Item 2</DropdownItem>
4</Dropdown>
5 
6<Dropdown trigger={<Button>Right</Button>} placement="right">
7  <DropdownItem>Item 1</DropdownItem>
8  <DropdownItem>Item 2</DropdownItem>
9</Dropdown>

하위 컴포넌트

DropdownItem - 드롭다운 항목 (icon, variant props)
DropdownSeparator - 구분선
DropdownLabel - 그룹 라벨
DropdownMenu - 메뉴 컨테이너
DropdownGroup - 항목 그룹

DropdownItem Variants

• default - 기본 스타일
• destructive - 삭제/위험한 액션용 빨간색
• disabled - 비활성화 상태

접근성

•외부 클릭: 외부 클릭 시 드롭다운 닫힘
•뷰포트 감지: 뷰포트 내에 있도록 위치 자동 조정
•포커스 관리: 키보드로 항목 포커스 가능

Popover Drawer