下拉菜单

向用户显示由按钮触发的菜单，例如一组操作或功能。

导入

import {
  DropdownMenu,
  DropdownMenuTrigger,
  DropdownMenuContent,
  DropdownMenuArrow,
  DropdownMenuGroup,
  DropdownMenuLabel,
  DropdownMenuSeparator,
  DropdownMenuItem,
  DropdownMenuItemIndicator,
  DropdownMenuCheckboxItem,
  DropdownMenuRadioGroup,
  DropdownMenuRadioItem,
  DropdownMenuSubTrigger,
} from "@resolid/react-ui";

DropdownMenu: 包含菜单的所有部分。
DropdownMenuTrigger: 包装将打开下拉菜单的控件。
DropdownMenuContent: 打开菜单时弹出的组件。
DropdownMenuArrow: 可选的箭头元素，可与菜单内容一起渲染。
DropdownMenuGroup: 用于对多个 DropdownMenuItem 进行分组。
DropdownMenuLabel: 用于渲染标签。使用方向键无法聚焦。
DropdownMenuSeparator: 菜单项和组之间的可视分隔符。
DropdownMenuItem: 包含菜单项的组件。
DropdownMenuRadioGroup: 用于对多个 DropdownMenuRadioItem 进行分组。
DropdownMenuRadioItem: 一个可以像单选按钮一样进行控制和渲染的项目。
DropdownMenuCheckboxItem: 一个可以像复选框一样进行控制和渲染的项目。
DropdownMenuItemIndicator: 在父级 DropdownMenuCheckboxItem 或 DropdownMenuRadioItem 被选中项目时呈现的视觉指示器。
DropdownMenuSubTrigger: 包装将打开子菜单的控件。

演示

了解如何在项目中使用菜单组件，让我们看一个最基本的例子：

import {
  Button,
  DropdownMenu,
  DropdownMenuTrigger,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuSeparator,
} from "@resolid/react-ui";

export default function App() {
  return (
    <div className={"flex flex-row gap-3"}>
      <DropdownMenu>
        <DropdownMenuTrigger
          render={(props) => <Button color={"neutral"} variant={"outline"} {...props} />}
        >
          下拉菜单
        </DropdownMenuTrigger>
        <DropdownMenuContent className={"text-sm"}>
          <DropdownMenuItem>
            新标签页
            <span className={"text-fg-subtle ml-auto pl-5 text-xs tracking-widest"}>⌘+T</span>
          </DropdownMenuItem>
          <DropdownMenuItem>
            打开新窗口
            <span className={"text-fg-subtle ml-auto pl-5 text-xs tracking-widest"}>⌘+N</span>
          </DropdownMenuItem>
          <DropdownMenuItem disabled>
            打开新的无痕式窗口
            <span className={"ml-auto pl-5 text-xs tracking-widest"}>⇧+⌘+N</span>
          </DropdownMenuItem>
          <DropdownMenuSeparator />
          <DropdownMenuItem>
            关闭窗口
            <span className={"text-fg-subtle ml-auto pl-5 text-xs tracking-widest"}>⇧+⌘+W</span>
          </DropdownMenuItem>
          <DropdownMenuItem>
            关闭标签页
            <span className={"text-fg-subtle ml-auto pl-5 text-xs tracking-widest"}>⌘+W</span>
          </DropdownMenuItem>
        </DropdownMenuContent>
      </DropdownMenu>
    </div>
  );
}

举例

多级菜单

要显示多级菜单，请渲染另一个 DropdownMenu 组件并使用 DropdownMenuSubTrigger 组件打开子菜单。

import {
  Button,
  DropdownMenu,
  DropdownMenuTrigger,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuArrow,
  DropdownMenuSeparator,
  DropdownMenuSubTrigger,
} from "@resolid/react-ui";

