组件

菜单栏 Menubar

Menubar：桌面风格菜单栏。一排低调 ghost 触发器各自打开与 menu 家族相同的浮层。触发器是我们自己的按钮，通过 `asChild` 挂到菜单状态机的触发器上；状态机保留触发器元素的行为（定位、焦点恢复、`data-state`），元素则带有 menubar 作用域。弹层保持 menu 部件不变，由 menu 样式表负责外观。键盘行为：触发器之间用 Tab 切换，不用方向键；跨菜单的方向键遍历不在本版本范围内。菜单打开后，方向键和 Escape 由状态机处理。

#基础用法

menubar/basic Vue React

Nothing chosen yet.

menubar/basic.vue

<script setup lang="ts">
import { Menubar } from "@bysages/vue";
import { ref } from "vue";

const status = ref("Nothing chosen yet.");

const menus = [
  {
    label: "File",
    items: [
      { label: "New document", value: "file.new" },
      { label: "Open recent…", value: "file.open", disabled: true },
      { label: "Save", value: "file.save" },
      { label: "Delete draft", value: "file.delete", danger: true },
    ],
  },
  {
    label: "Edit",
    items: [
      { label: "Undo", value: "edit.undo" },
      { label: "Redo", value: "edit.redo" },
      { label: "Paste without format", value: "edit.paste", disabled: true },
    ],
  },
  {
    label: "View",
    items: [
      { label: "Toggle sidebar", value: "view.sidebar" },
      { label: "Focus mode", value: "view.focus" },
    ],
  },
];

const choose = (value: string) => {
  status.value = `Chose ${value}`;
};
</script>

<template>
  <div class="w-full">
    <Menubar :items="menus" @select="choose" />
    <p role="status" class="mt-4 text-sm text-tertiary">
      {{ status }}
    </p>
  </div>
</template>

menubar/in-context Vue React

Draft: The paper-and-ink system

Nothing chosen yet.

menubar/in-context.vue

<script setup lang="ts">
import { Menubar } from "@bysages/vue";
import { ref } from "vue";

const status = ref("Nothing chosen yet.");

const menus = [
  {
    label: "File",
    items: [
      { label: "New document", value: "file.new" },
      { label: "Open recent…", value: "file.open", disabled: true },
      { label: "Save", value: "file.save" },
      { label: "Delete draft", value: "file.delete", danger: true },
    ],
  },
  {
    label: "Edit",
    items: [
      { label: "Undo", value: "edit.undo" },
      { label: "Redo", value: "edit.redo" },
      { label: "Paste without format", value: "edit.paste", disabled: true },
    ],
  },
  {
    label: "View",
    items: [
      { label: "Toggle sidebar", value: "view.sidebar" },
      { label: "Focus mode", value: "view.focus" },
    ],
  },
];

const choose = (value: string) => {
  status.value = `Chose ${value}`;
};
</script>

<template>
  <section class="bg-surface-1 border border-border rounded-lg p-4">
    <h2 class="mb-4 font-serif text-lg">Draft: The paper-and-ink system</h2>
    <Menubar :items="menus" @select="choose" />
    <p role="status" class="mt-4 text-sm text-tertiary">
      {{ status }}
    </p>
  </section>
</template>

#属性

#Menubar

Menubar：桌面风格菜单栏。一排低调 ghost 触发器各自打开与 menu 家族相同的浮层。触发器是我们自己的按钮，通过 asChild 挂到菜单状态机的触发器上；状态机保留触发器元素的行为（定位、焦点恢复、data-state），元素则带有 menubar 作用域。弹层保持 menu 部件不变，由 menu 样式表负责外观。键盘行为：触发器之间用 Tab 切换，不用方向键；跨菜单的方向键遍历不在本版本范围内。菜单打开后，方向键和 Escape 由状态机处理。

属性	类型	默认值	描述
`items`	`Array as PropType<MenubarGroup[]>`	`() => []`	—
`onSelect`	`Function as PropType<(value: string) => void>`	`undefined`	—