更多菜单 · MoreMenu

更多菜单用于操作场景。下面的官方示例展示原生用法与状态，属性名保持上游 API。

安装与前置条件

npm install @astryxdesign/core@0.7.1 @astryxdesign/theme-neutral@0.7.1 @stylexjs/stylex@0.19.0

需要 React 19+，按顺序导入基础 CSS 和主题，并设置 Theme Provider。参见开始使用。

示例与使用方式

更多菜单 · 综合展示 1：首先体验这个示例，再查看代码理解组件的组合方式。
更多菜单 · 交互示例 2：可交互查看这一用法的行为，复制代码时保留它实际使用的属性与导入。
更多菜单 · 默认状态 3：可交互查看这一用法的行为，复制代码时保留它实际使用的属性与导入。
更多菜单 · 交互示例 4：可交互查看这一用法的行为，复制代码时保留它实际使用的属性与导入。
更多菜单 · 交互示例 5：可交互查看这一用法的行为，复制代码时保留它实际使用的属性与导入。

API 与上游详细参考

优先使用 0.7.1 官方中文说明；上游尚未提供中文的条目保留英文。属性名、类型及默认值保持原生 API，不把示例状态名称当成组件属性。

MoreMenu is a three-dot button that opens a list of actions. Use it for secondary actions that don't need to be always visible, like in table rows, card headers, or toolbars.

属性	类型	默认值	说明
items *	DropdownMenuOption[]		菜单项，由操作、分割线和分组组成的数据数组。类型与 DropdownMenu 的 items 属性相同。
label	string	'More options'	触发按钮的无障碍标签（aria-label）和工具提示文本。
variant	ButtonVariant	'ghost'	触发按钮的视觉样式变体。
size	ButtonSize	'md'	触发按钮的尺寸。
icon	ReactNode		覆盖默认的三点图标。接受任何 ReactNode。
isDisabled	boolean	false	菜单触发器是否禁用。
placement	'above' \| 'below' \| 'start' \| 'end'	'below'	菜单相对于触发按钮的位置。逻辑方向：start/end 依据菜单自身继承的书写方向解析（RTL 自动镜像）。
alignment	'start' \| 'center' \| 'end'	'start'	沿放置轴的对齐方式。使用 'end' 让菜单与触发器的尾部边缘对齐，这通常是溢出菜单所需的效果。
presentation	'popover' \| 'bottom-sheet' \| 'adaptive'	'popover'	菜单呈现策略。`adaptive` 在指针布局中使用锚定浮层，在主指针为粗略指针且宽度不超过 768px 时使用 BottomSheet。
onOpenChange	(isOpen: boolean) => void		Callback fired when the menu opens or closes.
xstyle	StyleXStyles		用于布局自定义的 StyleX 样式（边距、定位、尺寸）。必须是 stylex.create() 的值，不能是内联样式对象如 style={{}}。

使用建议

Use for overflow or secondary actions; keep primary actions visible outside the menu.
Use dividers or sections to group related actions when the menu has many items.
Use presentation="adaptive" when the visible overflow trigger should open a thumb-reachable BottomSheet on compact touch devices.
避免：Hide primary actions inside a MoreMenu; they should be directly visible.

主题 API

{
  "targets": [
    {
      "className": "astryx-more-menu"
    }
  ]
}

组件结构

Trigger button: Icon-only Button that provides the visible overflow-menu entry point.
Icon-resolved trigger icon: Default semantic three-dot artwork resolved from the active Icon registry.
Caller-rendered trigger content: Arbitrary React content supplied directly as the trigger icon override.
Menu surface: DropdownMenu panel that also carries MoreMenu’s current public target.
Pointer action row: Action or nested-action trigger row rendered by DropdownMenu in the anchored presentation.
Touch action row: ListItem button rendered by DropdownMenu in the BottomSheet presentation.

完整示例的额外依赖

部分示例使用独立图标包。示例清单中的每条安装命令包含该示例实际需要的依赖；若要运行本页全部示例，还需安装：

npm install @heroicons/react@2.2.0

更多菜单