Dropdown Menuドロップダウンメニュー

複数のアクションを格納するためのコンポーネントです。メニュー内のアクションは、クリック時にイベントをトリガーします。アクションではなく、選択肢を表示する場合は、Selectを使用してください。

更新 2024/11/1

バリエーション

メニューを総称するタイトルまたはアイコンを設定できます。

Default
Icon

import { DropdownMenu } from "@serendie/ui";
import { Dd, Dl, Dt } from "src/components/LayoutUtils";

export function TypeSample() {
  return (
    <Dl>
      <Dt>Default</Dt>
      <Dd>
        <DropdownMenu
          items={[
            {
              label: "React",
              value: "React",
              icon: "texture",
            },
            {
              label: "Vue",
              value: "Vue",
              icon: "texture",
            },
            {
              label: "Angular",
              value: "Angular",
              icon: "texture",
            },
          ]}
          title="メニュータイトル"
        />
      </Dd>

      <Dt>Icon</Dt>
      <Dd>
        <DropdownMenu
          items={[
            {
              label: "React",
              value: "React",
              icon: "texture",
            },
            {
              label: "Vue",
              value: "Vue",
              icon: "texture",
            },
            {
              label: "Angular",
              value: "Angular",
              icon: "texture",
            },
          ]}
          isIconMenu
          title="メニュータイトル"
        />
      </Dd>
    </Dl>
  );
}