DropdownToggle
버튼안에 숨겨진 메뉴를 표현하기 위해 사용하는 버튼입니다.Anatomy
드롭다운 토글 버튼을 구성하는 요소를 설명합니다.
Rules of Use
Button States
Button의 토글 속성을 사용하여 dropdown 버튼으로 사용합니다. 토글 속성 사용시 dropdown list가 노출되는 상태에서 button의 state는 focus가 되며 아이콘또한 변경됩니다.
Dropdown Menu Varients
dropdown menu는 제공하는 기능에 따라 모양이 변형될 수 있습니다.
Import
import { DropdownToggle } from '@goorm-dev/vapor-components';Examples
Props
| name | description | default |
|---|---|---|
| size | DropdownToggle의 크기를 지정합니다. smmdlgxl | md |
| caret | DropdownToggle에 화살표 아이콘을 추가합니다. boolean | false |
| className | DropdownToggle에 추가할 클래스명을 지정합니다. string | |
| disabled | DropdownToggle을 비활성화 시킵니다. boolean | false |
| split | DropdownToggle을 분리시킵니다. boolean | false |
| tag | DropdownToggle의 태그를 지정합니다. React.ElementType | button |
| nav | nav의 아이템으로 간주. 태그가 li로 변경됩니다. boolean | false |
| onClick | DropdownToggle 클릭 시 실행될 함수를 지정합니다. (e: React.MouseEvent<Element, MouseEvent>) => void | |
| aria-haspopup | aria-haspopup 속성을 지정합니다. boolean | |
| color | color primarysecondarysuccesswarningdangerhintcontrast |