# 更多菜单 · MoreMenu

- 页面: https://jiguang132.com/zh/resources/astryx/docs/more-menu
- 资源: Astryx (https://jiguang132.com/zh/resources/astryx.md)
- 全部指南: https://jiguang132.com/zh/resources/astryx/docs.md

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

## 安装与前置条件

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

需要 React 19+，按顺序导入基础 CSS 和主题，并设置 Theme Provider。参见[开始使用](/resources/astryx/docs/getting-started)。

## 示例与使用方式

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

## API 与上游详细参考

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

## More Menu

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

```json
{
  "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.


## 完整示例的额外依赖

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

```bash
npm install @heroicons/react@2.2.0
```

---

JGuang 全部资源索引: https://jiguang132.com/llms.txt