@olundot/ui · Navigation/Data

DropdownMenu

버튼이나 행 액션에서 보조 명령, 선택 항목, 하위 메뉴를 짧은 overlay 목록으로 제공하는 메뉴 primitive 묶음입니다.

exports
Root, Trigger, Content, Item, 체크 항목, 라디오 항목, Label, Separator, Shortcut, Group, Portal, Sub 계열을 제공합니다.
asChild
Trigger는 Button 같은 기존 컨트롤을 그대로 트리거로 사용할 수 있습니다.
selection
체크 항목과 라디오 그룹으로 메뉴 안 설정값을 표현합니다.
submenu
관련 명령이 한 단계 더 필요할 때 하위 트리거와 하위 콘텐츠를 사용합니다.
layer
Content와 SubContent는 z-popover layer를 사용해 drawer 안에서도 위에 표시됩니다.
라벨, 항목, 구분선, 위험 항목
코드 보기tsx
import { Button, DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuTrigger } from "@olundot/ui";

export function BasicDropdownMenu() {
  return (
    <DropdownMenu>
      <DropdownMenuTrigger asChild>
        <Button variant="outline" size="sm">작업</Button>
      </DropdownMenuTrigger>
      <DropdownMenuContent align="start">
        <DropdownMenuLabel>시험 작업</DropdownMenuLabel>
        <DropdownMenuItem>상세 보기</DropdownMenuItem>
        <DropdownMenuItem>복제</DropdownMenuItem>
        <DropdownMenuSeparator />
        <DropdownMenuItem variant="destructive">삭제</DropdownMenuItem>
      </DropdownMenuContent>
    </DropdownMenu>
  );
}
체크 항목과 단일 선택 그룹
코드 보기tsx
import { useState } from "react";
import { Button, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuLabel, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuTrigger } from "@olundot/ui";

export function SelectionDropdownMenu() {
  const [showArchived, setShowArchived] = useState(false);
  const [density, setDensity] = useState("comfortable");

  return (
    <DropdownMenu>
      <DropdownMenuTrigger asChild>
        <Button variant="outline" size="sm">목록 설정</Button>
      </DropdownMenuTrigger>
      <DropdownMenuContent align="start">
        <DropdownMenuCheckboxItem checked={showArchived} onCheckedChange={setShowArchived}>
          보관 항목 표시
        </DropdownMenuCheckboxItem>
        <DropdownMenuSeparator />
        <DropdownMenuLabel>밀도</DropdownMenuLabel>
        <DropdownMenuRadioGroup value={density} onValueChange={setDensity}>
          <DropdownMenuRadioItem value="compact">조밀하게</DropdownMenuRadioItem>
          <DropdownMenuRadioItem value="comfortable">기본</DropdownMenuRadioItem>
        </DropdownMenuRadioGroup>
      </DropdownMenuContent>
    </DropdownMenu>
  );
}
하위 트리거와 하위 콘텐츠
코드 보기tsx
import { Button, DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger } from "@olundot/ui";

export function SubmenuDropdownMenu() {
  return (
    <DropdownMenu>
      <DropdownMenuTrigger asChild>
        <Button variant="outline" size="sm">내보내기</Button>
      </DropdownMenuTrigger>
      <DropdownMenuContent align="start">
        <DropdownMenuItem>CSV 다운로드</DropdownMenuItem>
        <DropdownMenuSub>
          <DropdownMenuSubTrigger>보고서로 내보내기</DropdownMenuSubTrigger>
          <DropdownMenuSubContent>
            <DropdownMenuItem>요약 보고서</DropdownMenuItem>
            <DropdownMenuItem>상세 보고서</DropdownMenuItem>
          </DropdownMenuSubContent>
        </DropdownMenuSub>
      </DropdownMenuContent>
    </DropdownMenu>
  );
}
단축키 보조 표시
코드 보기tsx
import { Button, DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuShortcut, DropdownMenuTrigger } from "@olundot/ui";

export function ShortcutDropdownMenu() {
  return (
    <DropdownMenu>
      <DropdownMenuTrigger asChild>
        <Button variant="outline" size="sm">빠른 작업</Button>
      </DropdownMenuTrigger>
      <DropdownMenuContent align="start">
        <DropdownMenuItem>
          새로 만들기
          <DropdownMenuShortcut>⌘N</DropdownMenuShortcut>
        </DropdownMenuItem>
        <DropdownMenuItem>
          검색
          <DropdownMenuShortcut>⌘K</DropdownMenuShortcut>
        </DropdownMenuItem>
      </DropdownMenuContent>
    </DropdownMenu>
  );
}