Menubar 菜单栏

桌面应用中常见的常驻菜单栏。有菜单打开时，悬停到另一个触发器会切换过去，← / → 在菜单间移动。放不下的菜单会收进末尾的“更多”菜单。

基础用法

SMenubar() {
  SMenubarMenu() {
    SMenubarTrigger({ text: 'File' })
    SMenubarContent() {
      SMenubarItem({ text: 'New Tab', shortcut: '⌘T', onSelect: () => ... })
      SMenubarItem({ text: 'New Window', shortcut: '⌘N' })
      SMenubarSeparator()
      SMenubarItem({ text: 'Print…', shortcut: '⌘P' })
    }
  }
  SMenubarMenu() {
    SMenubarTrigger({ text: 'View' })
    SMenubarContent() {
      SMenubarCheckboxItem({ text: 'Always Show Bookmarks Bar', checked: this.bookmarks!! })
    }
  }
  SMenubarMenu() {
    SMenubarTrigger({ text: 'Profiles' })
    SMenubarContent() {
      SMenubarRadioGroup({ value: this.profile!! }) {
        SMenubarRadioItem({ value: 'andy', text: 'Andy' })
        SMenubarRadioItem({ value: 'benoit', text: 'Benoit' })
      }
    }
  }
}

网页近似预览，真机效果以 HarmonyOS 渲染为准。

响应式

菜单栏会测量自身宽度。变窄时末尾的菜单移入“更多”，并按名称分组列出。

Column() { SMenubar() { ... } }.width(this.narrow ? 200 : '100%')

网页近似预览，真机效果以 HarmonyOS 渲染为准。

API

从组件库源码中的 @Param / @Event / @BuilderParam 声明自动提取。

SMenubar

shadcn-vue 的 Menubar：由菜单触发器组成的横向栏（h-9 rounded-md border p-1 shadow-xs），每个触发器都会在其下方打开一个锚定的下拉菜单。打开某个菜单后，悬停（或点按）另一个触发器会切换到该菜单，← / → 可在各菜单之间移动。

响应式：栏会测量自身；放不下触发器的菜单会折叠进末尾的「更多」（省略号）触发器中，其条目按标签分组列出。在紧凑的触控屏上，菜单以底部面板的形式打开。

属性	类型	默认值	说明
adaptive	SparkAdaptive SparkAdaptive = 'auto' | 'pointer' | 'touch'	'auto'

插槽: 子组件（尾随闭包）

SMenubarMenu

栏中的一个菜单：一个触发器加上其内容。

插槽: 子组件（尾随闭包）

SMenubarTrigger

rounded-sm px-2 py-1 text-sm font-medium，菜单打开时使用强调色背景。

属性	类型	默认值	说明
text	ResourceStr	''

SMenubarContent

菜单的下拉面板：bg-popover min-w-[12rem] rounded-md border p-1 shadow-md，位于其触发器下方。

属性	类型	默认值	说明
panelWidth	number	192	面板宽度，单位 vp（min-w-[12rem] = 192）；各行以此为基准计算尺寸
adaptive	SparkAdaptive SparkAdaptive = 'auto' | 'pointer' | 'touch'	'auto'

插槽: 子组件（尾随闭包）

SMenubarItem

操作行；激活后关闭菜单（除非设置了 keepOpen）。点按、点击、空格 / Enter 以及屏幕阅读器激活都会触发 onSelect（在条目上链式调用的 .onClick() 不会触发）。

属性	类型	默认值	说明
text	ResourceStr	''
icon	string | undefined	undefined
shortcut	string | undefined	undefined
variant	MenuItemVariant MenuItemVariant = 'default' | 'destructive'	'default'
disabled	boolean	false
inset	boolean	false
keepOpen	boolean	false

事件	类型	默认值	说明
onSelect	() => void	() => { }

SMenubarCheckboxItem

属性	类型	默认值	说明
value	string	''	非受控记忆的标识（默认：label）
text	ResourceStr	''
shortcut	string | undefined	undefined
checked!!	boolean | undefined	undefined
defaultChecked	boolean	false
disabled	boolean	false

事件	类型	默认值	说明
onCheckedChange	(v: boolean) => void	() => { }

SMenubarRadioGroup

属性	类型	默认值	说明
name	string	''	非受控记忆的标识（默认：defaultValue）
value!!	string | undefined	undefined
defaultValue	string	''

事件	类型	默认值	说明
onValueChange	(v: string) => void	() => { }

插槽: 子组件（尾随闭包）

SMenubarRadioItem

属性	类型	默认值	说明
value	string	''
text	ResourceStr	''
disabled	boolean	false

SMenubarLabel

属性	类型	默认值	说明
text	ResourceStr	''
inset	boolean	false

SMenubarSeparator

无属性。

SMenubarGroup

插槽: 子组件（尾随闭包）