Dropdown
Dropdown
드롭다운 목록입니다.
가져오기import{ Dropdown }from"antd"; |
- Components Overview
- General
- Layout
- Navigation
- Data Entry
- Data Display
- Feedback
- Other
선택할 수 있는 옵션이 여러 개 있을 경우, Dropdown으로 묶을 수 있습니다. 트리거 위에 마우스를 올리거나 클릭할 경우, 드롭다운 메뉴가 나타나고, 옵션을 선택하고 관련 작업을 실행할 수 있습니다.
공통 속성 참조：공통 속성
| 프로퍼티 | 설명 | 타입 | 기본값 | 버전 |
|---|---|---|---|---|
| arrow | 드롭다운 화살표 표시 여부 | boolean | { pointAtCenter: boolean } | false | |
| autoAdjustOverflow | 드롭다운이 화면에서 사라졌을 때 드롭다운 배치를 자동으로 조정할지 여부 | boolean | true | 5.2.0 |
| autoFocus | 드롭다운이 열렸을 때 overlay 요소를 포커스합니다 Focus element in overlay when opened | boolean | false | 4.21.0 |
| disabled | 드롭다운 메뉴 비활성화 여부 | boolean | - | |
| destroyPopupOnHide | 숨겨졌을 때 드롭다운 파괴 여부 | boolean | false | |
| dropdownRender | 드롭다운 콘텐츠를 사용자 지정합니다 | (menus: ReactNode) => ReactNode | - | 4.24.0 |
| getPopupContainer | 드롭다운 메뉴의 컨테이너를 설정합니다. 기본적으로는 body 안에 div 요소를 만드는 것이지만, 스크롤 영역을 재설정하고 상대적인 위치를 변경할 수 있습니다. CodePen에서의 예시 | (triggerNode: HTMLElement) => HTMLElement | () => document.body | |
| menu | 메뉴 컴포넌트의 props | MenuProps | - | 4.24.0 |
| overlayClassName | 드롭다운 루트 요소의 클래스 이름 | string | - | |
| overlayStyle | 드롭다운 루트 요소의 스타일 | CSSProperties | - | |
| placement | 팝업 메뉴의 배치: bottom bottomLeft bottomRight top topLeft topRight | string | bottomLeft | |
| trigger | 드롭다운 동작을 실행하는 트리거 모드입니다. 마우스를 올리는 hover는 터치스크린에서 사용할 수 없다는 것을 주의하세요. | Array<click|hover|contextMenu> | [hover] | |
| open | 드롭다운 메뉴가 현재 열려 있는지에 대한 여부입니다. 4.23.0 미만에서 visible을 사용합니다. (그 이유에 대해서) | boolean | - | 4.23.0 |
| onOpenChange | open 상태가 변경될 때 호출됩니다. 메뉴 요소 클릭으로 인해 사라졌을 경우, 트리거되지 않습니다. 4.23.0 미만에서 onVisibleChange을 사용합니다. (그 이유에 대해서) | (open: boolean, info: { source: 'trigger' | 'menu' }) => void | - | info.source: 5.11.0 |
Dropdown의 props와 동일합니다. 그리고 다음과 같은 props를 추가로 포함하고 있습니다.
| 프로퍼티 | 설명 | 타입 | 기본값 | 버전 |
|---|---|---|---|---|
| buttonsRender | Dropdown.Button 내부의 사용자 지정 버튼 | (buttons: ReactNode[]) => ReactNode[] | - | |
| loading | 버튼의 로딩 상태 설정 | boolean | { delay: number } | false | |
| danger | 버튼의 위험 상태 설정 | boolean | - | 4.23.0 |
| icon | 아이콘 (오른쪽에 표시됩니다.) | ReactNode | - | |
| size | 버튼의 크기, Button과 동일 | string | default | |
| type | 버튼의 유형, Button과 동일 | string | default | |
| onClick | Button과 동일: 왼쪽의 버튼을 클릭하면 호출됩니다. | (event) => void | - |
Dropdown의 자식 노드가 onMouseEnter, onMouseLeave, onFocus, onClick 이벤트를 허용하는지 확인해 주세요.
| 토큰 이름 | 설명 | 타입 | 기본값 |
|---|---|---|---|
| paddingBlock | 드롭다운의 세로 안쪽 여백 | undefined | PaddingBlock<string | number> | 5 |
| zIndexPopup | 드롭다운의 z-index | number | 1050 |
width: max-content를 사용하여 해당 문제를 처리할 수 있습니다. #43025 참조.
가장 기본적인 드롭다운 메뉴입니다.
6개의 배치 위치를 지원합니다.
구분선과 비활성화된 메뉴 요소
트리거 모드의 기본값은 hover이며, click으로 변경할 수 있습니다.
왼쪽에는 버튼이 있고, 오른쪽에는 관련된 기능의 메뉴가 있습니다. 아이콘 속성을 설정하여 오른쪽 아이콘을 수정할 수 있습니다.
메뉴에는 여러 단계가 있습니다.
단축어가 있는 드롭다운 메뉴입니다.
화살표를 표시할 수 있습니다.
arrow 속성을 { pointAtCenter: true }로 지정하면, 화살표가 대상 요소의 중앙을 가리키게 됩니다.
메뉴 요소를 클릭하면 이벤트가 트리거되며, 요소의 키에 따라 다른 작업을 수행할 수 있습니다.
dropdownRender를 통해 드롭다운 메뉴를 사용자 지정으로 변경합니다. 메뉴 콘텐츠가 필요하지 않은 경우, Popover 컴포넌트를 직접 사용하세요.
메뉴 요소를 클릭할 때 메뉴를 닫는 것이 기본값이며, 이 기능은 끌 수 있습니다.
기본 트리거 모드는 hover이며, contextMenu로 트리거 모드를 변경할 수 있습니다. 팝업 메뉴 위치는 오른쪽 클릭 위치를 따릅니다.
Dropdown.Button에서 loading 속성을 설정하여 로딩 상태를 버튼에 추가로 보여 줄 수 있습니다.
menu에서 selectable 속성을 구성하여 선택 가능 기능을 활성화합니다.
