Skip to main content
Skip table of contents

Web - Dropdown (Added in 1.3)

Added in 1.3

Definition

정의

Dropdown

최적화 대상

Desktop

Mobile

기획 배포

완료

디자인 가이드 배포

완료

개발 코드 배포

완료

Principle

드롭다운은 선택 시 ContextMenu가 뜨며 사용자가 목록에서 단일 또는 다중 선택을 할 수 있습니다.

형태는 Select와 동일하나 선택 시 기능들의 메뉴(ContextMenu)가 뜨고 이 메뉴 형태가 커스텀이 된 것이 Select와의 차이점입니다.

Dropdown은 Select와 다르게 submitsubmit이 함께 있지 않으며 자체적으로 값을 누르는 순간 바뀔 수 있습니다.

드롭다운 내렸을때 (Select와 생김새 같음 + ContextMenu, ContextMenuItem)

드롭다운 다중 선택

선택된 아이템까지 드롭다운 영역으로 포함시킬지 확인 필요

  • 선택된 아이템 : Chip 참고


Spec

Guide

선택 시 뜨는 메뉴는 ContextMenu 참고, 다중 선택 시 Chip 참고

Size, Property

구성

내용

Height

Large (48px)

Small (32px)

Width

432px

188px

radius

14px

10px

text

Web - TextLabel 참고

  • styleTheme : form2Regular

  • singleLineMode : use

Web - TextLabel 참고

  • styleTheme : form2Regular

  • singleLineMode : use

icon

  • size : 16

  • fillType : line

  • iconName : ic_arrow_down, ic_arrow_up

  • size : 16

  • fillType : line

  • iconName : ic_arrow_down, ic_arrow_up

ContextMenu

Web - ContextMenu Web - ContextMenuItem 참고

  • size : large

Web - ContextMenu Web - ContextMenuItem 참고

  • size : large

Chip (다중 선택 시)

Web - Chip 참고

  • displayType : removable

N/A

Color 구성

Color Key

드롭다운에는 다양한 상태들이 존재합니다. 요소들의 컬러 변화로 상태들을 표현합니다.

textColor

iconColor

borderColor

baseColor

normal

TextLabel

  • colorTheme : sysTextPrimary

ui_cpnt_dropdown_icon_01

ui_cpnt_dropdown_border_normal

ui_cpnt_dropdown_base_normal

focus

TextLabel

  • colorTheme : sysTextPrimary

ui_cpnt_dropdown_icon_01

ui_cpnt_dropdown_border_focus

ui_cpnt_dropdown_base_normal

selected

TextLabel

  • colorTheme : sysTextPrimary

ui_cpnt_dropdown_icon_01

ui_cpnt_dropdown_border_normal

ui_cpnt_dropdown_base_normal

disabled

TextLabel

  • colorTheme : sysTextTertiary

ui_cpnt_dropdown_icon_02

ui_cpnt_dropdown_border_disabled

ui_cpnt_dropdown_base_disabled

read_only

TextLabel

  • colorTheme : sysTextTertiary

ui_cpnt_dropdown_icon_02

ui_cpnt_dropdown_border_disabled

ui_cpnt_dropdown_base_disabled

colorTheme : dark

textColor

iconColor

borderColor

baseColor

normal

ui_cpnt_dropdown_text_darktheme_hint

ui_cpnt_dropdown_icon_darktheme_default

ui_cpnt_dropdown_border_darktheme_normal

ui_cpnt_dropdown_base_darktheme_normal

focus

ui_cpnt_dropdown_text_darktheme_enabled

ui_cpnt_dropdown_icon_darktheme_default

ui_cpnt_dropdown_border_darktheme_focus

ui_cpnt_dropdown_base_darktheme_normal

selected

ui_cpnt_dropdown_text_darktheme_enabled

ui_cpnt_dropdown_icon_darktheme_default

ui_cpnt_dropdown_border_darktheme_normal

ui_cpnt_dropdown_base_darktheme_normal

disabled

ui_cpnt_dropdown_text_darktheme_disabled

ui_cpnt_dropdown_icon_darktheme_disabled

ui_cpnt_dropdown_border_darktheme_disabled

ui_cpnt_dropdown_base_darktheme_disabled

read_only

ui_cpnt_dropdown_text_darktheme_readonly

ui_cpnt_dropdown_icon_darktheme_disabled

ui_cpnt_dropdown_border_darktheme_disabled

ui_cpnt_dropdown_base_darktheme_disabled

colorTheme : white

 

textColor

iconColor

borderColor

baseColor

normal

ui_cpnt_dropdown_text_white_hint

ui_cpnt_dropdown_icon_white_default

ui_cpnt_dropdown_border_white_normal

ui_cpnt_dropdown_base_white_normal

focus

ui_cpnt_dropdown_text_white_enabled

ui_cpnt_dropdown_icon_white_default

ui_cpnt_dropdown_border_white_focus

ui_cpnt_dropdown_base_white_normal

selected

ui_cpnt_dropdown_text_white_enabled

ui_cpnt_dropdown_icon_white_default

ui_cpnt_dropdown_border_white_normal

ui_cpnt_dropdown_base_white_normal

disabled

ui_cpnt_dropdown_text_white_disabled

ui_cpnt_dropdown_icon_02

ui_cpnt_dropdown_border_white_disabled

ui_cpnt_dropdown_base_white_disabled

read_only

ui_cpnt_dropdown_text_white_readonly

ui_cpnt_dropdown_icon_02

ui_cpnt_dropdown_border_white_disabled

ui_cpnt_dropdown_base_white_disabled

 


