Top navigation

앱과 모바일 웹의 최상단에 위치하는 주요 탐색 요소입니다. 사용자가 서비스의 핵심 섹션과 기능에 빠르게 접근할 수 있도록 돕습니다.

Design

Web

iOS

Android

WantedTopAppBar

기본 TopAppBar 컴포넌트입니다. 다양한 Variant를 지원하며, 스크롤 상태에 따라 하단 Divider가 표시됩니다.

WantedTopAppBar(
    title = { Text(...) },
    navigationIcon = { Icon(...) },
    actions = { IconButton(...) }
)

Parameters

이름	타입	설명
`modifier`	Modifier	컴포넌트에 적용할 Modifier입니다.
`windowInsets`	WindowInsets	적용할 WindowInsets입니다.
`variant`	Variant	앱바 형태입니다.
`backgroundColor`	Color	앱바 배경 색상입니다.
`background`	Boolean	앱바 배경을 표시할지 여부입니다.
`scrollableState`	ScrollableState?	스크롤 상태를 관리하는 객체입니다.
`navigationIcon`	(@Composable () -> Unit)?	좌측 아이콘 슬롯입니다.
`title`	(@Composable () -> Unit)?	타이틀 슬롯입니다.
`actions`	(@Composable RowScope.() -> Unit)?	우측 액션 슬롯입니다.

Overload

문자열 타이틀을 받는 TopAppBar 컴포넌트입니다. 타이틀 정렬을 좌측 또는 중앙으로 설정할 수 있습니다.

WantedTopAppBar(
    title = "타이틀",
    navigationIcon = { Icon(...) },
    actions = { IconButton(...) }
)

Parameters

이름	타입	설명
`modifier`	Modifier	컴포넌트에 적용할 Modifier입니다.
`windowInsets`	WindowInsets	적용할 WindowInsets입니다.
`variant`	Variant	앱바 형태입니다.
`backgroundColor`	Color	앱바 배경 색상입니다.
`background`	Boolean	앱바 배경을 표시할지 여부입니다.
`titleAlignCenter`	Boolean	타이틀 중앙 정렬 여부입니다.
`scrollableState`	ScrollableState?	스크롤 상태를 관리하는 객체입니다.
`title`	String	타이틀 텍스트입니다.
`navigationIcon`	(@Composable () -> Unit)?	좌측 아이콘 슬롯입니다.
`actions`	(@Composable RowScope.() -> Unit)?	우측 액션 슬롯입니다.

Advanced

WantedBackTopAppBar

뒤로 가기 아이콘이 포함된 TopAppBar 컴포넌트입니다. 좌측에 뒤로 가기 아이콘이 고정으로 배치됩니다.

WantedBackTopAppBar(
    title = "타이틀",
    onClickBack = { /* 뒤로 가기 처리 */ }
)

Parameters

이름	타입	설명
`modifier`	Modifier	컴포넌트에 적용할 Modifier입니다.
`windowInsets`	WindowInsets	적용할 WindowInsets입니다.
`variant`	Variant	앱바 형태입니다.
`backgroundColor`	Color	앱바 배경 색상입니다.
`background`	Boolean	앱바 배경을 표시할지 여부입니다.
`scrollableState`	ScrollableState?	스크롤 상태를 관리하는 객체입니다.
`titleAlignCenter`	Boolean	타이틀 중앙 정렬 여부입니다.
`title`	String	타이틀 텍스트입니다.
`actions`	(@Composable RowScope.() -> Unit)?	우측 액션 슬롯입니다.
`onClickBack`	() -> Unit	뒤로 가기 버튼 클릭 시 호출되는 콜백입니다.

WantedSearchTopAppBar

검색 기능을 제공하는 TopAppBar 컴포넌트입니다. 좌측에 뒤로가기 버튼과 검색 입력 필드를 포함한 상단 앱바로, 검색어 입력, 포커스 관리, 키보드 액션 등의 기능을 제공합니다.

WantedSearchTopAppBar(
    text = searchText,
    placeholder = "검색어를 입력하세요",
    onValueChange = { newText -> searchText = newText },
    onClickBack = { navController.popBackStack() },
    actions = {
        IconButton(onClick = { /* 검색 */ }) {
            Icon(...)
        }
    }
)

Parameters

이름	타입	설명
`text`	String	검색 필드에 표시될 텍스트입니다.
`modifier`	Modifier	컴포넌트에 적용할 Modifier입니다.
`windowInsets`	WindowInsets	적용할 WindowInsets입니다.
`backgroundColor`	Color	앱바 배경 색상입니다.
`background`	Boolean	앱바 배경을 표시할지 여부입니다.
`scrollableState`	ScrollableState?	스크롤 상태를 관리하는 객체입니다.
`placeholder`	String	검색 필드의 플레이스홀더 텍스트입니다.
`enabled`	Boolean	검색 필드 활성화 여부입니다.
`size`	Size	검색 필드의 크기입니다.
`maxWordCount`	Int	최대 입력 가능한 글자 수입니다.
`enabledOverflowText`	Boolean	텍스트 오버플로우 허용 여부입니다.
`interactionSource`	MutableInteractionSource?	사용자 인터랙션 상태를 추적하는 객체입니다.
`keyboardOptions`	KeyboardOptions	키보드 옵션입니다.
`keyboardActions`	KeyboardActions	키보드 액션 핸들러입니다.
`focused`	State<Boolean>?	검색 필드의 포커스 상태입니다.
`textStyle`	TextStyle	검색 텍스트의 스타일입니다.
`cursorBrush`	Brush	커서의 브러시(색상)입니다.
`focusRequester`	FocusRequester?	포커스 요청을 위한 객체입니다.
`actions`	(@Composable RowScope.() -> Unit)?	우측 액션 슬롯입니다.
`onClickBack`	() -> Unit	뒤로가기 버튼 클릭 시 호출되는 콜백입니다.
`onValueChange`	(String) -> Unit	검색어 변경 시 호출되는 콜백입니다.

WantedTopAppBarIconButton

TopAppBar에 사용되는 아이콘 버튼 컴포넌트입니다. Variant에 따라 다양한 스타일이 적용됩니다.

WantedTopAppBarIconButton(
    painter = painterResource(id = R.drawable.icon_normal_arrow_left),
    onClick = { /* 클릭 처리 */ }
)

Parameters

이름	타입	설명
`painter`	Painter	아이콘으로 표시할 이미지입니다.
`modifier`	Modifier	컴포넌트에 적용할 Modifier입니다.
`variant`	Variant	앱바 형태입니다.
`enabled`	Boolean	버튼 활성화 여부입니다.
`interactionSource`	MutableInteractionSource	사용자 인터랙션을 처리하는 객체입니다.
`tint`	Color	아이콘 색상입니다.
`badgeAlignment`	Alignment	배지 정렬 위치입니다.
`badge`	(@Composable () -> Unit)?	배지 콘텐츠입니다.
`onClick`	() -> Unit	버튼 클릭 시 호출되는 콜백입니다.

WantedTopAppBarContract

TopAppBar 컴포넌트에서 사용하는 설정 값을 정의하는 객체입니다.

Enum

Variant

값	설명
`Normal`	일반 형태입니다.
`Display`	디스플레이 형태입니다.
`Floating`	플로팅 형태입니다.
`Search`	검색 형태입니다.