export default function App() {
  return (
    <div className={"flex flex-row gap-3"}>
      <DropdownMenu>
        <DropdownMenuTrigger
          render={(props) => <Button color={"neutral"} variant={"outline"} {...props} />}
        >
          多级菜单
        </DropdownMenuTrigger>
        <DropdownMenuContent className={"text-sm"}>
          <DropdownMenuArrow />
          <DropdownMenuItem label={"New Tab"}>新建标签页</DropdownMenuItem>
          <DropdownMenuItem label={"New Window"}>打开新窗口</DropdownMenuItem>
          <DropdownMenuItem>打开新的无痕式窗口</DropdownMenuItem>
          <DropdownMenuSeparator />
          <DropdownMenu>
            <DropdownMenuSubTrigger label={"Share"}>分享</DropdownMenuSubTrigger>
            <DropdownMenuContent className={"text-sm"}>
              <DropdownMenuItem label={"Email"}>邮件</DropdownMenuItem>
              <DropdownMenuItem label={"SMS"}>短信</DropdownMenuItem>
              <DropdownMenu>
                <DropdownMenuSubTrigger>社交媒体</DropdownMenuSubTrigger>
                <DropdownMenuContent className={"text-sm"}>
                  <DropdownMenu>
                    <DropdownMenuSubTrigger>微信</DropdownMenuSubTrigger>
                    <DropdownMenuContent className={"text-sm"}>
                      <DropdownMenuItem>聊天</DropdownMenuItem>
                      <DropdownMenuItem>朋友圈</DropdownMenuItem>
                    </DropdownMenuContent>
                  </DropdownMenu>
                  <DropdownMenuItem>微博</DropdownMenuItem>
                  <DropdownMenuItem>抖音</DropdownMenuItem>
                  <DropdownMenuItem>知乎</DropdownMenuItem>
                </DropdownMenuContent>
              </DropdownMenu>
            </DropdownMenuContent>
          </DropdownMenu>
          <DropdownMenuSeparator />
          <DropdownMenu>
            <DropdownMenuSubTrigger label={"Tools"}>更多工具</DropdownMenuSubTrigger>
            <DropdownMenuContent className={"text-sm"}>
              <DropdownMenuItem>保存页面为...</DropdownMenuItem>
              <DropdownMenuItem>创建快捷方式</DropdownMenuItem>
              <DropdownMenuSeparator />
              <DropdownMenuItem>开发者工具</DropdownMenuItem>
            </DropdownMenuContent>
          </DropdownMenu>
        </DropdownMenuContent>
      </DropdownMenu>
    </div>
  );
}

分组菜单

使用 DropdownMenuGroup 组件对相关菜单项进行分组。

import {
  Button,
  DropdownMenu,
  DropdownMenuTrigger,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuArrow,
  DropdownMenuGroup,
  DropdownMenuLabel,
  DropdownMenuSeparator,
} from "@resolid/react-ui";

export default function App() {
  return (
    <div className={"flex flex-row gap-3"}>
      <DropdownMenu>
        <DropdownMenuTrigger
          render={(props) => <Button color={"neutral"} variant={"outline"} {...props} />}
        >
          View
        </DropdownMenuTrigger>
        <DropdownMenuContent className={"text-sm"}>
          <DropdownMenuArrow />
          <DropdownMenuGroup>
            <DropdownMenuLabel>Sort</DropdownMenuLabel>
            <DropdownMenuItem>Date</DropdownMenuItem>
            <DropdownMenuItem>Name</DropdownMenuItem>
            <DropdownMenuItem>Type</DropdownMenuItem>
          </DropdownMenuGroup>
          <DropdownMenuSeparator />
          <DropdownMenuGroup>
            <DropdownMenuLabel>Workspace</DropdownMenuLabel>
            <DropdownMenuItem>Minimap</DropdownMenuItem>
            <DropdownMenuItem>Search</DropdownMenuItem>
            <DropdownMenuItem>Sidebar</DropdownMenuItem>
          </DropdownMenuGroup>
        </DropdownMenuContent>
      </DropdownMenu>
    </div>
  );
}

链接菜单

将 as 属性传递给 DropdownMenuItem 组件以呈现链接。

import {
  Button,
  DropdownMenu,
  DropdownMenuArrow,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuTrigger,
} from "@resolid/react-ui";

