Tabs

Tabs는 관련된 콘텐츠나 섹션을 하나의 공간 내에서 전환할 수 있도록 도와주는 컴포넌트입니다. 사용자는 탭 레이블을 클릭해 섹션 간을 빠르게 이동할 수 있으며, 현재 선택된 탭은 활성 표시기를 통해 명확하게 인식됩니다. 공간과 활용 목적에 따라 크기를 유연하게 적용할 수 있습니다.

Properties

Best Practice

Tablist는 상단 네비게이션과 함께 사용할 때 효과적입니다. 상단 네비게이션은 페이지의 주요 섹션을 구분하고, Tablist는 각 섹션 내에서 세부 항목을 쉽게 탐색하게 합니다. 이 조합은 사용자에게 직관적이고 효율적인 탐색 경로를 제공합니다.

탭 레이블은 간결하고 직관적이어야 하며, 너무 긴 텍스트는 피하는 것이 좋습니다. 중요한 정보만 포함하고, 아이콘을 적절히 활용할 수도 있습니다.

또한, 활성화된 탭은 시각적으로 다른 탭과 구별되어야 합니다. 예를 들어, 밑줄이나 색상 변경 등을 통해 사용자가 현재 어떤 탭을 보고 있는지 쉽게 알 수 있게 합니다.

개요

옵션 테이블

링크

스펙

base

상태	슬롯	속성	값
enabled	root	color	$color.bg.layer-default
		strokeBottomWidth	1px
		strokeColor	$color.stroke.neutral
	indicator	height	2px
		color	$color.fg.neutral
		transformDuration	$duration.d4
		transformTimingFunction	$timing-function.easing

layout=hug

상태	슬롯	속성	값
enabled	root	paddingX	$dimension.spacing-x.global-gutter
	indicator	insetX	0px

layout=fill

상태	슬롯	속성	값
enabled	root	paddingX	0px
	indicator	insetX	$dimension.spacing-x.global-gutter

size=small

상태	슬롯	속성	값
enabled	root	height	40px

size=medium

상태	슬롯	속성	값
enabled	root	height	44px

base

상태	슬롯	속성	값
enabled	label	color	$color.fg.neutral-subtle
selected	label	color	$color.fg.neutral
disabled	label	color	$color.fg.disabled

size=medium

상태	슬롯	속성	값
enabled	root	minHeight	44px
		paddingX	$dimension.x2_5
		paddingY	$dimension.x2_5
	label	fontSize	$font-size.t5
		lineHeight	$line-height.t5
		fontWeight	$font-weight.bold

size=small

상태	슬롯	속성	값
enabled	root	minHeight	40px
		paddingX	$dimension.x2_5
		paddingY	$dimension.x2_5
	label	fontSize	$font-size.t4
		lineHeight	$line-height.t4
		fontWeight	$font-weight.bold