コンポーネント
Dropdown Menu
ボタンで開く、一連のアクションや機能などのメニューをユーザーに表示します。
import {Button,DropdownMenu,DropdownMenuContent,DropdownMenuItem,DropdownMenuLabel,DropdownMenuSeparator,DropdownMenuTrigger,} from "@murasakijs/ui";export function DropdownMenuDemo() {return ( <DropdownMenu> <DropdownMenuTrigger asChild> <Button variant="outline">Open</Button> </DropdownMenuTrigger> <DropdownMenuContent className="w-56"> <DropdownMenuLabel>My Account</DropdownMenuLabel> <DropdownMenuSeparator /> <DropdownMenuItem>Profile</DropdownMenuItem> <DropdownMenuItem>Billing</DropdownMenuItem> <DropdownMenuItem>Settings</DropdownMenuItem> <DropdownMenuSeparator /> <DropdownMenuItem>Log out</DropdownMenuItem> </DropdownMenuContent> </DropdownMenu>);}使い方
import {
DropdownMenu,
DropdownMenuContent,
DropdownMenuItem,
DropdownMenuTrigger,
} from "@murasakijs/ui";<DropdownMenu>
<DropdownMenuTrigger>Open</DropdownMenuTrigger>
<DropdownMenuContent>
<DropdownMenuItem>Profile</DropdownMenuItem>
</DropdownMenuContent>
</DropdownMenu>API リファレンス
サブコンポーネント
| コンポーネント | 説明 |
|---|---|
DropdownMenu | ルートプリミティブです。 |
DropdownMenuTrigger | メニューを開く要素です。asChild に対応しています。 |
DropdownMenuContent | メニュー本体。sideOffset(デフォルト 4)を受け取ります。 |
DropdownMenuItem | 選択可能な項目です。inset でインデントし、アイコン/インジケーター付きの項目と揃えられます。 |
DropdownMenuCheckboxItem | チェックボックスインジケーター付きの項目です。checked を受け取ります。 |
DropdownMenuRadioGroup / DropdownMenuRadioItem | ラジオインジケーター付きの、排他的な項目グループです。 |
DropdownMenuLabel | 非インタラクティブな見出しです。inset を受け取ります。 |
DropdownMenuSeparator | 項目やグループ間の視覚的な区切り線です。 |
DropdownMenuShortcut | キーボードショートカットのヒントを表示する、右寄せの控えめなテキストです。 |
DropdownMenuGroup | 関連する項目をグループ化します。 |
DropdownMenuSub / DropdownMenuSubTrigger / DropdownMenuSubContent | ネストされたサブメニューです。 |
DropdownMenuPortal | コンテンツを document.body にポータルします。DropdownMenuContent が内部的に使用します。 |
すべてのサブコンポーネントは Radix UI の DropdownMenu
プリミティブをラップし、それ以外の props はすべてそのまま渡されます。