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

descText

Added in 2.2

styleTheme : form2Regular
singleLineMode : use
textAlign : right

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

Color 구성

Color Key

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

구성	내용
icon color	normal `ui_cpnt_icon_sys_grey_01` hover `ui_cpnt_icon_sys_grey_01` selected `ui_cpnt_icon_sys_grey_01`
text color	normal TextLabel colorTheme : sysTextPrimary hover TextLabel colorTheme : sysTextPrimary selected TextLabel colorTheme : sysTextPrimary
descText color	Added in 2.2 normal TextLabel colorTheme : sysTextTertiary hover TextLabel colorTheme : sysTextTertiary selected TextLabel colorTheme : sysTextTertiary
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'`	가장 큰 크기의 아이템일때 사용합니다.

displayType

Added in 2.1

외관 유형을 결정합니다.

기획 지시사항

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

Type	`enum`
Default	`'text_only'`

Enum Values Description
`'text_only'`	텍스트만 보여짐
`'icon_only'`	아이콘만 보여짐
`'icon_text'`	아이콘과 텍스트가 조합된 형태

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;
  iconName?: enum;
  iconFillType?: 'fill' | 'line';
  fontWeight?: 'bold' | 'regular';
  descText?:number | string | object | Array<string | object> | undefined | null;
}

Default

-

기획서 기술 예시

fontWeight은 Editor에서만 사용하는 Value입니다. 다른 곳에서는 사용하지 마세요.

text :
iconName : ic_
iconFillType : line / fill
fontWeight : regular / bold

Added in 2.2

descText: 우측 영역에 표시되는 text입니다. (이미지 참고)

Enum Values Description
iconName	Icon 컴포넌트의 iconName 값 중 하나를 부여합니다. (ic_xxx의 형식입니다.)

onClick

Added in 1.2

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

기획 지시사항

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

Type

CODE

(value: {
  text?: number | string | object | Array<string | object> | undefined | null;
  value: string | number | null | boolean;
  iconName?: enum;
  iconFillType?: 'fill' | 'line';
  fontWeight?: 'bold' | 'regular';
} | string | number | boolean) => void;

Default

-

Enum Values Description
iconName	Icon 컴포넌트의 iconName 값 중 하나를 부여합니다. (ic_xxx의 형식입니다.)

state

상태를 결정합니다.

기획 지시사항

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

Type	`enum`
Default	`'normal'`

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

문서 작성 정보

소유자 / 관리자

김혜진, 박윤규

변경 이력

2024/03/12 : descText에 대한 이미지, spec 업데이트 - 김혜진
2024/03/12 : option에 descText 추가 - 안은수
2023/08/09 : option과 onClick의 type 변경 - 안은수
2023/07/18 : fontWeight을 option 내 value에 포함되도록 수정 - 김혜진
2023/07/13 : fontWeight prop 추가 - 김혜진
2023/06/26 : option prop에 기획서 작성법 추가 및 타입 변경 - 김혜진
2023/06/08 : prop 섹션에 icon 내용 추가 (option, onClick) - 안은수
2023/06/08 : 아이콘 옵션 추가에 따른 문서 업데이트 - 김혜진
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 : 문서 복제 - 김혜진