mirror of
https://github.com/ant-design/ant-design.git
synced 2024-12-12 15:19:58 +08:00
e7edfa42d7
* docs: update overview img * chore: code clean * chore: code clean * chore: update * chore: code clean
4.8 KiB
4.8 KiB
category | group | title | cover | demo | ||
---|---|---|---|---|---|---|
Components | Navigation | Dropdown | https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*mBBcQ6goljkAAAAAAAAAAAAADrJ8AQ/original |
|
A dropdown list.
When To Use
When there are more than a few options to choose from, you can wrap them in a Dropdown
. By hovering or clicking on the trigger, a dropdown menu will appear, which allows you to choose an option and execute the relevant action.
Usage upgrade after 4.24.0
// works when >=4.24.0, recommended ✅
const items = [
{ label: 'item 1', key: 'item-1' }, // remember to pass the key prop
{ label: 'item 2', key: 'item-2' },
];
return (
<Dropdown menu={{ items }}>
<a>Hover me</a>
</Dropdown>
);
// works when <4.24.0, deprecated when >=4.24.0 🙅🏻♀️
const menu = (
<Menu>
<Menu.Item>item 1</Menu.Item>
<Menu.Item>item 2</Menu.Item>
</Menu>
);
return (
<Dropdown overlay={menu}>
<a>Hover me</a>
</Dropdown>
);
Examples
Basic usage (deprecated syntactic sugar)
Basic
Placement
Arrow
Other elements
Arrow pointing at the center
Trigger mode
Click event
Button with dropdown menu
Custom dropdown
Cascading menu
The way of hiding menu.
Context Menu
Loading
Selectable Menu
Menu full styles
_InternalPanelDoNotUseOrYouWillBeFired
API
Dropdown
Property | Description | Type | Default | Version |
---|---|---|---|---|
arrow | Whether the dropdown arrow should be visible | boolean | { pointAtCenter: boolean } | false | |
autoFocus | Focus element in overlay when opened |
boolean | false | 4.21.0 |
disabled | Whether the dropdown menu is disabled | boolean | - | |
destroyPopupOnHide | Whether destroy dropdown when hidden | boolean | false | |
dropdownRender | Customize dropdown content | (menus: ReactNode) => ReactNode | - | 4.24.0 |
getPopupContainer | To set the container of the dropdown menu. The default is to create a div element in body, but you can reset it to the scrolling area and make a relative reposition. Example on CodePen | (triggerNode: HTMLElement) => HTMLElement | () => document.body | |
menu | The menu props | MenuProps | - | 4.24.0 |
overlayClassName | The class name of the dropdown root element | string | - | |
overlayStyle | The style of the dropdown root element | CSSProperties | - | |
placement | Placement of popup menu: bottom bottomLeft bottomRight top topLeft topRight |
string | bottomLeft |
|
trigger | The trigger mode which executes the dropdown action. Note that hover can't be used on touchscreens | Array<click |hover |contextMenu > |
[hover ] |
|
open | Whether the dropdown menu is currently open. Use visible under 4.23.0 (why?) |
boolean | - | 4.23.0 |
onOpenChange | Called when the open state is changed. Not trigger when hidden by click item. Use onVisibleChange under 4.23.0 (why?) |
(open: boolean) => void | - | 4.23.0 |
Dropdown.Button
Same props from Dropdown. And includes additional props:
Property | Description | Type | Default | Version |
---|---|---|---|---|
buttonsRender | Custom buttons inside Dropdown.Button | (buttons: ReactNode[]) => ReactNode[] | - | |
loading | Set the loading status of button | boolean | { delay: number } | false | |
danger | Set the danger status of button | boolean | - | 4.23.0 |
icon | Icon (appears on the right) | ReactNode | - | |
size | Size of the button, the same as Button | string | default |
|
type | Type of the button, the same as Button | string | default |
|
onClick | The same as Button: called when you click the button on the left | (event) => void | - |