Vega Logo
v1.0.0
Dropdown
드롭다운(dropdown)은 선택할 수 있는 옵션이 여러개인 경우 해당 옵션을 묶어 사용자에게 표출되는 컴포넌트입니다. 트리거를 클릭하면 드롭다운이 표출됩니다.
Type

Default

Checkbox

Checkbox

Small

Email

User

user
State
Dropdown의 아이템 상태에 대해 서술합니다. 상태는 Default / Hover / Disable 3가지로 사용합니다.
타이틀 및 check/radio는 disable 상태를 지원하지 않습니다. 해당 요소는 disable보단 화면 상에서 안보이게 처리합니다.

Title

타이틀은 Hover/Disable 상태가 없습니다.

Default

기본은 오른쪽/왼쪽 아이콘을 선택하여 사용할 수 있습니다.

Default with text

기본+텍스트는 오른쪽 텍스트와 왼쪽 아이콘을 선택하여 사용할 수 있습니다.

Line

라인은 Hover/Disable 상태가 없습니다.

Text with avatar

텍스트+아바타는 왼쪽 아바타와 오른쪽 아이콘 선택하여 사용할 수 있습니다.
disable 상태는 지원하지 않습니다.

avatar type 1
avatar type 2

Checkbox

체크박스는 드롭다운내에서 다중 선택이 필요한 경우 사용합니다.
disable 상태는 지원하지 않습니다.

Radio

라디오는 드롭다운내에서 하나의 선택이 필요한 경우 사용합니다.
disable 상태는 지원하지 않습니다.

Trigger
트리거 아이템은 버튼 또는 텍스트, 아이콘이 될 수 도 있고 마우스 오른쪽 버튼 클릭이 될 수 있습니다. 드롭다운이 필요한 요소에 적용합니다.

여기에 오른쪽 마우스를 클릭하세요.

Sub Dropdown
드롭다운 안에 드롭다운에 대한 가이드입니다. Depth는 두번째까지만 사용합니다.
Responsive Alignment
Dropdown의 아이템 상태에 대해 서술합니다. 상태는 Default / Hover / Disable 3가지로 사용합니다. 타이틀 및 check/radio는 disable 상태를 지원하지 않습니다. 해당 요소는 disable보단 화면 상에서 안보이게 처리합니다.