Dropdown

Dropdown Menu 컴포넌트를 KRDS 이름으로 다시 내보내는 작업 메뉴 컴포넌트입니다.

examples/krds/dropdown-demo.tsx

import { MoreHorizontalIcon } from "lucide-react"

import { Button } from "@/components/ui/button"

설치

pnpm dlx shadcn@latest add https://krdscn.gwlee.kr/r/dropdown.json

사용법

import { Dropdown, DropdownContent, DropdownItem, DropdownTrigger } from "@/components/ui/dropdown"

<Dropdown>
  <DropdownTrigger asChild><button type="button">열기</button></DropdownTrigger>
  <DropdownContent><DropdownItem>수정</DropdownItem><DropdownItem>삭제</DropdownItem></DropdownContent>
</Dropdown>

KRDS 정렬

Dropdown은 기존 dropdown-menu compound API를 KRDS 이름으로 노출하는 alias layer입니다. DropdownMenu의 Radix/shadcn 동작을 유지하면서 KRDS 문맥의 작업 메뉴 명명만 추가합니다.

구성

다음 조합으로 Dropdown를 사용할 수 있습니다.

Dropdown
├── DropdownTrigger
├── DropdownContent
├── DropdownItem
├── DropdownGroup
├── DropdownSeparator
├── DropdownSub

예제

Basic

Dropdown Menu 컴포넌트를 KRDS 이름으로 다시 내보내는 작업 메뉴 컴포넌트입니다.

examples/krds/dropdown-demo.tsx

import { MoreHorizontalIcon } from "lucide-react"

import { Button } from "@/components/ui/button"

API 참조

속성	타입	기본값	설명
`Dropdown*`	`Dropdown Menu primitive aliases`	`-`	dropdown-menu와 동일한 API를 사용합니다.

Dropdown Menu Empty