Dropdown下拉菜单
向下弹出的列表。
何时使用#
当页面上的操作命令过多时,用此组件可以收纳操作元素。点击或移入触点,会出现一个下拉菜单。可在列表中进行选择,并执行相应的命令。
用于收罗一组命令操作。
Select 用于选择,而 Dropdown 是命令集合。
代码演示
Hover me
TypeScript
JavaScript
import { IArrowDown } from 'infra-design-icons';
import { Dropdown, Menu, Space } from 'infrad';
import React from 'react';
const menu = (
<Menu
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: <IArrowDown />,
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 overlay={menu}>
<a onClick={e => e.preventDefault()}>
<Space>
Hover me
<IArrowDown />
</Space>
</a>
</Dropdown>
);
export default App;
TypeScript
JavaScript
import { Button, Dropdown, Menu } from 'infrad';
import React from 'react';
const menu = (
<Menu
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 overlay={menu} placement="bottomLeft" arrow>
<Button>bottomLeft</Button>
</Dropdown>
<Dropdown overlay={menu} placement="bottom" arrow>
<Button>bottom</Button>
</Dropdown>
<Dropdown overlay={menu} placement="bottomRight" arrow>
<Button>bottomRight</Button>
</Dropdown>
<br />
<Dropdown overlay={menu} placement="topLeft" arrow>
<Button>topLeft</Button>
</Dropdown>
<Dropdown overlay={menu} placement="top" arrow>
<Button>top</Button>
</Dropdown>
<Dropdown overlay={menu} 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;
}
TypeScript
JavaScript
import { Button, Dropdown, Menu } from 'infrad';
import React from 'react';
const menu = (
<Menu
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 overlay={menu} placement="bottomLeft" arrow={{ pointAtCenter: true }}>
<Button>bottomLeft</Button>
</Dropdown>
<Dropdown overlay={menu} placement="bottom" arrow={{ pointAtCenter: true }}>
<Button>bottom</Button>
</Dropdown>
<Dropdown overlay={menu} placement="bottomRight" arrow={{ pointAtCenter: true }}>
<Button>bottomRight</Button>
</Dropdown>
<br />
<Dropdown overlay={menu} placement="topLeft" arrow={{ pointAtCenter: true }}>
<Button>topLeft</Button>
</Dropdown>
<Dropdown overlay={menu} placement="top" arrow={{ pointAtCenter: true }}>
<Button>top</Button>
</Dropdown>
<Dropdown overlay={menu} 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;
}
Hover me, Click menu item
TypeScript
JavaScript
import { IArrowDown } from 'infra-design-icons';
import type { MenuProps } from 'infrad';
import { Dropdown, Menu, message, Space } from 'infrad';
import React from 'react';
const onClick: MenuProps['onClick'] = ({ key }) => {
message.info(`Click on item ${key}`);
};
const menu = (
<Menu
onClick={onClick}
items={[
{
label: '1st menu item',
key: '1',
},
{
label: '2nd menu item',
key: '2',
},
{
label: '3rd menu item',
key: '3',
},
]}
/>
);
const App: React.FC = () => (
<Dropdown overlay={menu}>
<a onClick={e => e.preventDefault()}>
<Space>
Hover me, Click menu item
<IArrowDown />
</Space>
</a>
</Dropdown>
);
export default App;
Selectable
TypeScript
JavaScript
import { DownOutlined } from '@ant-design/icons';
import { Dropdown, Menu, Space, Typography } from 'antd';
import React from 'react';
const menu = (
<Menu
selectable
defaultSelectedKeys={['3']}
items={[
{
key: '1',
label: 'Item 1',
},
{
key: '2',
label: 'Item 2',
},
{
key: '3',
label: 'Item 3',
},
]}
/>
);
const App: React.FC = () => (
<Dropdown overlay={menu}>
<Typography.Link>
<Space>
Selectable
<DownOutlined />
</Space>
</Typography.Link>
</Dropdown>
);
export default App;
TypeScript
JavaScript
import { Button, Dropdown, Menu, Space } from 'infrad';
import React from 'react';
const menu = (
<Menu
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 overlay={menu} placement="bottomLeft">
<Button>bottomLeft</Button>
</Dropdown>
<Dropdown overlay={menu} placement="bottom">
<Button>bottom</Button>
</Dropdown>
<Dropdown overlay={menu} placement="bottomRight">
<Button>bottomRight</Button>
</Dropdown>
</Space>
<Space wrap>
<Dropdown overlay={menu} placement="topLeft">
<Button>topLeft</Button>
</Dropdown>
<Dropdown overlay={menu} placement="top">
<Button>top</Button>
</Dropdown>
<Dropdown overlay={menu} placement="topRight">
<Button>topRight</Button>
</Dropdown>
</Space>
</Space>
);
export default App;
Hover me
TypeScript
JavaScript
import { IArrowDown } from 'infra-design-icons';
import { Dropdown, Menu, Space } from 'infrad';
import React from 'react';
const menu = (
<Menu
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 overlay={menu}>
<a onClick={e => e.preventDefault()}>
<Space>
Hover me
<IArrowDown />
</Space>
</a>
</Dropdown>
);
export default App;
Click me
TypeScript
JavaScript
import { IArrowDown } from 'infra-design-icons';
import { Dropdown, Menu, Space } from 'infrad';
import React from 'react';
const menu = (
<Menu
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 overlay={menu} trigger={['click']}>
<a onClick={e => e.preventDefault()}>
<Space>
Click me
<IArrowDown />
</Space>
</a>
</Dropdown>
);
export default App;
TypeScript
JavaScript
import { IArrowDown, UserOutlined } from 'infra-design-icons';
import type { MenuProps } from 'infrad';
import { Button, Dropdown, Menu, message, Space, Tooltip } from 'infrad';
import React from 'react';
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 menu = (
<Menu
onClick={handleMenuClick}
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 />,
},
]}
/>
);
const App: React.FC = () => (
<Space wrap>
<Dropdown.Button onClick={handleButtonClick} overlay={menu}>
Dropdown
</Dropdown.Button>
<Dropdown.Button overlay={menu} placement="bottom" icon={<UserOutlined />}>
Dropdown
</Dropdown.Button>
<Dropdown.Button onClick={handleButtonClick} overlay={menu} disabled>
Dropdown
</Dropdown.Button>
<Dropdown.Button
overlay={menu}
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 overlay={menu}>
<Button>
<Space>
Button
<IArrowDown />
</Space>
</Button>
</Dropdown>
</Space>
);
export default App;
Hover me
TypeScript
JavaScript
import { IArrowDown } from 'infra-design-icons';
import type { MenuProps } from 'infrad';
import { Dropdown, Menu, Space } from 'infrad';
import React, { useState } from 'react';
const App: React.FC = () => {
const [visible, setVisible] = useState(false);
const handleMenuClick: MenuProps['onClick'] = e => {
if (e.key === '3') {
setVisible(false);
}
};
const handleVisibleChange = (flag: boolean) => {
setVisible(flag);
};
const menu = (
<Menu
onClick={handleMenuClick}
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 overlay={menu} onVisibleChange={handleVisibleChange} visible={visible}>
<a onClick={e => e.preventDefault()}>
<Space>
Hover me
<IArrowDown />
</Space>
</a>
</Dropdown>
);
};
export default App;
TypeScript
JavaScript
import { DownOutlined } from 'infra-design-icons';
import { Dropdown, Menu, Space } from 'infrad';
import React, { useState } from 'react';
const menu = (
<Menu
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 overlay={menu}>
Submit
</Dropdown.Button>
<Dropdown.Button type="primary" size="small" loading overlay={menu}>
Submit
</Dropdown.Button>
<Dropdown.Button
type="primary"
loading={loadings[0]}
overlay={menu}
onClick={() => enterLoading(0)}
>
Submit
</Dropdown.Button>
<Dropdown.Button
icon={<DownOutlined />}
loading={loadings[1]}
overlay={menu}
onClick={() => enterLoading(1)}
>
Submit
</Dropdown.Button>
</Space>
);
};
export default App;
API#
属性如下
参数 | 说明 | 类型 | 默认值 | 版本 |
---|---|---|---|---|
arrow | 下拉框箭头是否显示 | boolean | { pointAtCenter: boolean } | false | |
autoFocus | 打开后自动聚焦下拉框 | boolean | false | 4.21.0 |
disabled | 菜单是否禁用 | boolean | - | |
destroyPopupOnHide | 关闭后是否销毁 Dropdown | boolean | false | |
getPopupContainer | 菜单渲染父节点。默认渲染到 body 上,如果你遇到菜单滚动定位问题,试试修改为滚动的区域,并相对其定位。示例 | (triggerNode: HTMLElement) => HTMLElement | () => document.body | |
overlay | 菜单 | Menu | () => Menu | - | |
overlayClassName | 下拉根元素的类名称 | string | - | |
overlayStyle | 下拉根元素的样式 | CSSProperties | - | |
placement | 菜单弹出位置:bottom bottomLeft bottomRight top topLeft topRight | string | bottomLeft | |
trigger | 触发下拉的行为, 移动端不支持 hover | Array<click |hover |contextMenu > | [hover ] | |
visible | 菜单是否显示 | boolean | - | |
onVisibleChange | 菜单显示状态改变时调用,参数为 visible 。点击菜单按钮导致的消失不会触发 | (visible: boolean) => void | - |
overlay
菜单使用 Menu,还包括菜单项 Menu.Item
,分割线 Menu.Divider
。
注意: Menu.Item 必须设置唯一的 key 属性。
Dropdown 下的 Menu 默认不可选中。如果需要菜单可选中,可以指定
<Menu selectable>
。
Dropdown.Button#
参数 | 说明 | 类型 | 默认值 | 版本 |
---|---|---|---|---|
buttonsRender | 自定义左右两个按钮 | (buttons: ReactNode[]) => ReactNode[] | - | |
loading | 设置按钮载入状态 | boolean | { delay: number } | false | |
disabled | 菜单是否禁用 | boolean | - | |
icon | 右侧的 icon | ReactNode | - | |
overlay | 菜单 | Menu | - | |
placement | 菜单弹出位置:bottom bottomLeft bottomRight top topLeft topRight | string | bottomLeft | |
size | 按钮大小,和 Button 一致 | string | default | |
trigger | 触发下拉的行为 | Array<click |hover |contextMenu > | [hover ] | |
type | 按钮类型,和 Button 一致 | string | default | |
visible | 菜单是否显示 | boolean | - | |
onClick | 点击左侧按钮的回调,和 Button 一致 | (event) => void | - | |
onVisibleChange | 菜单显示状态改变时调用,参数为 visible | (visible: boolean) => void | - |