Dropdown
Dropdowns는 버튼안에 숨겨진 메뉴를 표현하기 위해 사용합니다.Anatomy
드롭다운을 구성하는 요소를 설명합니다.
Rules of Use
Import
import { Dropdown } from '@goorm-dev/vapor-components';Examples
Props
Dropdown
| name | description | default |
|---|---|---|
| isOpen | Dropdown을 열지 닫을지 여부를 결정합니다. boolean | false |
| disabled | Dropdown을 비활성화 시킵니다. boolean | false |
| group | Dropdown이 그룹으로 묶여있는지 여부를 결정합니다. boolean | false |
| direction | Dropdown이 열리는 방향을 결정합니다. updownleftright | down |
| nav | nav의 아이템으로 간주. 태그가 li로 변경됨 boolean | false |
| size | 하위 토글 사이즈 smmdlgxl | md |
| tag | 렌더링할 컴포넌트 태그를 변경 stringfunction | div |
| toggle | Dropdown을 토글하는 함수 function | |
| inNavbar | Navbar 내부에 위치한 Dropdown. 팝오버 방식이 아닌 블록 방식으로 메뉴 렌더링 boolean | false |
DropdownMenu
| name | description | default |
|---|---|---|
| right | Dropdown 메뉴를 오른쪽에 표시 boolean | false |
| tag | 렌더링할 컴포넌트 태그를 변경 stringfunction | div |
| flip | Dropdown 메뉴가 화면 밖으로 나가면 자동으로 위치를 조정 boolean | true |
| modifiers | Popper.js의 Modifiers(https://popper.js/docs/v1/) object | |
| positionFixed | 기본으로 position 값이 absoulte로 설정되어 있음. position을 fixed로 변경 boolean | false |
| container | 다른 요소 아래에 portal로 렌더링 stringfunctionRefObject<HTMLElement> |
DropdownItem
| name | description | default |
|---|---|---|
| active | 활성화 여부 boolean | |
| disabled | 비활성화 여부. 아이템 클릭시 아무런 이벤트가 발생하지 않도록 설정. boolean | |
| divider | Divider를 추가합니다. boolean | |
| header | 별도의 태그 지정 없으면 h6 태그로 변경 boolean | |
| text | 별도의 태그 지정 없으면 span 태그로 변경 boolean | |
| tag | 렌더링할 컴포넌트 태그를 변경 stringfunction | button |
| onClick | 버튼 클릭시 추가 이벤트. 해당 함수 실행 후 toggle 이벤트 실행. function |