DropdownMenu

드롭다운 메뉴 컴포넌트는 클릭 시 메뉴를 표시하는 컴포넌트입니다.

기본 사용법

import {
  DropdownMenu,
  DropdownMenuTrigger,
  DropdownMenuContent,
  DropdownMenuItem,
} from '@aift/ui/DropdownMenu';

export default function Preview() {
  return (
    <div className="max-w-md">
      <DropdownMenu>
        <DropdownMenuTrigger>메뉴</DropdownMenuTrigger>
        <DropdownMenuContent>
          <DropdownMenuItem>항목 1</DropdownMenuItem>
          <DropdownMenuItem>항목 2</DropdownMenuItem>
        </DropdownMenuContent>
      </DropdownMenu>
    </div>
  );
}

import {  DropdownMenu,  DropdownMenuTrigger,  DropdownMenuContent,  DropdownMenuItem,} from '@aift/ui/DropdownMenu';export default function Preview() {  return (    <div className="max-w-md">      <DropdownMenu>        <DropdownMenuTrigger>메뉴</DropdownMenuTrigger>        <DropdownMenuContent>          <DropdownMenuItem>항목 1</DropdownMenuItem>          <DropdownMenuItem>항목 2</DropdownMenuItem>        </DropdownMenuContent>      </DropdownMenu>    </div>  );}

Props

DropdownMenu 컴포넌트는 Radix UI의 DropdownMenu를 기반으로 하며, 여러 하위 컴포넌트로 구성됩니다.

DropdownMenu: 루트 컴포넌트
DropdownMenuTrigger: 트리거 버튼
DropdownMenuContent: 드롭다운 콘텐츠
DropdownMenuItem: 메뉴 항목
DropdownMenuLabel: 메뉴 레이블
DropdownMenuSeparator: 구분선
DropdownMenuCheckboxItem: 체크박스 항목
DropdownMenuRadioItem: 라디오 항목
DropdownMenuGroup: 항목 그룹

DropdownMenu

DropdownMenu

기본 사용법

Props

On this page