Properties

size

Added in 1.3

크기를 결정합니다.

기획 지시사항

  • 기획서 상 작성 방법 : Enum Values 중 하나를 사용함

Type

enum

Default

'large'

Enum Values Description

'large'

CODE
{
height : 48px;
}

'small'

CODE
{
height : 32px;
}

hintText

Added in 1.3

선택하기 전 기본으로 표시할 값입니다.

기획 지시사항

  • 기획서 상 작성 방법 : 텍스트만 기술

Type

string | object | Array<string | object> | undefined | null

Default

-

defaultValue

Added in 1.3

지정된 기본 값을 보여줘야 할 때 사용합니다.

기획 지시사항

  • 기획서 상 작성 방법 : 텍스트만 기술

Type

CODE
{
  text: number | string | object | Array<string | object> | undefined | null;
  value: string | number | null | boolean;
}

Default

-

  

value

Added in 1.4

드롭다운의 값입니다. (예외 상황이 있을 때 원래 값이나 다른 값을 설정하기위해 주로 쓰입니다.)

기획 지시사항

  • 기획서 상 작성 방법 : 기획자가 직접 prop을 기술하지 않음

Type

CODE
{
  text: number | string | object | Array<string | object> | undefined | null;
  value: string | number | null | boolean;
}

Default

-

  

valueArray*

옵션으로 표시될 값들의 배열입니다.

기획 지시사항

  • 기획서 상 작성 방법 : 텍스트만 기술

Type

CODE
{
  text: number | string | object | Array<string | object> | undefined | null;
  value: string | number | null | boolean;
  state?: 'normal' | 'disabled';
}[]

Default

-

 

state

Added in 1.3

상태를 결정합니다.

기획 지시사항

  • 기획서 상 작성 방법 : Enum Values 중 하나를 사용함

Type

enum

Default

'normal'

Enum Values Description

'normal'

사이 간격 없음

'read_only'

읽기 전용입니다. (입력창 수정 불가)

'disabled'

비활성화 상태입니다.

selectionMode

Added in 1.3

단일 또는 다중 선택을 결정합니다.

기획 지시사항

  • 기획서 상 작성 방법 : Enum Values 중 하나를 사용함

Type

enum

Default

'single'

Enum Values Description

'single'

단일 선택

'multi'

다중 선택

colorTheme

Added in 1.3

미리 결정되어 있는 컬러 테마를 결정합니다.

기획 지시사항

  • 기획서 상 작성 방법 : Enum Values 중 하나를 사용함

Type

enum

Default

'none'

Enum Values Description

'none'

사용하지 않습니다.

'dark'

*톤 설정과 상관없이 어두운 배경에 올라갈 때 사용합니다.

(spec 기술 참고)

'white'

Added in 1.4

*톤 설정과 상관없이 흰색으로 보입니다.

(spec 기술 참고)

maxHeightItemNumber

Added in 1.4

입력한 개수만큼 보이고 나머지는 스크롤이 됩니다.

기획 지시사항

  • 기획서 상 작성 방법 : 숫자만 기술

Type

number

Default

-

responsiveMode

Added in 1.4

width를 반응형으로 적용합니다.

기획 지시사항

  • 기획서 상 작성 방법 : Enum Values 중 하나를 사용함

Type

enum

Default

'none'

Enum Values Description

'none'

기본으로 부여되어있는 width를 사용합니다.

'use'

width를 반응형으로 적용합니다.

customWidth

Added in 1.4

직접 지정한 Dropdown의 사이즈를 결정합니다. (단위도 함께 적어주어야 합니다.)

*반드시 디자인 검수후에 사용가능합니다.
*해당 Property 사용시 ContextMenu의 customWidth에도 자동으로 적용됩니다.

기획 지시사항

  • 기획서 상 작성 방법 : 텍스트만 기술

Type

string

Default

-

onChange

Added in 1.3

데이터가 변경되는 시점에 이벤트를 부여합니다.

기획 지시사항

  • 기획서 상 작성 방법 : 기획자가 직접 prop을 기술하지 않음

Type

CODE
(option: {
  text: number | string | object | Array<string | object> | undefined | null;
  value: string | number | null | boolean;
}) => void;

Default

-


문서 작성 정보

소유자 / 관리자

김혜진, 박윤규

변경 이력

  • 2022/07/08 : customWidth prop에 추가 문구 작성 - 김혜진

  • 2022/07/01 : customWidth prop 추가 - 안은수

  • 2022/06/29 : valueArray 필수 표시 추가, value prop 추가 - 안은수

  • 2022/05/31 : Spec 수정 (컬러, radius) - 김혜진

  • 2022/05/26 : 멀티선택할 시 형태 변경 / colorTheme 중 white 일 때 read only, disabled 컬러키 추가 - 김혜진

  • 2022/05/25 : contextMenuSelectMode prop 제거 - 안은수

  • 2022/05/24 : maxHeightItemNumber, responsiveMode prop추가 - 안은수

  • 2022/05/06 : colorTheme value 추가(white), spec 내용 추가, contextMenuSelectMode prop 추가 - 김혜진

  • 2022/04/29 : onChange prop 추가 - 안은수

  • 2022/04/28 : selectMode prop 삭제 / selectionMode prop 추가 - 김혜진

  • 2022/04/19 : Property 기술방법 변경 - 김혜지

  • 2022/04/11 : 최초작성(기존 패턴을 컴포넌트화 하면서 복제) - 김혜진

JavaScript errors detected

Please note, these errors can depend on your browser setup.

If this problem persists, please contact our support.