アクションとオーバーレイ@neumorphism-ui/dropdown-menu

Dropdown Menu

Base UI Menu を基盤とした完全な組み合わせ可能 API です。通常項目、checkbox、radio group、label、separator、shortcut、入れ子の submenu を1つのサーフェス上にまとめます。

@neumorphism-ui/dropdown-menu

Registry JSON

プレビュー

インストール

npx shadcn@latest add @neumorphism-ui/dropdown-menu

CLI が npm 依存関係、base token、utils、コンポーネントソースを順番に処理します。

この Registry を初めて使う場合は、先に namespace の設定を完了してください。

使い方

npx shadcn@latest add @neumorphism-ui/button @neumorphism-ui/dropdown-menu

Import

import * as React from "react"
import { Button } from "@/components/ui/button"
import {
  DropdownMenu,
  DropdownMenuCheckboxItem,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuGroup,
  DropdownMenuLabel,
  DropdownMenuSeparator,
  DropdownMenuShortcut,
  DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu"

Example

export function WorkspaceMenu() {
  const [showDepthGrid, setShowDepthGrid] = React.useState(true)

  return (
    <DropdownMenu>
      <DropdownMenuTrigger render={<Button variant="soft" />}>
        メニューを開く
      </DropdownMenuTrigger>
      <DropdownMenuContent align="start">
        <DropdownMenuGroup>
          <DropdownMenuLabel>ワークスペース</DropdownMenuLabel>
          <DropdownMenuSeparator />
          <DropdownMenuItem>
            複製
            <DropdownMenuShortcut>⌘D</DropdownMenuShortcut>
          </DropdownMenuItem>
          <DropdownMenuCheckboxItem
            checked={showDepthGrid}
            onCheckedChange={setShowDepthGrid}
          >
            深度グリッドを表示
          </DropdownMenuCheckboxItem>
          <DropdownMenuItem variant="destructive">削除</DropdownMenuItem>
        </DropdownMenuGroup>
      </DropdownMenuContent>
    </DropdownMenu>
  )
}

API リファレンス

コンポーネント	プロパティ	型	デフォルト	説明
`DropdownMenu`	`open / defaultOpen`	`boolean`	`false`	制御された open 状態、または非制御時の初期 open 状態です。
`DropdownMenu`	`onOpenChange`	`(open: boolean) => void`	`—`	menu の open 状態が変わったときに呼び出されます。
`DropdownMenuTrigger`	`render`	`ReactElement \| (props, state) => ReactElement`	`—`	button または link に trigger の動作を合成します。
`DropdownMenuContent`	`side / align`	`"top" \| "right" \| "bottom" \| "left" / "start" \| "center" \| "end"`	`"bottom" / "start"`	trigger を基準に popup を配置します。
`DropdownMenuContent`	`sideOffset`	`number`	`8`	trigger と popup の間隔です。
`DropdownMenuItem`	`variant`	`"default" \| "destructive"`	`"default"`	通常または destructive action のスタイルを選択します。
`DropdownMenuItem / Label`	`inset`	`boolean`	`false`	indicator を持つ行とテキストの開始位置を揃えます。
`DropdownMenuCheckboxItem`	`checked`	`boolean \| "indeterminate"`	`—`	checkbox item の制御状態です。
`DropdownMenuCheckboxItem`	`onCheckedChange`	`(checked) => void`	`—`	checkbox item の状態が変わったときに呼び出されます。

プレビュー

インストール

使い方

Import

Example

API リファレンス

アクセシビリティ