コンポーネント
Dropdown Menu
ボタンをクリックすると開く、一連の操作や機能をまとめたメニューをユーザーに表示します。
使い方
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 が内部的に使用します。 |
メニューのフォーカス、先頭文字検索、キーボード操作、オーバーレイ配置は React Aria Components が提供します。