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

向下弹出的菜单面板。

安装

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。

向下弹出的菜单面板。

何时使用

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

示例

属性

属性	说明	类型	默认值
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`	-