Pingo
GH

Menubar

Menubar 是一排共享同一个打开位的菜单，类似桌面应用的菜单栏。下方预览由 pingo 引擎实时渲染——点击「文件」「编辑」等标签即可开合对应菜单，并跟随站点主题切换明暗。

用法

import { createElement } from "@dopejs/pingo";
import { Menubar, MenubarMenu } from "@dopejs/pingo-ui";

root.render(
  createElement(Menubar, {
    onValueChange: (value) => {},
    children: [
      createElement(MenubarMenu, {
        value: "file",
        label: "文件",
        children: createElement("text", { value: "新建" }),
      }),
      createElement(MenubarMenu, {
        value: "edit",
        label: "编辑",
        children: createElement("text", { value: "撤销" }),
      }),
    ],
  }),
);

MenubarMenu 通过 context 读取菜单栏状态，必须作为 Menubar 的子节点；其 children 是打开时显示的面板内容。开合默认非受控，传入 value 即切换为受控模式（值为当前打开菜单的 value）。

示例

受控打开

传入 value 固定打开的菜单，常用于初始引导或外部状态同步。

Props

Prop 类型 默认值 说明
value string — 受控：当前打开菜单的值
onValueChange (value: string | undefined) => void — 打开菜单变化回调（关闭时为 undefined）
children PingoNode — 若干 MenubarMenu（必填）
className string — 追加类名
navigation boolean false 使用导航语义（NavigationMenu 内部使用）
Prop 类型 默认值 说明
value string — 菜单标识（必填）
label string — 栏上显示的标签（必填）
children PingoNode — 打开时的面板内容（必填）
className string — 追加类名

无障碍

菜单栏具备 menubar 语义，标签具备 menuitem 语义并暴露 expanded/collapsed 状态；左右方向键在菜单间移动，菜单打开时同样切换，Escape 关闭并聚焦当前标签。

最后更新: