Pingo
GH

Dropdown Menu

Dropdown Menu 在触发器下方展开一组动作项。下方预览由 pingo 引擎实时渲染——点击触发器即可开合，并跟随站点主题切换明暗。

用法

import {
  Button,
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuTrigger,
} from "@dopejs/pingo-ui";

root.render(
  <DropdownMenu onValueChange={(value) => run(value)}>
    <DropdownMenuTrigger>
      <Button onPress={() => {}}>打开菜单</Button>
    </DropdownMenuTrigger>
    <DropdownMenuContent>
      <DropdownMenuItem value="profile">个人资料</DropdownMenuItem>
      <DropdownMenuItem value="settings">设置</DropdownMenuItem>
    </DropdownMenuContent>
  </DropdownMenu>,
);

Trigger 与 Content 通过 context 读取根组件状态，必须作为同一个 DropdownMenu 的子节点。选择一项后触发 onValueChange 并自动关闭菜单。开合默认非受控（defaultOpen），组件不提供受控 open prop——需要完全受控的列表选择请使用 Select（两者共享同一实现）。

Props

Prop 类型 默认值 说明
value string — 当前选中值（高亮对应项）
defaultOpen boolean false 初始开合
onValueChange (value: string) => void — 选择菜单项回调
onOpenChange (open: boolean) => void — 开合变化回调
children PingoNode — Trigger 与 Content（必填）
className string — 追加在锚点容器类名之后
Prop 类型 默认值 说明
children PingoNode — 触发元素；缺省时渲染当前值/占位文本
placeholder string — 无选中值时的占位文本
className string — 追加类名
Prop 类型 默认值 说明
children PingoNode — 菜单项（必填）
className string — 追加类名
Prop 类型 默认值 说明
value string — 菜单项值（必填）
children string — 显示文案（必填）
className string — 追加类名

无障碍

菜单具备 menu 语义、菜单项具备 menuitem 语义；打开后方向键上下移动，Enter/Space 选择，Escape 关闭并把焦点交还触发器。

最后更新: