DropdownMenu

ボタンから開くメニュー。チェック項目・ラジオ・サブメニュー対応。

ボタンから開く操作メニューです。行ごとの「…」メニューや、テーブルの表示列切り替えに使います。

export const client = "only";

import { useState } from "react";
import {
  DropdownMenu,
  DropdownMenuTrigger,
  DropdownMenuContent,
  DropdownMenuLabel,
  DropdownMenuItem,
  DropdownMenuCheckboxItem,
  DropdownMenuSeparator,
  DropdownMenuShortcut,
  Button,
} from "@squadbase/vantage/ui";
import { MoreHorizontal } from "lucide-react";

export default function Example() {
  const [showArchived, setShowArchived] = useState(false);
  return (
    <DropdownMenu>
      <DropdownMenuTrigger
        render={<Button variant="outline" size="icon" aria-label="操作" />}
      >
        <MoreHorizontal />
      </DropdownMenuTrigger>
      <DropdownMenuContent align="start">
        <DropdownMenuLabel>操作</DropdownMenuLabel>
        <DropdownMenuItem>
          CSV をダウンロード
          <DropdownMenuShortcut>⌘E</DropdownMenuShortcut>
        </DropdownMenuItem>
        <DropdownMenuCheckboxItem
          checked={showArchived}
          onCheckedChange={setShowArchived}
        >
          アーカイブ済みを表示
        </DropdownMenuCheckboxItem>
        <DropdownMenuSeparator />
        <DropdownMenuItem variant="destructive">削除</DropdownMenuItem>
      </DropdownMenuContent>
    </DropdownMenu>
  );
}

import {
  DropdownMenu,
  DropdownMenuTrigger,
  DropdownMenuContent,
  DropdownMenuGroup,
  DropdownMenuLabel,
  DropdownMenuItem,
  DropdownMenuCheckboxItem,
  DropdownMenuRadioGroup,
  DropdownMenuRadioItem,
  DropdownMenuSeparator,
  DropdownMenuShortcut,
  DropdownMenuSub,
  DropdownMenuSubTrigger,
  DropdownMenuSubContent,
  DropdownMenuPortal,
} from "@squadbase/vantage/ui";

よく使うプロップ

プロップ	置き場所	意味
`align` / `side` / `sideOffset`	`DropdownMenuContent`	開く位置
`variant="destructive"`	`DropdownMenuItem`	破壊的操作の色
`inset`	`Item` / `Label` / `SubTrigger`	アイコン列の分だけ字下げ
`checked` / `onCheckedChange`	`DropdownMenuCheckboxItem`	チェック状態
`value` / `onValueChange`	`DropdownMenuRadioGroup`	単一選択

サブメニュー

<DropdownMenuSub>
  <DropdownMenuSubTrigger>エクスポート</DropdownMenuSubTrigger>
  <DropdownMenuSubContent>
    <DropdownMenuItem>CSV</DropdownMenuItem>
    <DropdownMenuItem>JSON</DropdownMenuItem>
  </DropdownMenuSubContent>
</DropdownMenuSub>