Components/Dropdowns
Dropdowns
1.0.026 Aug, 2021
Design/ContentsCompleted
CodeNot Started
드롭다운(Dropdowns)은 사용자가 옵션 리스트 중 하나의 옵션 선택 시 활용되는 컴포넌트입니다. 선택 가능한 옵션 개수가 다수일 경우, 드롭다운 메뉴를 사용해 값을 노출합니다.
Anatomy
Variants
1 Line
Dropdown 을 활성화 시 Active 상태에 선택한 ‘Value’값만 노출됩니다. 레이블이 별도로 노출될 경우 한정해 해당 케이스를 사용하며, 이외 기본적으로 ‘2 Lines’ 사용을 권장합니다.
2 Lines
Dropdown 활성화 시 Active 상태에 ‘Label’과 ‘Value’값이 모두 노출됩니다. 동시 노출됨으로써 정보 가독성을 높이므로, ‘2 Lines’ 사용을 권장합니다.
Size
사이즈는 높이 기준으로 Large, Small을 사용합니다. 사이즈에 따라 폰트 크기는 상이하며 이외 스타일은 동일합니다.
Icon
Dropdown Icon은 드롭다운 활성화 시 Bottom Sheet 노출에 관한 안내 요소로 아이콘과 결합해 사용합니다. 해당 아이콘은 필수로 사용합니다.
Table of Figma Properties
| Property | Values | Default Value |
|---|---|---|
| Layout | 1 line, 2 lines | 2 lines |
| Status | Selected, Unselected | Unselected |
| Size | Large, Small | Large |
| State | Default, Active, Disabled, Error | Default |
Usage Guidelines
Do : OS별 드롭다운 메뉴, iOS ‘Picker’, 안드로이드 ‘Confirmation dialog’ 사용
Dropdown을 활성화 시 시스템 드롭 다운메뉴를 OS에 따라 고려합니다. iOS는 다중 옵션을 ‘Picker’ 노출, 안드로이드는 다중 옵션을 ‘Confirmation dialog’ 로 노출합니다.
Don’t : 드롭다운 활성화 시 PC형 드롭다운 리스트 노출 제한
드롭다운 활성화 시 모바일에 최적화된 사용자 경험을 고려해 해당 페이지내 리스트 노출은 제한합니다. 리스트 노출은 PC에 한정해 사용합니다.
Spec
Size
Dropdown의 width는 디바이스에서 좌/우 마진을 제외한 값이며, 최소는 140(모바일 기준)입니다. 좌/우 패딩은 16으로 고정이며 height는 Large 56, Small 48로 고정됩니다.
담당자구경하@kykoo
