Web - ContextMenuItem

Definition

정의	ContextMenu
최적화 대상	Desktop Mobile
기획 배포	완료
디자인 가이드 배포	완료
개발 코드 배포	완료

Principle

Dropdown 선택 시 펼쳐지는 메뉴이며, 아이템 자체를 말합니다.

항목을 클릭할 때 뜨는 팝업 메뉴이고, 선택된 항목의 상황에 따라 다양한 선택 사항을 나열하여 보여줍니다. 여러 가지 리스트 중 하나를 선택 할 수 있습니다.

Spec

Guide

Size, Property

구성

내용

height

large : 48px
medium : 40px
small : 32px

text

Web - TextLabel 참고

styleTheme : form2Regular
singleLineMode : use

*메뉴 하나가 모두 터치 영역입니다.

Color 구성

‌

Color Key

요소들의 컬러 변화로 상태들을 표현합니다.

구성

내용

text color

normal

TextLabel
- colorTheme : sysTextPrimary

hover

TextLabel
- colorTheme : sysTextPrimary

selected

TextLabel
- colorTheme : sysTextPrimary

menu base color

normal

ui_cpnt_contextmenu_menu_base_normal

hover

ui_cpnt_contextmenu_menu_base_hover

selected

ui_cpnt_contextmenu_menu_base_selected

Properties

valueArray (Deprecated in 1.2)

Deprecated in 1.2

~~표시할 값입니다.~~

text (Deprecated in 1.5)

Deprecated in 1.5

Added in 1.2

~~표시할 값입니다.~~

~~기획 지시사항~~

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

Type	`number \| string \| object \| Array<string \| object> \| undefined \| null`
Default	-

size

메뉴의 크기를 결정합니다.

기획 지시사항

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

Type	`enum`
Default	`'small'`

Enum Values Description
`'small'`	작은 크기의 아이템일때 사용합니다.
`'medium'`	중간 크기의 아이템일때 사용합니다.
`'large'`	가장 큰 크기의 아이템일때 사용합니다.

value (Deprecated in 1.5)

Deprecated in 1.5

Added in 1.2

~~요소의 고유값입니다.~~

~~기획 지시사항~~

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

Type	`string \| number \| boolean`
Default	-

isSelected

Added in 1.2

선택된 요소를 결정합니다.

기획 지시사항

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

Type	`boolean`
Default	`false`

option

Added in 1.3

요소에 사용될 텍스트와 고유값 객체입니다.

기획 지시사항

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

Type	CODE `{ text: number \| string \| object \| Array<string \| object> \| undefined \| null; value: string \| number \| null \| boolean; }`
Default	-

onClick

Added in 1.2

클릭이 된 시점에 이벤트를 부여합니다.

기획 지시사항

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

Type	CODE `(value: { text: number \| string \| object \| Array<string \| object> \| undefined \| null; value: string \| number \| null \| boolean; } \| string \| number \| boolean) => void;`
Default	-

state

상태를 결정합니다.

기획 지시사항

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

Type	`enum`
Default	`'normal'`

Enum Values Description
`'normal'`	기본 상태 입니다.
`'disabled'`	비활성화 상태입니다.

문서 작성 정보

소유자 / 관리자	김혜진, 박윤규
변경 이력	2022/05/24 : state prop추가 - 안은수 2022/03/29 : option prop추가, text와 value deprecated표시 - 안은수 2022/03/24 : Property 기술방법 변경, 코드에만 있던 prop추가 - 안은수 2022/02/25 : 개발 코드 배포여부 추가 - 안은수 2022/02/08 : Item 성격에 맞게 전체 내용 정리 - 김혜진 2022/01/27 : 문서 복제 - 김혜진