mirror/ant-design
1
0
Fork 0
mirror of https://github.com/ant-design/ant-design.git synced 2024-11-26 20:20:00 +08:00
Code Issues Actions 18 Packages Projects Releases Wiki Activity
188b4c75d5
ant-design/components/dropdown/index.en-US.md
xrkffgg ebb57ae63e
docs: format api space/breadcrumb/dropdown (#25296) 
* docs: format api space/breadcrumb/dropdown

* fix function

* fix fcunciton before
2020-06-30 11:25:55 +08:00

3.1 KiB
Raw Blame History

category type title cover
Components Navigation Dropdown https://gw.alipayobjects.com/zos/alicdn/eedWN59yJ/Dropdown.svg

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.

API

Dropdown

Property Description Type Default Version
arrow Whether the dropdown arrow should be visible boolean false
disabled Whether the dropdown menu is disabled boolean -
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 function(triggerNode) () => document.body
overlay The dropdown menu Menu | () => Menu -
overlayClassName Class name of the dropdown root element string -
overlayStyle Style of the dropdown root element object -
placement Placement of popup menu: bottomLeft, bottomCenter, bottomRight, topLeft, topCenter or 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]
visible Whether the dropdown menu is currently visible boolean -
onVisibleChange Called when the visible state is changed function(visible) -

You should use Menu as overlay. The menu items and dividers are also available by using Menu.Item and Menu.Divider.

Warning: You must set a unique key for Menu.Item.

Menu of Dropdown is unselectable by default, you can make it selectable via <Menu selectable>.

Dropdown.Button

Property Description Type Default Version
disabled Whether the dropdown menu is disabled boolean -
icon Icon (appears on the right) ReactNode -
overlay The dropdown menu Menu -
placement Placement of popup menu: bottomLeft bottomCenter bottomRight topLeft topCenter topRight string bottomLeft
size Size of the button, the same as Button string default
trigger The trigger mode which executes the dropdown action Array<click|hover|contextMenu> [hover]
type Type of the button, the same as Button string default
visible Whether the dropdown menu is currently visible boolean -
onClick The same as Button: called when you click the button on the left function -
onVisibleChange Called when the visible state is changed function -
buttonsRender Custom buttons inside Dropdown.Button ([buttons: ReactNode[]]) => ReactNode -