下拉菜单

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

演示

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>
  );
}

用法

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: 包装将打开子菜单的控件。

<DropdownMenu>
  <DropdownMenuTrigger />
  <DropdownMenuContent>
    <DropdownMenuArrow />
    <DropdownMenuItem />
    <DropdownMenuSeparator />
    <DropdownMenuGroup>
      <DropdownMenuLabel />
      <DropdownMenuItem />
    </DropdownMenuGroup>
    <DropdownMenuCheckboxItem>
      <DropdownMenuItemIndicator />
    </DropdownMenuCheckboxItem>
    <DropdownMenuRadioGroup>
      <DropdownMenuRadioItem>
        <DropdownMenuItemIndicator />
      </DropdownMenuRadioItem>
    </DropdownMenuRadioGroup>
    <DropdownMenu>
      <DropdownMenuSubTrigger />
      <DropdownMenuContent />
    </DropdownMenu>
  </DropdownMenuContent>
</DropdownMenu>

特点

使用 WAI ARIA Menu Button 设计模式将辅助技术作为带有菜单的按钮。
支持项目、标签、项目组。
支持具有可选不确定状态的可检查项目（单个或多个）。
完整的键盘导航。
支持禁用项目。
打字以允许通过键入文本进行聚焦项目。
可以选择渲染一个指向箭头。
焦点得到全面管理。
可以是受控的，也可以是不受控的。

举例

多级菜单

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

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

export default function App() {
  return (
    <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>
  );
}

分组菜单

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

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

export default function App() {
  return (
    <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>
  );
}

链接菜单

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

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

export default function App() {
  return (
    <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>
  );
}

单选组菜单

要单选组菜单项目，请使用 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 (
    <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>
  );
}

多选组菜单

要将复选框添加到菜单项中，请使用 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 (
    <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>
  );
}

属性

DropdownMenu

属性	类型	默认值	必须
属性duration	简介动画持续时间	类型number	默认值250	必须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
属性open	简介受控打开状态	类型boolean	默认值-	必须false
属性defaultOpen	简介初始渲染时的默认打开状态	类型boolean	默认值false	必须false
属性onOpenChange	简介打开状态改变时调用	类型(open: boolean) => void	默认值-	必须false

Item

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

CheckboxItem

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

RadioGroup

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

RadioItem

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

建议更改此页面