Dropdown
下拉菜单

向下弹出的列表。
使用import{ Dropdown }from"antd";

何时使用

当页面上的操作命令过多时,用此组件可以收纳操作元素。点击或移入触点,会出现一个下拉菜单。可在列表中进行选择,并执行相应的命令。

  • 用于收罗一组命令操作。
  • Select 用于选择,而 Dropdown 是命令集合。

代码演示

5.21.0

API

通用属性参考:通用属性

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

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

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

注意

请确保 Dropdown 的子元素能接受 onMouseEnteronMouseLeaveonFocusonClick 事件。

主题变量(Design Token)

组件 Token如何定制?

Token 名称描述类型默认值
paddingBlock下拉菜单纵向内边距undefined | PaddingBlock<string | number>5
zIndexPopup下拉菜单 z-indexnumber1050

全局 Token如何定制?

FAQ

你可以通过 width: max-content 来解决这个问题,参考 #43025