export default function App() {
  return (
    <div className={"flex flex-row gap-3"}>
      <DropdownMenu>
        <DropdownMenuTrigger
          render={(props) => <Button color={"neutral"} variant={"outline"} {...props} />}
        >
          Favourite
        </DropdownMenuTrigger>
        <DropdownMenuContent className={"text-sm"}>
          <DropdownMenuArrow />
          <DropdownMenuItem
            render={(props) => (
              <a target={"_blank"} rel="noreferrer" href={"https://www.github.com"} {...props}>
                Github
              </a>
            )}
          />
          <DropdownMenuItem
            disabled
            render={(props) => (
              <a target={"_blank"} rel="noreferrer" href={"https://www.github.com"} {...props}>
                Disabled
              </a>
            )}
          />
          <DropdownMenuItem
            render={(props) => (
              <a target={"_blank"} rel="noreferrer" href={"https://www.vercel.com"} {...props}>
                Vercel
              </a>
            )}
          />
          <DropdownMenuItem
            render={(props) => (
              <a target={"_blank"} rel="noreferrer" href={"https://www.resolid.tech"} {...props}>
                Resolid
              </a>
            )}
          />
        </DropdownMenuContent>
      </DropdownMenu>
    </div>
  );
}

单选组菜单

要单选组菜单项目，请使用 DropdownMenuRadioGroup 组件。

import {
  Button,
  DropdownMenu,
  DropdownMenuArrow,
  DropdownMenuContent,
  DropdownMenuItemIndicator,
  DropdownMenuRadioGroup,
  DropdownMenuRadioItem,
  DropdownMenuTrigger,
} from "@resolid/react-ui";
import { useState } from "react";
import { SpriteIcon } from "~/components/sprite-icon";

export default function App() {
  const [value, setValue] = useState("date");

  return (
    <div className={"flex flex-row gap-3"}>
      <DropdownMenu>
        <DropdownMenuTrigger
          render={(props) => <Button color={"neutral"} variant={"outline"} {...props} />}
        >
          Sort
        </DropdownMenuTrigger>
        <DropdownMenuContent className={"text-sm"}>
          <DropdownMenuArrow />
          <DropdownMenuRadioGroup value={value} onChange={setValue}>
            <DropdownMenuRadioItem value={"date"}>
              <DropdownMenuItemIndicator>
                <SpriteIcon size={"1rem"} name={"dot"} />
              </DropdownMenuItemIndicator>
              Date
            </DropdownMenuRadioItem>
            <DropdownMenuRadioItem value={"name"}>
              <DropdownMenuItemIndicator>
                <SpriteIcon size={"1rem"} name={"dot"} />
              </DropdownMenuItemIndicator>
              Name
            </DropdownMenuRadioItem>
            <DropdownMenuRadioItem value={"type"}>
              <DropdownMenuItemIndicator>
                <SpriteIcon size={"1rem"} name={"dot"} />
              </DropdownMenuItemIndicator>
              Type
            </DropdownMenuRadioItem>
          </DropdownMenuRadioGroup>
        </DropdownMenuContent>
      </DropdownMenu>
    </div>
  );
}

多选组菜单

要将复选框添加到菜单项中，请使用 DropdownMenuCheckboxItem 组件。

import {
  Button,
  DropdownMenu,
  DropdownMenuArrow,
  DropdownMenuCheckboxItem,
  DropdownMenuContent,
  DropdownMenuItemIndicator,
  DropdownMenuTrigger,
} from "@resolid/react-ui";
import { useState } from "react";
import { SpriteIcon } from "~/components/sprite-icon";

