Dropdown

GUIDE

Dropdown은 사용자가 선택할 수 있는 옵션의 범위를 알려주고 잘못된 데이터 입력을 방지할 수 있는 필터 기능입니다.

사용자가 직접 text를 입력하는 필드 기능은 지원되지 않습니다.

---

ANATOMY

• 1. Header

  default 혹은 이전에 사용자가 선택한 옵션이 보여집니다.

• 2. Menu

  사용자가 선택할 수 있는 옵션이 모두 보여지는 리스트입니다.

• 3. Arrow Icon

  list를 열고 닫을 수 있는 버튼입니다.

• 4. Scroll Bar

  옵션의 개수가 5개를 초과할 경우 보여지며, 리스트의 개수만큼 scroll bar의 길이가 변합니다.

• 5. Options

  해당 드롭다운에 포함되는 모든 기능 옵션들이 나열되며, 비활성화된 옵션은 최하단에 배치됩니다.

• 6. Title (optional)

  필요에 따라 각 dropdown의 의미를 표기할 수 있습니다.

---

SIZE

화면 구성에 따라 길이 조절이 가능합니다.

---

STATES

Dropdown의 상태별 정의는 다음과 같습니다.

---

USAGE

Header type

1. Text

2. Icon

Scroll bar

• 옵션의 개수가 6개 이상일 경우 리스트의 길이가 늘어나며 scroll bar가 노출됩니다.

• 기본 펼침 방향은 하단을 향하나, 디바이스 하단 마진이 24px 이하로 좁아질 경우 자동으로 위 방향을 향하게 펼쳐집니다.