下拉菜单

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

演示

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="ms-auto ps-5 text-xs tracking-widest text-fg-subtle">⌘+T</span>
          </DropdownMenuItem>
          <DropdownMenuItem>
            打开新窗口
            <span className="ms-auto ps-5 text-xs tracking-widest text-fg-subtle">⌘+N</span>
          </DropdownMenuItem>
          <DropdownMenuItem disabled>
            打开新的无痕式窗口
            <span className="ms-auto ps-5 text-xs tracking-widest">⇧+⌘+N</span>
          </DropdownMenuItem>
          <DropdownMenuSeparator />
          <DropdownMenuItem>
            关闭窗口
            <span className="ms-auto ps-5 text-xs tracking-widest text-fg-subtle">⇧+⌘+W</span>
          </DropdownMenuItem>
          <DropdownMenuItem>
            关闭标签页
            <span className="ms-auto ps-5 text-xs tracking-widest text-fg-subtle">⌘+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

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

Item

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

CheckboxItem

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

RadioGroup

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

RadioItem

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

建议更改此页面