export default function App() {
  const [showMinimap, setShowMinimap] = useState(true);
  const [showSearch, setShowSearch] = useState(true);
  const [showSidebar, setShowSidebar] = useState(false);

  return (
    <div className={"flex flex-row gap-3"}>
      <DropdownMenu closeOnSelect={false}>
        <DropdownMenuTrigger
          render={(props) => <Button color={"neutral"} variant={"outline"} {...props} />}
        >
          Workspace
        </DropdownMenuTrigger>
        <DropdownMenuContent className={"text-sm"}>
          <DropdownMenuArrow />
          <DropdownMenuCheckboxItem
            label={"Minimap"}
            checked={showMinimap}
            onChange={setShowMinimap}
          >
            <DropdownMenuItemIndicator>
              <SpriteIcon size={"1rem"} name={"check"} />
            </DropdownMenuItemIndicator>
            Minimap
          </DropdownMenuCheckboxItem>
          <DropdownMenuCheckboxItem label={"Search"} checked={showSearch} onChange={setShowSearch}>
            <DropdownMenuItemIndicator>
              <SpriteIcon size={"1rem"} name={"check"} />
            </DropdownMenuItemIndicator>
            Search
          </DropdownMenuCheckboxItem>
          <DropdownMenuCheckboxItem
            label={"Sidebar"}
            checked={showSidebar}
            onChange={setShowSidebar}
          >
            <DropdownMenuItemIndicator>
              <SpriteIcon size={"1rem"} name={"check"} />
            </DropdownMenuItemIndicator>
            Sidebar
          </DropdownMenuCheckboxItem>
        </DropdownMenuContent>
      </DropdownMenu>
    </div>
  );
}

属性

DropdownMenu

属性	类型	默认值	必须
属性open	简介受控打开状态	类型boolean	默认值-	必须false
属性defaultOpen	简介初始渲染时的默认打开状态	类型boolean	默认值false	必须false
属性onOpenChange	简介打开状态改变时调用	类型(open: boolean) => void	默认值-	必须false
属性closeOnSelect	简介选择项目后, 菜单将关闭	类型boolean	默认值true	必须false
属性preventScroll	简介打开时阻止背景页面滚动	类型boolean	默认值false	必须false
属性placement	简介放置位置	类型"top" \| "right" \| "bottom" \| "left" \| "top-start" \| "top-end" \| "right-start" \| "right-end" \| "bottom-start" \| "bottom-end" \| "left-start" \| "left-end"	默认值"bottom-start"	必须false
属性duration	简介动画持续时间	类型number	默认值250	必须false

Item

属性	类型	默认值	必须
属性label	简介用于菜单的提前导航文本。如果未提供，将使用菜单项的文本内容	类型string	默认值-	必须false
属性disabled	简介该项目是否被禁用	类型boolean	默认值false	必须false
属性closeOnSelect	简介选择项目后, 菜单将关闭	类型boolean	默认值-	必须false
属性onSelect	简介当用户选择一个项目（通过鼠标或键盘）时调用事件处理程序	类型() => void	默认值-	必须false

CheckboxItem

属性	类型	默认值	必须
属性label	简介用于菜单的提前导航文本。如果未提供，将使用菜单项的文本内容	类型string	默认值-	必须false
属性disabled	简介该项目是否被禁用	类型boolean	默认值false	必须false
属性closeOnSelect	简介选择项目后, 菜单将关闭	类型boolean	默认值-	必须false
属性onSelect	简介当用户选择一个项目（通过鼠标或键盘）时调用事件处理程序	类型() => void	默认值-	必须false
属性checked	简介项目的受控选中状态	类型false \| true \| "indeterminate"	默认值-	必须false
属性onChange	简介项目选中状态更改时调用的事件处理程序	类型(checked: CheckedState) => void	默认值-	必须false

RadioGroup

属性	类型	默认值	必须
属性value	简介要选中的菜单单选项目的控制值	类型string \| number	默认值-	必须false
属性onChange	简介值更改时调用的事件处理程序	类型((value: string \| number) => void)	默认值-	必须false

RadioItem

属性	类型	默认值	必须
属性value	简介菜单单选项的价值	类型string \| number	默认值-	必须true
属性label	简介用于菜单的提前导航文本。如果未提供，将使用菜单项的文本内容	类型string	默认值-	必须false
属性disabled	简介该项目是否被禁用	类型boolean	默认值false	必须false
属性closeOnSelect	简介选择项目后, 菜单将关闭	类型boolean	默认值-	必须false
属性onSelect	简介当用户选择一个项目（通过鼠标或键盘）时调用事件处理程序	类型() => void	默认值-	必须false

建议更改此页面