DropdownMenu
ドロップダウンメニューコンポーネント。
インポート
import { DropdownMenu, DropdownMenuTrigger, DropdownMenuContent, DropdownMenuItem, DropdownMenuLabel, DropdownMenuSeparator } from '@caroainc/ui-components/client'個別サブパス（バンドルサイズを抑えたい場合）:
import { DropdownMenu, DropdownMenuTrigger, DropdownMenuContent, DropdownMenuItem, DropdownMenuLabel, DropdownMenuSeparator } from '@caroainc/ui-components/dropdown-menu'Composition
DropdownMenu
├─ DropdownMenuTrigger
└─ DropdownMenuContent
├─ DropdownMenuLabel?
├─ DropdownMenuGroup?
│ └─ DropdownMenuItem*
├─ DropdownMenuCheckboxItem*
├─ DropdownMenuRadioGroup?
│ └─ DropdownMenuRadioItem+
├─ DropdownMenuSeparator*
└─ DropdownMenuSub?
├─ DropdownMenuSubTrigger
└─ DropdownMenuSubContent
└─ DropdownMenuItem*通常はTriggerとContentが必須で、Label、Group、選択項目、区切り、サブメニューは任意です。RadioItemはRadioGroup内、SubTriggerとSubContentは同じSub内に置き、Contentの外へメニュー項目を出さないでください。
基本的な使い方
Loading...
<DropdownMenu>
<DropdownMenuTrigger asChild>
<Button variant="outline">メニュー</Button>
</DropdownMenuTrigger>
<DropdownMenuContent>
<DropdownMenuLabel>アカウント</DropdownMenuLabel>
<DropdownMenuSeparator />
<DropdownMenuItem>プロフィール</DropdownMenuItem>
<DropdownMenuItem>設定</DropdownMenuItem>
<DropdownMenuSeparator />
<DropdownMenuItem>ログアウト</DropdownMenuItem>
</DropdownMenuContent>
</DropdownMenu>アイコン付き
Loading...
<DropdownMenu>
<DropdownMenuTrigger asChild>
<Button variant="outline">
<Icon name="Settings" size="sm" />
オプション
</Button>
</DropdownMenuTrigger>
<DropdownMenuContent>
<DropdownMenuItem>
<Icon name="User" size="sm" className="mr-2" />
プロフィール
</DropdownMenuItem>
<DropdownMenuItem>
<Icon name="CreditCard" size="sm" className="mr-2" />
請求
</DropdownMenuItem>
<DropdownMenuItem>
<Icon name="Settings" size="sm" className="mr-2" />
設定
</DropdownMenuItem>
</DropdownMenuContent>
</DropdownMenu>サブメニュー
Loading...
<DropdownMenu>
<DropdownMenuTrigger asChild>
<Button>メニュー</Button>
</DropdownMenuTrigger>
<DropdownMenuContent>
<DropdownMenuItem>新規作成</DropdownMenuItem>
<DropdownMenuSub>
<DropdownMenuSubTrigger>その他</DropdownMenuSubTrigger>
<DropdownMenuSubContent>
<DropdownMenuItem>インポート</DropdownMenuItem>
<DropdownMenuItem>エクスポート</DropdownMenuItem>
</DropdownMenuSubContent>
</DropdownMenuSub>
</DropdownMenuContent>
</DropdownMenu>パディング
padding propでメニューの内側の余白を調整できます。
Loading...
<DropdownMenuContent padding="none">...</DropdownMenuContent>
<DropdownMenuContent padding="sm">...</DropdownMenuContent> {/* デフォルト */}
<DropdownMenuContent padding="md">...</DropdownMenuContent>
<DropdownMenuContent padding="lg">...</DropdownMenuContent>Props (DropdownMenuContent)
| Prop | Type | Default | Description |
|---|---|---|---|
padding | 'none' | 'sm' | 'md' | 'lg' | 'sm' | メニューの内側の余白 |
side | 'top' | 'right' | 'bottom' | 'left' | 'bottom' | 表示位置 |
align | 'start' | 'center' | 'end' | 'start' | 配置 |