浮层
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
一块菜单表面。
菜单是一串动作。如果这些项是去往某处的,它们属于导航;如果它们是在设置一个值,那是 Select 或 RadioGroup——Radix 这两种菜单变体都有,而一个假装自己是选项的普通菜单项,会丢掉读屏软件需要的勾选状态。
同时接受 ComponentProps<typeof DropdownMenuPrimitive.Content> 里的全部属性,它们会直接透传给底层元素,不再逐条列出。
DropdownMenuItem
一个菜单行。
高亮由 Radix 的 data-highlighted 驱动,指针悬停和键盘聚焦都覆盖到了——只写 :hover 会让键盘用户看不见自己在哪。
| 属性 | 类型 | 默认值 | 说明 |
|---|---|---|---|
| destructive | boolean | false | 把这一行画成破坏性的。用于删除、吊销、断开连接。 |
| icon | LucideIcon | 可选的前置图标,渲染在标签之前。 |
同时接受 ComponentProps<typeof DropdownMenuPrimitive.Item> 里的全部属性,它们会直接透传给底层元素,不再逐条列出。
DropdownMenuSeparator
菜单分组之间的细线分隔。
这个组件没有自己的属性。
DropdownMenuLabel
一组菜单项的等宽小标题。
这个组件没有自己的属性。
再导出
DropdownMenu = DropdownMenuPrimitive.RootRadix DropdownMenu 的根节点和触发器,以带类型的原样透传再导出。
DropdownMenuTrigger = DropdownMenuPrimitive.Trigger键盘操作
| 按键 | 作用 |
|---|---|
| EnterSpace↓ | 打开菜单并落到第一项。 |
| ↑↓ | 在菜单项之间移动。 |
| a–z | 跳到下一个以该字母开头的项。 |
| Escape | 关闭菜单并把焦点还给触发器。 |
无障碍
- 在有边界的框里——设备预览、内嵌控制台——用 `<OverlayContainer container={el}>` 包住这棵子树。面板会渲染进那个元素,按它的边界翻转,而不是按视口;框上设的 `dir` 和 `data-density` 也就跟着生效了。
- 高亮由 data-highlighted 驱动,同时覆盖悬停和键盘焦点——只写 :hover 会让键盘用户看不见自己在哪。