Tabs

관련된 콘텐츠 그룹을 구분하고 전환할 수 있게 해주는 컴포넌트입니다. 사용자가 같은 계층의 서로 다른 콘텐츠 영역을 탐색할 때 사용됩니다.

Figma

Done

피그마 Tabs 컴포넌트의 Variant=Line

iOS

Not Ready

Android

Not Ready

개요

옵션 테이블

속성	값	기본값
size	small, medium	medium
layout	hug, fill	hug

스펙

base

상태	슬롯	속성	값
enabled	root	color	$color.bg.layer-default
		strokeBottomWidth	1px
		strokeColor	$color.stroke.neutral-muted
	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

Last updated on

Switch

Switch는 사용자가 개별 옵션을 켜거나 끌 수 있게 해주는 컴포넌트입니다. 일반적으로 특정 설정을 활성화하거나 비활성화하는 데 사용됩니다.

Text Field

사용자가 텍스트를 입력할 수 있는 컴포넌트입니다. 레이블, 도움말 텍스트, 에러 메시지 등을 포함하여 다양한 폼 입력 상황에 사용됩니다.

On this page

개요 옵션 테이블 스펙