Web - MobileTabBar

Definition

탭은 페이지 전체 헤더에 따라 서로 관련이 있는 메뉴들을 사용합니다. 즉, 같은 맥락 안에서 화면 전환이 필요할 때 탭을 사용합니다.

full-width 형태로 동일한 비율로 나눕니다. 최대 3개까지 허용합니다.

‌

종류

Height

text

Large

48px

colorTheme : none

	active	inactive
textColor	TextLabel colorTheme : usrTextBrandPrimary	TextLabel colorTheme : sysTextTertiary
active indicator border color	`ui_cpnt_tabbar_border_active_indicator_primary`	-
divider color (공통)	`ui_cpnt_tabbar_divider`
base color (공통)	`ui_cpnt_tabbar_base_area`

colorTheme : grey_01

	active	inactive
textColor	TextLabel colorTheme : sysTextPrimary	TextLabel colorTheme : sysTextTertiary
active indicator border color	`ui_cpnt_tabbar_border_active_indicator`	-
divider color (공통)	`ui_cpnt_tabbar_divider`
base color (공통)	`ui_cpnt_tabbar_base_area`

Deprecated in 1.5

~~표시될 텍스트 배열입니다.~~

~~기획 지시사항~~

Type	CODE `{ path: string; title: number \| string \| object \| Array<string \| object> \| undefined \| null; }[]`
Default	-

Added in 1.4

tab item의 title, isActive, onClick 이벤트 값 리스트 입니다.

기획 지시사항

Type	CODE `{ text: number \| string \| object \| Array<string \| object> \| undefined \| null; isActive: boolean; onClick?: (e: React.MouseEvent<HTMLDivElement>) => void; }[]`
Default	-

Added in 1.4

컬러의 프리셋 테마입니다.

기획 지시사항

Type	`enum`
Default	`'none'`

Enum Values Description
`'none'`	기본값입니다.
`'grey_01'`

소유자 / 관리자

김혜진, 박윤규

변경 이력