Web - SpeechBubble (Added in 2.2)

정의

SpeechBubble

최적화 대상

Desktop

Mobile

기획 배포

완료

디자인 가이드 배포

완료

개발 코드 배포

완료

Do

• SpeechBubble은 컴포넌트가 위치한 가로축 공간 전체를 차지합니다.

• pointingPosition은 기본적으로 제공되는 값을 따르며, 상황에 따라 조정이 필요할 경우 Custom으로 입력하여 작성합니다.

Don’t

• SpeechBubble이 위치한 가로축에 다른 요소가 중첩되어 사용되지 않도록 합니다.

• backgroundColor에서 투명 배경은 사용하지 않습니다.

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

-

enum

'small'

'small'

caption2Regular

'medium'

caption1Regular 

enum

'bold'

'regualr'

'bold'

enum

-

정해져 있는 컬러 값 중 하나를 부여합니다. (ui_xxx의 형식입니다.)

enum

'sysTextWhite'

'sysTextPrimary'

'sysTextSecondary'

'sysTextTertiary'

'sysTextWhite'

'sysTextBlack'

'sysTextError'

'sysTextWarning'

'sysTextBrandPrimary'

'sysTextBrandSeconVariant'

'usrTextBrandPrimary'

'usrTextBrandSeconVariant'

'usrTextBrandOnPrimary'

enum

left

'right'

가로축의 오른쪽에 정렬합니다.

'middle'

가로축의 가운데에 정렬합니다.

'left'

가로축의 왼쪽에 정렬합니다.

enum

-

정해져 있는 컬러 값 중 하나를 부여합니다. (ui_xxx의 형식입니다.)

enum

start_bottom

'start_top'

'start_bottom'

'center_top'

'center_bottom'

'end_top'

'end_bottom'

enum

'round'

'round'

둥근 모서리를 가진 사각형

'rectangle'

각진 모서리를 가진 사각형

number

8

'8'

'12'

'16'

enum

'none'

'none'

테두리를 사용하지 않습니다.

'use'

테두리를 사용합니다.

enum

'ui_cpnt_contextmenu_border'

정해져 있는 컬러 값 중 하나를 부여합니다. (ui_xxx의 형식입니다.)

enum

'none'

'none'

테두리를 사용하지 않습니다.

'use'

테두리를 사용합니다.

enum

'spacing_a'

'none'

'spacing_a'

'spacing_b'

'spacing_c'

'spacing_d'

'spacing_e'

'spacing_f'

'spacing_g'

enum

'spacing_c'

'none'

'spacing_a'

'spacing_b'

'spacing_c'

'spacing_d'

'spacing_e'

'spacing_f'

'spacing_g'

enum

'spacing_a'

'none'

'spacing_a'

'spacing_b'

'spacing_c'

'spacing_d'

'spacing_e'

'spacing_f'

'spacing_g'

enum

'spacing_c'

'none'

'spacing_a'

'spacing_b'

'spacing_c'

'spacing_d'

'spacing_e'

'spacing_f'

'spacing_g'

김혜진 / 박윤규

• 2025/09/05 : 문서 최초 작성 - 곽은선