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>  );}

CheckboxItem

'use client';

import {
  DropdownMenu,
  DropdownMenuCheckboxItem,
  DropdownMenuContent,
  DropdownMenuTrigger,
} from '@aift/ui/DropdownMenu';
import { useState } from 'react';

export default function CheckboxItem() {
  const [checked1, setChecked1] = useState(false);
  const [checked2, setChecked2] = useState(false);
  return (
    <div className="max-w-md">
      <DropdownMenu>
        <DropdownMenuTrigger>메뉴</DropdownMenuTrigger>
        <DropdownMenuContent>
          <DropdownMenuCheckboxItem
            checked={checked1}
            onSelect={() => setChecked1(!checked1)}
          >
            항목 1
          </DropdownMenuCheckboxItem>
          <DropdownMenuCheckboxItem
            checked={checked2}
            onSelect={() => setChecked2(!checked2)}
          >
            항목 2
          </DropdownMenuCheckboxItem>
        </DropdownMenuContent>
      </DropdownMenu>
    </div>
  );
}

'use client';import {  DropdownMenu,  DropdownMenuCheckboxItem,  DropdownMenuContent,  DropdownMenuTrigger,} from '@aift/ui/DropdownMenu';import { useState } from 'react';export default function CheckboxItem() {  const [checked1, setChecked1] = useState(false);  const [checked2, setChecked2] = useState(false);  return (    <div className="max-w-md">      <DropdownMenu>        <DropdownMenuTrigger>메뉴</DropdownMenuTrigger>        <DropdownMenuContent>          <DropdownMenuCheckboxItem            checked={checked1}            onSelect={() => setChecked1(!checked1)}          >            항목 1          </DropdownMenuCheckboxItem>          <DropdownMenuCheckboxItem            checked={checked2}            onSelect={() => setChecked2(!checked2)}          >            항목 2          </DropdownMenuCheckboxItem>        </DropdownMenuContent>      </DropdownMenu>    </div>  );}

RadioItem

'use client';

import {
  DropdownMenu,
  DropdownMenuCheckboxItem,
  DropdownMenuContent,
  DropdownMenuRadioGroup,
  DropdownMenuRadioItem,
  DropdownMenuTrigger,
} from '@aift/ui/DropdownMenu';
import { useState } from 'react';

export default function CheckboxItem() {
  const [value, setValue] = useState('option1');
  return (
    <div className="max-w-md">
      <DropdownMenu>
        <DropdownMenuTrigger>메뉴</DropdownMenuTrigger>
        <DropdownMenuContent>
          <DropdownMenuRadioGroup value={value} onValueChange={setValue}>
            <DropdownMenuRadioItem
              value="option1"
              onSelect={() => setValue('option1')}
            >
              항목 1
            </DropdownMenuRadioItem>
            <DropdownMenuRadioItem
              value="option2"
              onSelect={() => setValue('option2')}
            >
              항목 2
            </DropdownMenuRadioItem>
          </DropdownMenuRadioGroup>
        </DropdownMenuContent>
      </DropdownMenu>
    </div>
  );
}

'use client';import {  DropdownMenu,  DropdownMenuCheckboxItem,  DropdownMenuContent,  DropdownMenuRadioGroup,  DropdownMenuRadioItem,  DropdownMenuTrigger,} from '@aift/ui/DropdownMenu';import { useState } from 'react';export default function CheckboxItem() {  const [value, setValue] = useState('option1');  return (    <div className="max-w-md">      <DropdownMenu>        <DropdownMenuTrigger>메뉴</DropdownMenuTrigger>        <DropdownMenuContent>          <DropdownMenuRadioGroup value={value} onValueChange={setValue}>            <DropdownMenuRadioItem              value="option1"              onSelect={() => setValue('option1')}            >              항목 1            </DropdownMenuRadioItem>            <DropdownMenuRadioItem              value="option2"              onSelect={() => setValue('option2')}            >              항목 2            </DropdownMenuRadioItem>          </DropdownMenuRadioGroup>        </DropdownMenuContent>      </DropdownMenu>    </div>  );}

AvaterItem

'use client';

import {
  DropdownMenu,
  DropdownMenuAvaterItem,
  DropdownMenuContent,
  DropdownMenuRadioGroup,
  DropdownMenuRadioItem,
  DropdownMenuTrigger,
} from '@aift/ui/DropdownMenu';
import { Avatar } from '@aift/ui/Avatar';

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

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

Props

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

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

DropdownMenu

DropdownMenu

기본 사용법

CheckboxItem

RadioItem

AvaterItem

Props

On this page