Dropdown
Dropdown
Importimport { Dropdown } from 'antd'; |
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.
Common props ref：Common props
| Property | Description | Type | Default | Version | Global Config |
|---|---|---|---|---|---|
| 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 | × |
| classNames | Customize class for each semantic structure inside the Dropdown component. Supports object or function. | Record<SemanticDOM, string> | (info: { props }) => Record<SemanticDOM, string> | - | 6.0.0 | |
| disabled | Whether the dropdown menu is disabled | boolean | - | × | |
Whether destroy dropdown when hidden, use destroyOnHidden instead | boolean | false | × | ||
| destroyOnHidden | Whether destroy dropdown when hidden | boolean | false | 5.25.0 | × |
Customize dropdown content, use popupRender instead | (menus: ReactNode) => ReactNode | - | 4.24.0 | × | |
| popupRender | Customize popup content | (menus: ReactNode) => ReactNode | - | 5.25.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 | - | × | |
The class name of the dropdown root element, please use classNames.root instead | string | - | × | ||
The style of the dropdown root element, please use styles.root instead | CSSProperties | - | × | ||
| placement | Placement of popup menu: top topLeft topRight bottom bottomLeft bottomRight left leftTop leftBottom right rightTop rightBottom | string | bottomLeft | left leftTop leftBottom right rightTop rightBottom: 6.5.0 | × |
| styles | Customize inline style for each semantic structure inside the Dropdown component. Supports object or function. | Record<SemanticDOM, CSSProperties> | (info: { props }) => Record<SemanticDOM, CSSProperties> | - | 6.0.0 | |
| 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 | boolean | - | × | |
| onOpenChange | Called when the open state is changed. Not trigger when hidden by click item | (open: boolean, info: { source: 'trigger' | 'menu' }) => void | - | info.source: 5.11.0 | × |
Please ensure that the child node of Dropdown accepts onMouseEnter, onMouseLeave, onFocus, onClick events.
| Token Name | Description | Type | Default Value |
|---|---|---|---|
| paddingBlock | Vertical padding of dropdown | PaddingBlock<string | number> | undefined | 5 |
| zIndexPopup | z-index of dropdown | number | 1050 |
| Token Name | Description | Type | Default Value |
|---|---|---|---|
| colorBgElevated | Container background color of the popup layer, in dark mode the color value of this token will be a little brighter than `colorBgContainer`. E.g: modal, pop-up, menu, etc. | string | #ffffff |
| colorError | Used to represent the visual elements of the operation failure, such as the error Button, error Result component, etc. | string | #ff4d4f |
| colorIcon | Weak action. Such as `allowClear` or Alert close button | string | rgba(0,0,0,0.45) |
| colorPrimary | Brand color is one of the most direct visual elements to reflect the characteristics and communication of the product. After you have selected the brand color, we will automatically generate a complete color palette and assign it effective design semantics. | string | #1677ff |
| colorPrimaryBorder | The stroke color under the main color gradient, used on the stroke of components such as Slider. | string | #91caff |
| colorSplit | Used as the color of separator, this color is the same as colorBorderSecondary but with transparency. | string | rgba(5,5,5,0.06) |
| colorText | Default text color which comply with W3C standards, and this color is also the darkest neutral color. | string | rgba(0,0,0,0.88) |
| colorTextDescription | Control the font color of text description. | string | rgba(0,0,0,0.45) |
| colorTextDisabled | Control the color of text in disabled state. | string | rgba(0,0,0,0.25) |
| colorTextLightSolid | Control the highlight color of text with background color, such as the text in Primary Button components. | string | #fff |
| borderRadiusLG | LG size border radius, used in some large border radius components, such as Card, Modal and other components. | number | 8 |
| borderRadiusSM | SM size border radius, used in small size components, such as Button, Input, Select and other input components in small size | number | 4 |
| borderRadiusXS | XS size border radius, used in some small border radius components, such as Segmented, Arrow and other components with small border radius. | number | 2 |
| boxShadowSecondary | Control the secondary box shadow style of an element. | string | 0 6px 16px 0 rgba(0,0,0,0.08), 0 3px 6px -4px rgba(0,0,0,0.12), 0 9px 28px 8px rgba(0,0,0,0.05) |
| controlHeightLG | LG component height | number | 40 |
| controlItemBgActive | Control the background color of control component item when active. | string | #e6f4ff |
| controlItemBgActiveHover | Control the background color of control component item when hovering and active. | string | #bae0ff |
| controlItemBgHover | Control the background color of control component item when hovering. | string | rgba(0,0,0,0.04) |
| controlPaddingHorizontal | Control the horizontal padding of an element. | number | 12 |
| fontFamily | The font family of Ant Design prioritizes the default interface font of the system, and provides a set of alternative font libraries that are suitable for screen display to maintain the readability and readability of the font under different platforms and browsers, reflecting the friendly, stable and professional characteristics. | string | -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji' |
| fontSize | The most widely used font size in the design system, from which the text gradient will be derived. | number | 14 |
| fontSizeIcon | Control the font size of operation icon in Select, Cascader, etc. Normally same as fontSizeSM. | number | 12 |
| fontSizeSM | Small font size | number | 12 |
| lineHeight | Line height of text. | number | 1.5714285714285714 |
| lineWidthFocus | Control the width of the line when the component is in focus state. | number | 3 |
| marginXS | Control the margin of an element, with a small size. | number | 8 |
| marginXXS | Control the margin of an element, with the smallest size. | number | 4 |
| motionDurationMid | Motion speed, medium speed. Used for medium element animation interaction. | string | 0.2s |
| motionEaseInOutCirc | Preset motion curve. | string | |
| motionEaseInQuint | Preset motion curve. | string | |
| motionEaseOutCirc | Preset motion curve. | string | |
| motionEaseOutQuint | Preset motion curve. | string | |
| padding | Control the padding of the element. | number | 16 |
| paddingXS | Control the extra small padding of the element. | number | 8 |
| paddingXXS | Control the extra extra small padding of the element. | number | 4 |
| sizePopupArrow | The size of the component arrow | number | 16 |
You can use width: max-content style to handle this. ref #43025.