组件

OneMenu

value 与 open 可分别受控；defaultValue 与 defaultOpen 提供非受控初始状态。点击叶子项发出 select，子菜单展开变化发出 openChange。

查看代码收起代码

import { OneMenu, type OneMenuSelectEvent } from '@geektech/one';

const menu = new OneMenu({
  items: [
    { value: 'overview', label: '概览' },
    {
      value: 'city',
      label: '城市',
      children: [
        { value: 'ranking', label: '排行榜' },
        { value: 'compare', label: '对比' },
      ],
    },
  ],
  mode: 'horizontal',
});
menu.on('select', (payload) => {
  const event = payload as OneMenuSelectEvent;
  console.log(event.value);
});

模式与子菜单

垂直模式将子菜单内联展开在左侧缩进区域，同一父级可同时展开多个，accordion 可改为单选展开。水平模式用浮层展示一级子菜单，同时只展开一个，选中叶子项后自动收起。

键盘与 ARIA

菜单根使用 role=list 与 aria-label；子菜单触发器暴露 aria-expanded 与 aria-controls，选中项标记 aria-current=true。聚焦后可用方向键在菜单项间移动焦点，Home 与 End 跳到首尾。

API

OneMenuProps
名称	签名	说明
`items`	`items: readonly OneMenuItem[]`	菜单项，含 value、label、disabled 与可选 children。
`mode`	`mode?: 'vertical' \| 'horizontal'`	菜单方向，默认 vertical。
`value`	`value?: string`	受控选中值。
`defaultValue`	`defaultValue?: string`	非受控初始选中值。
`open`	`open?: readonly string[]`	受控展开的子菜单值。
`defaultOpen`	`defaultOpen?: readonly string[]`	非受控初始展开的子菜单值。
`accordion`	`accordion?: boolean`	垂直模式同时只展开一个子菜单。
`ariaLabel`	`ariaLabel?: string`	菜单可访问名称，默认“菜单”。

OneMenu 事件
名称	签名	说明
`select`	`(event: OneMenuSelectEvent) => void`	事件包含 value: string 与 originalEvent: Event。
`openChange`	`(event: OneMenuOpenChangeEvent) => void`	事件包含 value: string[] 与 originalEvent: Event。