

<DemoTitle title="Dropdown" desc="向下弹出的列表。">
#### API

<AntdApiRef url="https://ant.design/components/dropdown-cn/#api"></AntdApiRef>


## antd API

通用属性参考：[通用属性](/docs/react/common-props)

### Dropdown

| 参数 | 说明 | 类型 | 默认值 | 版本 | 
|--------|--------|--------|--------|--------|
| arrow | 下拉框箭头是否显示 | boolean \| { pointAtCenter: boolean } | false |  | 
| autoAdjustOverflow | 下拉框被遮挡时自动调整位置 | boolean | true | 5.2.0 | 
| autoFocus | 打开后自动聚焦下拉框 | boolean | false | 4.21.0 | 
| disabled | 菜单是否禁用 | boolean | - |  | 
| destroyOnHidden | 关闭后是否销毁 Dropdown | boolean | false | 5.25.0 | 
| popupRender | 自定义弹出框内容 | (menus: ReactNode) => ReactNode | - | 5.25.0 | 
| getPopupContainer | 菜单渲染父节点。默认渲染到 body 上，如果你遇到菜单滚动定位问题，试试修改为滚动的区域，并相对其定位。 | (triggerNode: HTMLElement) => HTMLElement | () => document.body |  | 
| menu | 菜单配置项 |  | - | 4.24.0 | 
| overlayClassName | 下拉根元素的类名称 | string | - |  | 
| overlayStyle | 下拉根元素的样式 | CSSProperties | - |  | 
| placement | 菜单弹出位置： | string | bottomLeft |  | 
| trigger | 触发下拉的行为，移动端不支持 hover | Array< | [ |  | 
| open | 菜单是否显示，小于 4.23.0 使用  | boolean | - | 4.23.0 | 
| onOpenChange | 菜单显示状态改变时调用，点击菜单按钮导致的消失不会触发。小于 4.23.0 使用  | (open: boolean, info: { source: 'trigger' \| 'menu' }) => void | - | info.source | 


### Dropdown.Button

属性与 Dropdown 的相同。还包含以下属性：

| 参数 | 说明 | 类型 | 默认值 | 版本 | 
|--------|--------|--------|--------|--------|
| buttonsRender | 自定义左右两个按钮 | (buttons: ReactNode[]) => ReactNode[] | - |  | 
| loading | 设置按钮载入状态，和  | boolean \| { delay: number, icon: ReactNode } | false | icon: 5.23.0 | 
| danger | 设置危险按钮 | boolean | - | 4.23.0 | 
| icon | 右侧的 icon | ReactNode | - |  | 
| size | 按钮大小，和  | large | middle |  | 
| type | 按钮类型，和  | primary | default |  | 
| onClick | 点击左侧按钮的回调，和  | (event: React.MouseEvent) => void | - |  | 


## 注意

请确保 `Dropdown` 的子元素能接受 `onMouseEnter`、`onMouseLeave`、`onFocus`、`onClick` 事件。
## antd API

### Menu

| 参数 | 说明 | 类型 | 默认值 | 版本 | 
|--------|--------|--------|--------|--------|
| defaultOpenKeys | 初始展开的 SubMenu 菜单项 key 数组 | string[] | - |  | 
| defaultSelectedKeys | 初始选中的菜单项 key 数组 | string[] | - |  | 
| expandIcon | 自定义展开图标 | ReactNode \|  | - | 4.9.0 | 
| forceSubMenuRender | 在子菜单展示之前就渲染进 DOM | boolean | false |  | 
| inlineCollapsed | inline 时菜单是否收起状态 | boolean | - |  | 
| inlineIndent | inline 模式的菜单缩进宽度 | number | 24 |  | 
| items | 菜单内容 |  | - | 4.20.0 | 
| mode | 菜单类型，现在支持垂直、水平、和内嵌模式三种 | vertical | vertical |  | 
| multiple | 是否允许多选 | boolean | false |  | 
| openKeys | 当前展开的 SubMenu 菜单项 key 数组 | string[] | - |  | 
| overflowedIndicator | 用于自定义 Menu 水平空间不足时的省略收缩的图标 | ReactNode |  |  | 
| selectable | 是否允许选中 | boolean | true |  | 
| selectedKeys | 当前选中的菜单项 key 数组 | string[] | - |  | 
| style | 根节点样式 | CSSProperties | - |  | 
| subMenuCloseDelay | 用户鼠标离开子菜单后关闭延时，单位：秒 | number | 0.1 |  | 
| subMenuOpenDelay | 用户鼠标进入子菜单后开启延时，单位：秒 | number | 0 |  | 
| theme | 主题颜色 | light | light |  | 
| triggerSubMenuAction | SubMenu 展开/关闭的触发行为 | hover | hover |  | 
| onClick | 点击 MenuItem 调用此函数 | function({ item, key, keyPath, domEvent }) | - |  | 
| onDeselect | 取消选中时调用，仅在 multiple 生效 | function({ item, key, keyPath, selectedKeys, domEvent }) | - |  | 
| onOpenChange | SubMenu 展开/关闭的回调 | function(openKeys: string[]) | - |  | 
| onSelect | 被选中时调用 | function({ item, key, keyPath, selectedKeys, domEvent }) | -   |  | 


更多属性查看 [rc-menu](https://github.com/react-component/menu#api)

### ItemType

type ItemType = [MenuItemType](#menuitemtype) | [SubMenuType](#submenutype) | [MenuItemGroupType](#menuitemgrouptype) | [MenuDividerType](#menudividertype);

#### MenuItemType

| 参数 | 说明 | 类型 | 默认值 | 版本 | 
|--------|--------|--------|--------|--------|
| danger | 展示错误状态样式 | boolean | false |  | 
| disabled | 是否禁用 | boolean | false |  | 
| extra | 额外节点 | ReactNode | - | 5.21.0 | 
| icon | 菜单图标 | ReactNode | - |  | 
| key | item 的唯一标志 | string | - |  | 
| label | 菜单项标题 | ReactNode | - |  | 
| title | 设置收缩时展示的悬浮标题 | string | - |  | 


#### SubMenuType

| 参数 | 说明 | 类型 | 默认值 | 版本 | 
|--------|--------|--------|--------|--------|
| children | 子菜单的菜单项 |  | - |  | 
| disabled | 是否禁用 | boolean | false |  | 
| icon | 菜单图标 | ReactNode | - |  | 
| key | 唯一标志 | string | - |  | 
| label | 菜单项标题 | ReactNode | - |  | 
| popupClassName | 子菜单样式， | string | - |  | 
| popupOffset | 子菜单偏移量， | [number, number] | - |  | 
| onTitleClick | 点击子菜单标题 | function({ key, domEvent }) | - |  | 
| theme | 设置子菜单的主题，默认从 Menu 上继承 | light | - |  | 


#### MenuItemGroupType

定义类型为 `group` 时，会作为分组处理:


```ts
const groupItem = {
  type: 'group', // Must have
  label: 'My Group',
  children: [],
};
```


| 参数 | 说明 | 类型 | 默认值 | 版本 | 
|--------|--------|--------|--------|--------|
| children | 分组的菜单项 |  | - |  | 
| label | 分组标题 | ReactNode | - |  | 


#### MenuDividerType

菜单项分割线，只用在弹出菜单内，需要定义类型为 `divider`：


```ts
const dividerItem = {
  type: 'divider', // Must have
};
```


| 参数 | 说明 | 类型 | 默认值 | 版本 | 
|--------|--------|--------|--------|--------|
| dashed | 是否虚线 | boolean | false |  |