컴포넌트
Popover Menu
트리거 버튼 옆에 화살표와 함께 떠오르는 팝오버 메뉴로, 외부 클릭·ESC로 닫히고 방향키로 항목을 이동한다.
- 분류
- 컴포넌트
- 난이도
- medium
- 변형
- TS-TW
설치
npx shadcn@latest add https://gasan.ai.kr/tools/effect/r/PopoverMenu-TS-TW
Props
| 이름 | 타입 | 기본값 | 설명 |
|---|---|---|---|
| label | string | "메뉴 열기" | 트리거 버튼에 표시할 텍스트 |
| items | PopoverMenuItem[] | 기본 5개 항목 | 팝오버에 표시할 메뉴 항목 목록(id/label/icon/disabled). 미지정 시 기본 데이터 사용 |
| side | "top" | "bottom" | "left" | "right" | "bottom" | 팝오버가 트리거 기준으로 뜨는 방향(화살표 방향도 함께 변경) |
| accentColor | string | "#C084FC" | 호버/포커스/보더/그림자 강조 색상 |
| duration | number | 160 | 등장 트랜지션 지속 시간(ms). reduced-motion 시 0으로 처리 |
| onSelect | (item: PopoverMenuItem, index: number) => void | undefined | 항목 선택 시 호출되는 콜백 |