ant-design/components/dropdown/index.en-US.md
ice eac5b6893d
feat(menu): support extra prop ()
* feat(dropdown): support extra prop

* text: fix items

* Update components/menu/style/index.ts

Co-authored-by: lijianan <574980606@qq.com>
Signed-off-by: ice <49827327+coding-ice@users.noreply.github.com>

* Update package.json

Co-authored-by: lijianan <574980606@qq.com>
Signed-off-by: ice <49827327+coding-ice@users.noreply.github.com>

* style: css

* chore: bump rc-menu from 9.15.1 to 9.15.0

* style: classname

* test: clsname

* chore: rc-menu to ^9.15.1

* chore: rc-menu version from ^ to ~

* chore: update deps

* feat: full width

* fix: children is array

* fix: default array

* fix: label

* test: update snap

* test: case

---------

Signed-off-by: ice <49827327+coding-ice@users.noreply.github.com>
Co-authored-by: lijianan <574980606@qq.com>
2024-09-03 07:15:18 +08:00

4.9 KiB
Raw Blame History

category group title description cover coverDark demo
Components Navigation Dropdown A dropdown list. https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*gTBySYX11WcAAAAAAAAAAAAADrJ8AQ/original https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*k619RJ_7bKEAAAAAAAAAAAAADrJ8AQ/original
cols
2

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.

Examples

Basic Extra node Placement Arrow Other elements Arrow pointing at the center Trigger mode Click event Button with dropdown menu Custom dropdown Cascading menu Cascading menu The way of hiding menu. Context Menu Loading Selectable Menu Menu full styles _InternalPanelDoNotUseOrYouWillBeFired Icon debug

API

Common props refCommon props

Dropdown

Property Description Type Default Version
arrow Whether the dropdown arrow should be visible boolean | { pointAtCenter: boolean } false
autoAdjustOverflow Whether to adjust dropdown placement automatically when dropdown is off screen boolean true 5.2.0
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, info: { source: 'trigger' | 'menu' }) => void - info.source: 5.11.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 -

Note

Please ensure that the child node of Dropdown accepts onMouseEnter, onMouseLeave, onFocus, onClick events.

Design Token

FAQ

How to prevent Dropdown from being squeezed when it exceeds the screen horizontally?

You can use width: max-content style to handle this. ref #43025.