向下弹出的列表。
当页面上的操作命令过多时,用此组件可以收纳操作元素。点击或移入触点,会出现一个下拉菜单。可在列表中进行选择,并执行相应的命令。
import React from 'react';
import { DownOutlined, SmileOutlined } from '@ant-design/icons';
import type { MenuProps } from 'antd';
import { Dropdown, Space } from 'antd';
const items: MenuProps['items'] = [
{
key: '1',
label: (
<a target="_blank" rel="noopener noreferrer" href="https://www.antgroup.com">
1st menu item
</a>
),
},
{
key: '2',
label: (
<a target="_blank" rel="noopener noreferrer" href="https://www.aliyun.com">
2nd menu item (disabled)
</a>
),
icon: <SmileOutlined />,
disabled: true,
},
{
key: '3',
label: (
<a target="_blank" rel="noopener noreferrer" href="https://www.luohanacademy.com">
3rd menu item (disabled)
</a>
),
disabled: true,
},
{
key: '4',
danger: true,
label: 'a danger item',
},
];
const App: React.FC = () => (
<Dropdown menu={{ items }}>
<a onClick={(e) => e.preventDefault()}>
<Space>
Hover me
<DownOutlined />
</Space>
</a>
</Dropdown>
);
export default App;
import React from 'react';
import type { MenuProps } from 'antd';
import { Button, Dropdown } from 'antd';
const items: MenuProps['items'] = [
{
key: '1',
label: (
<a target="_blank" rel="noopener noreferrer" href="https://www.antgroup.com">
1st menu item
</a>
),
},
{
key: '2',
label: (
<a target="_blank" rel="noopener noreferrer" href="https://www.aliyun.com">
2nd menu item
</a>
),
},
{
key: '3',
label: (
<a target="_blank" rel="noopener noreferrer" href="https://www.luohanacademy.com">
3rd menu item
</a>
),
},
];
const App: React.FC = () => (
<>
<Dropdown menu={{ items }} placement="bottomLeft" arrow>
<Button>bottomLeft</Button>
</Dropdown>
<Dropdown menu={{ items }} placement="bottom" arrow>
<Button>bottom</Button>
</Dropdown>
<Dropdown menu={{ items }} placement="bottomRight" arrow>
<Button>bottomRight</Button>
</Dropdown>
<br />
<Dropdown menu={{ items }} placement="topLeft" arrow>
<Button>topLeft</Button>
</Dropdown>
<Dropdown menu={{ items }} placement="top" arrow>
<Button>top</Button>
</Dropdown>
<Dropdown menu={{ items }} placement="topRight" arrow>
<Button>topRight</Button>
</Dropdown>
</>
);
export default App;
#components-dropdown-demo-arrow .ant-btn {
margin-right: 8px;
margin-bottom: 8px;
}
.ant-row-rtl #components-dropdown-demo-arrow .ant-btn {
margin-right: 0;
margin-bottom: 8px;
margin-left: 8px;
}
import React from 'react';
import type { MenuProps } from 'antd';
import { Button, Dropdown } from 'antd';
const items: MenuProps['items'] = [
{
key: '1',
label: (
<a target="_blank" rel="noopener noreferrer" href="https://www.antgroup.com">
1st menu item
</a>
),
},
{
key: '2',
label: (
<a target="_blank" rel="noopener noreferrer" href="https://www.aliyun.com">
2nd menu item
</a>
),
},
{
key: '3',
label: (
<a target="_blank" rel="noopener noreferrer" href="https://www.luohanacademy.com">
3rd menu item
</a>
),
},
];
const App: React.FC = () => (
<>
<Dropdown menu={{ items }} placement="bottomLeft" arrow={{ pointAtCenter: true }}>
<Button>bottomLeft</Button>
</Dropdown>
<Dropdown menu={{ items }} placement="bottom" arrow={{ pointAtCenter: true }}>
<Button>bottom</Button>
</Dropdown>
<Dropdown menu={{ items }} placement="bottomRight" arrow={{ pointAtCenter: true }}>
<Button>bottomRight</Button>
</Dropdown>
<br />
<Dropdown menu={{ items }} placement="topLeft" arrow={{ pointAtCenter: true }}>
<Button>topLeft</Button>
</Dropdown>
<Dropdown menu={{ items }} placement="top" arrow={{ pointAtCenter: true }}>
<Button>top</Button>
</Dropdown>
<Dropdown menu={{ items }} placement="topRight" arrow={{ pointAtCenter: true }}>
<Button>topRight</Button>
</Dropdown>
</>
);
export default App;
#components-dropdown-demo-arrow-center .ant-btn {
margin-right: 8px;
margin-bottom: 8px;
}
.ant-row-rtl #components-dropdown-demo-arrow-center .ant-btn {
margin-right: 0;
margin-bottom: 8px;
margin-left: 8px;
}
import React from 'react';
import { DownOutlined } from '@ant-design/icons';
import type { MenuProps } from 'antd';
import { Dropdown, message, Space } from 'antd';
const onClick: MenuProps['onClick'] = ({ key }) => {
message.info(`Click on item ${key}`);
};
const items: MenuProps['items'] = [
{
label: '1st menu item',
key: '1',
},
{
label: '2nd menu item',
key: '2',
},
{
label: '3rd menu item',
key: '3',
},
];
const App: React.FC = () => (
<Dropdown menu={{ items, onClick }}>
<a onClick={(e) => e.preventDefault()}>
<Space>
Hover me, Click menu item
<DownOutlined />
</Space>
</a>
</Dropdown>
);
export default App;
import React from 'react';
import { DownOutlined } from '@ant-design/icons';
import { Dropdown, Space, Divider, Button, theme } from 'antd';
import type { MenuProps } from 'antd';
const { useToken } = theme;
const items: MenuProps['items'] = [
{
key: '1',
label: (
<a target="_blank" rel="noopener noreferrer" href="https://www.antgroup.com">
1st menu item
</a>
),
},
{
key: '2',
label: (
<a target="_blank" rel="noopener noreferrer" href="https://www.aliyun.com">
2nd menu item (disabled)
</a>
),
disabled: true,
},
{
key: '3',
label: (
<a target="_blank" rel="noopener noreferrer" href="https://www.luohanacademy.com">
3rd menu item (disabled)
</a>
),
disabled: true,
},
];
const App: React.FC = () => {
const { token } = useToken();
const contentStyle = {
backgroundColor: token.colorBgElevated,
borderRadius: token.borderRadiusLG,
boxShadow: token.boxShadowSecondary,
};
const menuStyle = {
boxShadow: 'none',
};
return (
<Dropdown
menu={{ items }}
dropdownRender={(menu) => (
<div style={contentStyle}>
{React.cloneElement(menu as React.ReactElement, { style: menuStyle })}
<Divider style={{ margin: 0 }} />
<Space style={{ padding: 8 }}>
<Button type="primary">Click me!</Button>
</Space>
</div>
)}
>
<a onClick={(e) => e.preventDefault()}>
<Space>
Hover me
<DownOutlined />
</Space>
</a>
</Dropdown>
);
};
export default App;
import React, { useState } from 'react';
import { DownOutlined } from '@ant-design/icons';
import type { MenuProps } from 'antd';
import { Dropdown, Space } from 'antd';
const App: React.FC = () => {
const [open, setOpen] = useState(false);
const handleMenuClick: MenuProps['onClick'] = (e) => {
if (e.key === '3') {
setOpen(false);
}
};
const handleOpenChange = (flag: boolean) => {
setOpen(flag);
};
const items: MenuProps['items'] = [
{
label: 'Clicking me will not close the menu.',
key: '1',
},
{
label: 'Clicking me will not close the menu also.',
key: '2',
},
{
label: 'Clicking me will close the menu.',
key: '3',
},
];
return (
<Dropdown
menu={{
items,
onClick: handleMenuClick,
}}
onOpenChange={handleOpenChange}
open={open}
>
<a onClick={(e) => e.preventDefault()}>
<Space>
Hover me
<DownOutlined />
</Space>
</a>
</Dropdown>
);
};
export default App;
import React, { useState } from 'react';
import { DownOutlined } from '@ant-design/icons';
import type { MenuProps } from 'antd';
import { Dropdown, Space } from 'antd';
const items: MenuProps['items'] = [
{
label: 'Submit and continue',
key: '1',
},
];
const App: React.FC = () => {
const [loadings, setLoadings] = useState<boolean[]>([]);
const enterLoading = (index: number) => {
setLoadings((state) => {
const newLoadings = [...state];
newLoadings[index] = true;
return newLoadings;
});
setTimeout(() => {
setLoadings((state) => {
const newLoadings = [...state];
newLoadings[index] = false;
return newLoadings;
});
}, 6000);
};
return (
<Space direction="vertical">
<Dropdown.Button type="primary" loading menu={{ items }}>
Submit
</Dropdown.Button>
<Dropdown.Button type="primary" size="small" loading menu={{ items }}>
Submit
</Dropdown.Button>
<Dropdown.Button
type="primary"
loading={loadings[0]}
menu={{ items }}
onClick={() => enterLoading(0)}
>
Submit
</Dropdown.Button>
<Dropdown.Button
icon={<DownOutlined />}
loading={loadings[1]}
menu={{ items }}
onClick={() => enterLoading(1)}
>
Submit
</Dropdown.Button>
</Space>
);
};
export default App;
import React from 'react';
import type { MenuProps } from 'antd';
import { Button, Dropdown, Space } from 'antd';
const items: MenuProps['items'] = [
{
key: '1',
label: (
<a target="_blank" rel="noopener noreferrer" href="https://www.antgroup.com">
1st menu item
</a>
),
},
{
key: '2',
label: (
<a target="_blank" rel="noopener noreferrer" href="https://www.aliyun.com">
2nd menu item
</a>
),
},
{
key: '3',
label: (
<a target="_blank" rel="noopener noreferrer" href="https://www.luohanacademy.com">
3rd menu item
</a>
),
},
];
const App: React.FC = () => (
<Space direction="vertical">
<Space wrap>
<Dropdown menu={{ items }} placement="bottomLeft">
<Button>bottomLeft</Button>
</Dropdown>
<Dropdown menu={{ items }} placement="bottom">
<Button>bottom</Button>
</Dropdown>
<Dropdown menu={{ items }} placement="bottomRight">
<Button>bottomRight</Button>
</Dropdown>
</Space>
<Space wrap>
<Dropdown menu={{ items }} placement="topLeft">
<Button>topLeft</Button>
</Dropdown>
<Dropdown menu={{ items }} placement="top">
<Button>top</Button>
</Dropdown>
<Dropdown menu={{ items }} placement="topRight">
<Button>topRight</Button>
</Dropdown>
</Space>
</Space>
);
export default App;
import React from 'react';
import { DownOutlined } from '@ant-design/icons';
import type { MenuProps } from 'antd';
import { Dropdown, Space } from 'antd';
const items: MenuProps['items'] = [
{
label: (
<a target="_blank" rel="noopener noreferrer" href="https://www.antgroup.com">
1st menu item
</a>
),
key: '0',
},
{
label: (
<a target="_blank" rel="noopener noreferrer" href="https://www.aliyun.com">
2nd menu item
</a>
),
key: '1',
},
{
type: 'divider',
},
{
label: '3rd menu item(disabled)',
key: '3',
disabled: true,
},
];
const App: React.FC = () => (
<Dropdown menu={{ items }}>
<a onClick={(e) => e.preventDefault()}>
<Space>
Hover me
<DownOutlined />
</Space>
</a>
</Dropdown>
);
export default App;
import React from 'react';
import { DownOutlined } from '@ant-design/icons';
import type { MenuProps } from 'antd';
import { Dropdown, Space } from 'antd';
const items: MenuProps['items'] = [
{
label: <a href="https://www.antgroup.com">1st menu item</a>,
key: '0',
},
{
label: <a href="https://www.aliyun.com">2nd menu item</a>,
key: '1',
},
{
type: 'divider',
},
{
label: '3rd menu item',
key: '3',
},
];
const App: React.FC = () => (
<Dropdown menu={{ items }} trigger={['click']}>
<a onClick={(e) => e.preventDefault()}>
<Space>
Click me
<DownOutlined />
</Space>
</a>
</Dropdown>
);
export default App;
import React from 'react';
import { DownOutlined, UserOutlined } from '@ant-design/icons';
import type { MenuProps } from 'antd';
import { Button, Dropdown, message, Space, Tooltip } from 'antd';
const handleButtonClick = (e: React.MouseEvent<HTMLButtonElement>) => {
message.info('Click on left button.');
console.log('click left button', e);
};
const handleMenuClick: MenuProps['onClick'] = (e) => {
message.info('Click on menu item.');
console.log('click', e);
};
const items: MenuProps['items'] = [
{
label: '1st menu item',
key: '1',
icon: <UserOutlined />,
},
{
label: '2nd menu item',
key: '2',
icon: <UserOutlined />,
},
{
label: '3rd menu item',
key: '3',
icon: <UserOutlined />,
danger: true,
},
{
label: '4rd menu item',
key: '4',
icon: <UserOutlined />,
danger: true,
disabled: true,
},
];
const menuProps = {
items,
onClick: handleMenuClick,
};
const App: React.FC = () => (
<Space wrap>
<Dropdown.Button menu={menuProps} onClick={handleButtonClick}>
Dropdown
</Dropdown.Button>
<Dropdown.Button menu={menuProps} placement="bottom" icon={<UserOutlined />}>
Dropdown
</Dropdown.Button>
<Dropdown.Button menu={menuProps} onClick={handleButtonClick} disabled>
Dropdown
</Dropdown.Button>
<Dropdown.Button
menu={menuProps}
buttonsRender={([leftButton, rightButton]) => [
<Tooltip title="tooltip" key="leftButton">
{leftButton}
</Tooltip>,
React.cloneElement(rightButton as React.ReactElement<any, string>, { loading: true }),
]}
>
With Tooltip
</Dropdown.Button>
<Dropdown menu={menuProps}>
<Button>
<Space>
Button
<DownOutlined />
</Space>
</Button>
</Dropdown>
<Dropdown.Button menu={menuProps} onClick={handleButtonClick} danger>
Danger
</Dropdown.Button>
</Space>
);
export default App;
import React from 'react';
import { DownOutlined } from '@ant-design/icons';
import type { MenuProps } from 'antd';
import { Dropdown, Space, Typography } from 'antd';
const items: MenuProps['items'] = [
{
key: '1',
label: 'Item 1',
},
{
key: '2',
label: 'Item 2',
},
{
key: '3',
label: 'Item 3',
},
];
const App: React.FC = () => (
<Dropdown
menu={{
items,
selectable: true,
defaultSelectedKeys: ['3'],
}}
>
<Typography.Link>
<Space>
Selectable
<DownOutlined />
</Space>
</Typography.Link>
</Dropdown>
);
export default App;
属性如下
参数 | 说明 | 类型 | 默认值 | 版本 |
---|---|---|---|---|
arrow | 下拉框箭头是否显示 | boolean | { pointAtCenter: boolean } | false | |
autoAdjustOverflow | 下拉框被遮挡时自动调整位置 | boolean | true | 5.2.0 |
autoFocus | 打开后自动聚焦下拉框 | boolean | false | 4.21.0 |
disabled | 菜单是否禁用 | boolean | - | |
destroyPopupOnHide | 关闭后是否销毁 Dropdown | boolean | false | |
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 topRight | string | bottomLeft | |
trigger | 触发下拉的行为, 移动端不支持 hover | Array<click |hover |contextMenu > | [hover ] | |
open | 菜单是否显示,小于 4.23.0 使用 visible (为什么?) | boolean | - | 4.23.0 |
onOpenChange | 菜单显示状态改变时调用,点击菜单按钮导致的消失不会触发。小于 4.23.0 使用 onVisibleChange (为什么?) | (open: boolean) => void | - | 4.23.0 |
属性与 Dropdown 的相同。还包含以下属性:
请确保 Dropdown
的子元素能接受 onMouseEnter
、onMouseLeave
、onFocus
、onClick
事件。