You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 

2.8 KiB

category type title
Components Navigation Dropdown

A dropdown list.

When To Use

If there are too many operations to display, you can wrap them in a Dropdown. By clicking/hovering on the trigger, a dropdown menu should appear, which allows you to choose one option and execute relevant actions.

API

Dropdown

Property Description Type Default
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, you can reset it to the scrolling area and make a relative reposition. example 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 pop menu: bottomLeft bottomCenter bottomRight topLeft topCenter topRight String bottomLeft
trigger the trigger mode which executes the drop-down action, hover doesn't work on mobile device Array<click|hover|contextMenu> ['hover']
visible whether the dropdown menu is visible boolean -
onVisibleChange a callback function takes an argument: visible, is executed 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
disabled whether the dropdown menu is disabled boolean -
overlay the dropdown menu Menu -
placement placement of pop 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 drop-down action Array<click|hover|contextMenu> ['hover']
type type of the button, the same as Button string default
visible whether the dropdown menu is visible boolean -
onClick a callback function, the same as Button, which will be executed when you click the button on the left Function -
onVisibleChange a callback function takes an argument: visible, is executed when the visible state is changed Function -