Dropdown 드롭다운

작업 메뉴를 트리거 아래로 접어두고, 마우스 오버나 클릭으로 펼칩니다. 메뉴는 role="menu" 의미를 가지며, 완전한 키보드 탐색 (방향키 / Home / End / Enter / Esc)과 roving tabindex를 지원합니다.

기본 사용법

마우스 오버 / 클릭 트리거와 명령형 사용법

import { LhButton, LhDropdown, LhDropdownItem } from '@lh-ui/react'

export default function Demo() {
  return (
    <LhDropdown
      onCommand={(command) => console.log(command)}
      dropdown={
        <>
          <LhDropdownItem command="new">새로 만들기</LhDropdownItem>
          <LhDropdownItem command="delete" disabled>
            삭제
          </LhDropdownItem>
        </>
      }
    >
      <LhButton>펼치기</LhButton>
    </LhDropdown>
  )
}

프로퍼티	설명	타입	선택 가능한 값	기본값
children	트리거 노드	`ReactNode`	—	—
dropdown	메뉴 콘텐츠 (`LhDropdownItem` 목록, plus의 `#dropdown` 슬롯에 대응)	`ReactNode`	—	—
trigger	트리거 방식	`'hover' \| 'click' \| 'contextmenu'`	—	`'hover'`
placement	표시 위치	`LhDropdownPlacement`	`top` / `bottom` (`-start` / `-end` 포함) 등	`'bottom-start'`
disabled	비활성화	`boolean`	—	`false`
visible	제어 표시/숨김	`boolean`	—	—
defaultVisible	비제어 기본 표시/숨김	`boolean`	—	`false`
hideOnClick	메뉴 항목 클릭 후 자동으로 닫기 여부	`boolean`	—	`true`
maxHeight	메뉴 최대 높이 (초과 시 스크롤)	`string \| number`	—	—
popperClass	메뉴 사용자 지정 클래스명	`string`	—	—
themeVars	컴포넌트 수준 테마 변수	`Record<string, string>`	—	—
sx	빠른 레이아웃 프로퍼티 (트리거에 적용)	`SxProps`	—	—

이벤트	설명	콜백 시그니처	Vue 대응
onCommand	메뉴 항목이 클릭되어 해당 항목의 `command`를 전달	`(command: string \| number) => void`	`command`
onVisibleChange	표시/숨김 변화	`(visible: boolean) => void`	`update:visible`
onClickOutside	메뉴 바깥 클릭 (내부에서는 동시에 닫기)	`() => void`	`click-outside`

DropdownItem Props

프로퍼티	설명	타입	선택 가능한 값	기본값
children	메뉴 항목 콘텐츠	`ReactNode`	—	—
command	명령 식별자, `onCommand`와 함께 전달	`string \| number`	—	—
disabled	비활성화 여부 (클릭에 응답하지 않고 키보드 탐색에도 참여하지 않음)	`boolean`	—	`false`
divided	구분선 표시 여부	`boolean`	—	`false`

DropdownItem 이벤트

이벤트	설명	콜백 시그니처	Vue 대응
onClick	메뉴 항목 클릭 (`onCommand`와 공존 가능)	`() => void`	—

ref

forwardRef<LhDropdownInstance>. LhDropdownInstance는 show() / hide() / toggle() / isVisible을 노출합니다.

키보드 탐색 (APG menu pattern)

메뉴를 열면 포커스가 첫 번째 활성화 항목에 놓입니다. ArrowUp / ArrowDown으로 순환 이동하며 비활성화 항목은 건너뛰고, Home / End으로 양끝으로 바로 이동, Enter / Space로 현재 항목을 활성화, Esc로 닫고 포커스를 트리거에 반환합니다. 앵커 항목만 tabIndex={0}이고 나머지는 -1입니다 (roving tabindex).

슬롯 → 프로퍼티

plus는 #dropdown 슬롯으로 메뉴를 담고, React 측에서는 동명의 dropdown 프로퍼티로 바뀌었습니다. contextmenu 트리거는 브라우저의 기본 컨텍스트 메뉴를 막습니다.

스타일

import '@lh-ui/react/style/dropdown'

기본 사용법​

Dropdown Props​

Dropdown 이벤트​

DropdownItem Props​

DropdownItem 이벤트​

ref​

스타일​

기본 사용법

Dropdown Props

Dropdown 이벤트

DropdownItem Props

DropdownItem 이벤트

ref

스타일