跳到正文
GitHub

浮层

DropdownMenu

一组动作构成的菜单。

什么时候用它

动作。会跳转的项属于导航;会设定某个值的是 Select 或 RadioGroup。

示例

default

说明

Radix DropdownMenu 的根节点和触发器,以带类型的原样透传再导出。

属性

这个组件没有自己的属性。

组成部分

Composed at the call site rather than configured through props, so a layout this component did not anticipate is still expressible.

DropdownMenuContent

一块菜单表面。

菜单是一串动作。如果这些项是去往某处的,它们属于导航;如果它们是在设置一个值,那是 SelectRadioGroup——Radix 这两种菜单变体都有,而一个假装自己是选项的普通菜单项,会丢掉读屏软件需要的勾选状态。

同时接受 ComponentProps<typeof DropdownMenuPrimitive.Content> 里的全部属性,它们会直接透传给底层元素,不再逐条列出。

DropdownMenuItem

一个菜单行。

高亮由 Radix 的 data-highlighted 驱动,指针悬停和键盘聚焦都覆盖到了——只写 :hover 会让键盘用户看不见自己在哪。

DropdownMenuItem props
属性类型默认值说明
destructivebooleanfalse把这一行画成破坏性的。用于删除、吊销、断开连接。
iconLucideIcon可选的前置图标,渲染在标签之前。

同时接受 ComponentProps<typeof DropdownMenuPrimitive.Item> 里的全部属性,它们会直接透传给底层元素,不再逐条列出。

DropdownMenuSeparator

菜单分组之间的细线分隔。

这个组件没有自己的属性。

DropdownMenuLabel

一组菜单项的等宽小标题。

这个组件没有自己的属性。

再导出

DropdownMenu = DropdownMenuPrimitive.Root

Radix DropdownMenu 的根节点和触发器,以带类型的原样透传再导出。

DropdownMenuTrigger = DropdownMenuPrimitive.Trigger

键盘操作

DropdownMenu keyboard interactions
按键作用
EnterSpace打开菜单并落到第一项。
在菜单项之间移动。
a–z跳到下一个以该字母开头的项。
Escape关闭菜单并把焦点还给触发器。

无障碍

  • 在有边界的框里——设备预览、内嵌控制台——用 `<OverlayContainer container={el}>` 包住这棵子树。面板会渲染进那个元素,按它的边界翻转,而不是按视口;框上设的 `dir` 和 `data-density` 也就跟着生效了。
  • 高亮由 data-highlighted 驱动,同时覆盖悬停和键盘焦点——只写 :hover 会让键盘用户看不见自己在哪。