组件

菜单 Menu

Menu：菜单。安静的纸质浮层带 elevation，行在悬停时出现光照，选中项使用墨色平铺填充。部件：Root、Trigger、ContextTrigger、Indicator、Positioner、Content、Item、ItemText、ItemIndicator、ItemGroup、ItemGroupLabel、TriggerItem、Separator、Arrow、ArrowTip。Ark 的 namespace 已冻结；展开 namespace 时会把成员复制成 data properties，使 Root 可以承担尺寸包装，Content 承担档位，其余仍使用 Ark 自身部件。

#基础用法

menu/basic Vue React

menu/basic.vue

<script setup lang="ts">
import { chevron_down } from "@bysages/icons";
import { Icon, Menu } from "@bysages/vue";
</script>

<template>
  <Menu.Root>
    <Menu.Trigger>
      <span>File</span>
      <Menu.Indicator>
        <Icon :glyph="chevron_down" />
      </Menu.Indicator>
    </Menu.Trigger>
    <Teleport to="body">
      <Menu.Positioner>
        <Menu.Content>
          <Menu.Item value="new-file">New file</Menu.Item>
          <Menu.Item value="open" disabled>Open…</Menu.Item>
          <Menu.ItemGroup>
            <Menu.ItemGroupLabel>Save</Menu.ItemGroupLabel>
            <Menu.Item value="save">Save</Menu.Item>
            <Menu.Item value="save-as">Save as…</Menu.Item>
          </Menu.ItemGroup>
          <Menu.Separator />
          <Menu.Item value="export">Export</Menu.Item>
        </Menu.Content>
      </Menu.Positioner>
    </Teleport>
  </Menu.Root>
</template>

#属性

#ArrowTip

纯造型的部件——自身没有属性，沿用部件结构的共享样式。

#Arrow

纯造型的部件——自身没有属性，沿用部件结构的共享样式。

#CheckboxItem

纯造型的部件——自身没有属性，沿用部件结构的共享样式。

#Content

纯造型的部件——自身没有属性，沿用部件结构的共享样式。

#ContextTrigger

纯造型的部件——自身没有属性，沿用部件结构的共享样式。

#Indicator

纯造型的部件——自身没有属性，沿用部件结构的共享样式。

#ItemContext

纯造型的部件——自身没有属性，沿用部件结构的共享样式。

#ItemGroupLabel

纯造型的部件——自身没有属性，沿用部件结构的共享样式。

#ItemGroup

纯造型的部件——自身没有属性，沿用部件结构的共享样式。

#ItemIndicator

纯造型的部件——自身没有属性，沿用部件结构的共享样式。

#ItemText

纯造型的部件——自身没有属性，沿用部件结构的共享样式。

#Item

属性	类型	描述
`closeOnSelect`	`boolean \| undefined`	选中选项后是否关闭菜单
`disabled`	`boolean \| undefined`	是否禁用菜单项
`value`	`string`	菜单项的唯一值
`valueText`	`string \| undefined`	选项的文本值，用于菜单输入即查找；未设置时使用菜单项的文本内容

#Positioner

纯造型的部件——自身没有属性，沿用部件结构的共享样式。

#RadioItemGroup

属性	类型	默认值	描述
`id`	`string`		—
`modelValue`	`string`		—

#RadioItem

纯造型的部件——自身没有属性，沿用部件结构的共享样式。

#Root

属性	类型	默认值	描述
`size`	`String as PropType<"sm" \| "md" \| "lg">`	`"md"`	菜单各行的控件高度档位
`anchorPoint`	`menu.Point`		菜单定位点；可由上下文菜单触发器或按钮触发器设置
`aria-label`	`string`		菜单的无障碍标签
`closeOnSelect`	`boolean`	`true`	选中选项时是否关闭菜单
`composite`	`boolean`	`true`	菜单是否与组合框、标签页等复合组件组合使用
`defaultHighlightedValue`	`string`		菜单项的初始高亮值；适合不需要受控高亮值的场景
`defaultOpen`	`boolean`		菜单的初始展开状态；适合不需要受控展开状态的场景
`defaultTriggerValue`	`string \| null`		触发器的初始值；适合不需要受控触发器值的场景
`highlightedValue`	`string`		菜单项的受控高亮值
`id`	`string`		组件内部状态机的唯一标识
`ids`	`Partial<{ trigger: string; contextTrigger: string; content: string; groupLabel(id: string): string; group(id: string): string; positioner: string; arrow: string; }>`		菜单各元素的 id，便于组合使用
`loopFocus`	`boolean`	`false`	键盘导航是否循环
`navigate`	`(details: menu.NavigateDetails) => void`		选中项为锚点元素时用于导航到该项的函数
`open`	`boolean`		菜单的受控展开状态
`positioning`	`menu.PositioningOptions`		用于动态定位菜单的选项
`triggerValue`	`string \| null`		当前打开菜单的触发器值
`typeahead`	`boolean`	`true`	按下可打印字符时是否触发输入即查找导航

#Separator

纯造型的部件——自身没有属性，沿用部件结构的共享样式。

#TriggerItem

纯造型的部件——自身没有属性，沿用部件结构的共享样式。

#Trigger

属性	类型	默认值	描述
`value`	`string`		用于标识该触发器的值