# 下拉菜单 <Experimental></Experimental> Dropdown <Experimental></Experimental>

- 页面: https://jiguang132.com/zh/resources/ant-design-mobile/docs/dropdown
- 资源: Ant Design Mobile (https://jiguang132.com/zh/resources/ant-design-mobile.md)
- 全部指南: https://jiguang132.com/zh/resources/ant-design-mobile/docs.md

向下弹出的菜单面板。

## 安装

```bash
npm install antd-mobile@5.43.0
```

antd-mobile 是移动网页组件库，不是 React Native 或小程序组件。React 19 项目需在入口用 `unstableSetRender` 注册 `createRoot`，否则 Toast、Dialog 等命令式 API 无法渲染；深色模式通过 `<html data-prefers-color-scheme="dark">` 切换。

示例来自 Ant Design Mobile 官方仓库（MIT），固定在 npm 5.43.0 对应的提交；示例中的 `DemoBlock` 等展示辅助组件由 JGuang 重写，不属于 antd-mobile 的 API。

向下弹出的菜单面板。

## 何时使用

适用于筛选、排序并更改当前页面内容展示范围或顺序。

## 示例

## Dropdown

### 属性

| 属性 | 说明 | 类型 | 默认值 |
| --- | --- | --- | --- |
| activeKey | 激活的 `Item` `key` | `string \| null` | - |
| arrowIcon | 自定义箭头图标 | `React.ReactNode` | - |
| closeOnClickAway | 是否在点击外部区域后自动隐藏 | `boolean` | `false` |
| closeOnMaskClick | 是否在点击遮罩后自动隐藏 | `boolean` | `true` |
| defaultActiveKey | 默认激活的 `Item` `key` | `string \| null` | `null` |
| onChange | `activeKey` 变化时触发 | `(activeKey: string \| null)=> void` | - |
| onVisibleChange | 面板显示/隐藏时触发 | `(visible: boolean, info: { key: string \| null }) => void` | - |
| getContainer | 自定义弹窗的父容器 | `HTMLElement \| (() => HTMLElement) \| null` | `document.body` |

### Ref

| 属性  | 说明         | 类型         |
| ----- | ------------ | ------------ |
| close | 关闭下拉菜单 | `() => void` |

## Dropdown.Item

### 属性

| 属性 | 说明 | 类型 | 默认值 |
| --- | --- | --- | --- |
| arrowIcon | 自定义箭头图标 | `React.ReactNode` | - |
| destroyOnClose | 不可见时是否销毁 `DOM` 结构 | `boolean` | `false` |
| forceRender | 被隐藏时是否渲染 `DOM` 结构 | `boolean` | `false` |
| highlight | 高亮 | `boolean` | `false` |
| key | 唯一值 | `string` | - |
| title | 标题 | `ReactNode` | - |
| onClick | 点击事件 | `(event: React.MouseEvent<HTMLDivElement, MouseEvent>) => void` | - |

---

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