Top Navigation

페이지 상단에 위치한 네비게이션 컴포넌트입니다. 페이지 제목, 뒤로가기, 액션 버튼 등을 포함하여 앱의 주요 네비게이션을 제공합니다.

Figma

In Progress

Stackflow AppBar

iOS

Done

Android

Done

개요

옵션 테이블

속성	값	기본값
tone	layer, transparent
title	string

스펙

theme=cupertino

상태	슬롯	속성	값
enabled	root	minHeight	44px
		paddingX	$dimension.x4
	icon	size	24px
		targetSize	44px

theme=android

상태	슬롯	속성	값
enabled	root	minHeight	56px
		paddingX	$dimension.x4
	icon	size	24px
		targetSize	44px

tone=layer

상태	슬롯	속성	값
enabled	root	color	$color.bg.layer-default
	title	color	$color.fg.neutral
	subtitle	color	$color.fg.neutral-muted
	icon	color	$color.fg.neutral

tone=transparent

상태	슬롯	속성	값
enabled	root	color	#00000000
	title	color	$color.palette.static-white
	subtitle	color	$color.palette.static-white
	icon	color	$color.palette.static-white

divider=true

상태	슬롯	속성	값
enabled	root	strokeColor	$color.stroke.neutral-subtle
		strokeWidth	1px

titleLayout=titleOnly

상태	슬롯	속성	값
enabled	title	fontSize	$font-size.t6-static
		fontWeight	$font-weight.bold
		lineHeight	$line-height.t6-static

titleLayout=withSubtitle

상태	슬롯	속성	값
enabled	title	fontSize	$font-size.t5-static
		fontWeight	$font-weight.bold
		lineHeight	$line-height.t5-static
	subtitle	fontSize	$font-size.t2-static
		fontWeight	$font-weight.regular
		lineHeight	$line-height.t2-static

Last updated on

Toggle Button

사용자가 특정 상태를 켜거나 끌 수 있게 해주는 버튼 형태의 컴포넌트입니다. 필터링이나 뷰 전환과 같은 즉각적인 상태 변경에 사용됩니다.

Action ChipDeprecated

Next Page

On this page

개요 옵션 테이블 스펙