Dropdown Menu 下拉菜单

由按钮触发的操作菜单。在指针设备 / 宽屏上锚定显示；在紧凑触屏上自动变为行高适合触控的底部面板。

基础用法

SDropdownMenu() {
  SDropdownMenuTrigger() { SButton({ text: 'Open', variant: 'outline' }) }
  SDropdownMenuContent() {
    SDropdownMenuLabel({ text: 'My Account' })
    SDropdownMenuSeparator()
    SDropdownMenuItem({ text: 'Profile', icon: 'user', shortcut: '⇧⌘P', onSelect: () => ... })
    SDropdownMenuItem({ text: 'Settings', icon: 'settings', shortcut: '⌘S' })
    SDropdownMenuSeparator()
    SDropdownMenuItem({ text: 'Log out', icon: 'log-out', variant: 'destructive' })
  }
}

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

复选与单选菜单项

SDropdownMenuCheckboxItem({ text: 'Status Bar', checked: this.statusBar!! })
SDropdownMenuRadioGroup({ value: this.panelPosition!! }) {
  SDropdownMenuRadioItem({ value: 'top', text: 'Top' })
  SDropdownMenuRadioItem({ value: 'bottom', text: 'Bottom' })
}

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

API

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

SDropdownMenu

shadcn-vue 的 DropdownMenu。指针 / 宽屏上为锚定的菜单；紧凑的触控屏上会自动变为底部面板，行高适合触控（adaptive: 'auto'）。较长的菜单会在触发器旁边的可用空间内滚动。

条目通过 onSelect 上报激活（在条目上链式调用的 .onClick() 不会触发：行自身的点击——同时也服务键盘和屏幕阅读器——会接管）。

属性	类型	默认值	说明
open!!	boolean | undefined	undefined
defaultOpen	boolean	false

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

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

SDropdownMenuTrigger

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

SDropdownMenuContent

bg-popover min-w-[8rem] rounded-md border p-1 shadow-md，或紧凑的触控屏上的底部面板。

属性	类型	默认值	说明
side	SparkSide SparkSide = 'top' | 'right' | 'bottom' | 'left'	'bottom'
alignment	SparkAlign SparkAlign = 'start' | 'center' | 'end'	'start'
sideOffset	number	4
adaptive	SparkAdaptive SparkAdaptive = 'auto' | 'pointer' | 'touch'	'auto'
panelWidth	number	224	面板宽度，单位 vp（shadcn 示例使用 w-56 = 224）；子项以此为基准计算尺寸
tokens	SparkSurfaceTokens	{}	实例级表面令牌覆盖（实例 → 主题令牌 → 配方），参见 {@link SparkSurfaceTokens}。

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

SDropdownMenuItem

操作行；激活后关闭菜单（除非设置了 keepOpen）。

属性	类型	默认值	说明
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	() => { }	reka 风格的 select 事件：点按、点击、空格 / Enter 以及屏幕阅读器激活

SDropdownMenuCheckboxItem

带对勾标记的条目；切换 checked。非受控（defaultChecked）的值会在多次打开之间记住，以 value 为键（默认：label）。

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

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

SDropdownMenuRadioGroup

单选分组。非受控（defaultValue）的值会在多次打开之间记住，以 name 为键（默认：defaultValue——共用同一个 defaultValue 的分组请使用不同的 name）。

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

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

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

SDropdownMenuRadioItem

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

SDropdownMenuLabel

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

SDropdownMenuSeparator

无属性。

SDropdownMenuGroup

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