Segmented control

옵션들을 수평으로 나열한 버튼 그룹으로 한 번에 하나의 옵션만 선택합니다. 선택된 항목은 시각적으로 강조 되는 형태의 구조로 같은 콘텐츠 영역 내에서 보기 방식이나 필터를 변경할 때 사용됩니다.

Design

Web

iOS

Android

WantedSegmentedControl

텍스트 리스트를 기반으로 하는 Segmented Control 컴포넌트입니다. 아이템을 구분하여 선택할 수 있으며, 선택된 항목의 인덱스를 콜백으로 전달합니다. 내부적으로 WantedSegmentedControlOutlinedItem을 사용하며, 선택 상태에 따라 스타일이 변경됩니다.

val items = listOf("One", "Two", "Three")
var selectedIndex by remember { mutableIntStateOf(0) }

WantedSegmentedControlOutlined(
    items = items,
    selectedIndex = selectedIndex,
    onClick = { selectedIndex = it }
)

Parameters

이름	타입	설명
`items`	List<String>	항목에 표시할 텍스트 리스트입니다.
`selectedIndex`	Int	선택된 항목의 인덱스입니다.
`modifier`	Modifier	외형을 설정하는 Modifier입니다.
`size`	WantedSegmentedDefaults.SegmentedSize	세그먼트의 크기입니다 (Small, Medium, Large).
`onClick`	(Int) -> Unit	항목 클릭 시 선택된 인덱스를 반환하는 콜백입니다.

Overload

사용자 정의 Slot 방식으로 구성할 수 있는 Segmented Control 컴포넌트입니다. 항목 수와 개별 항목을 입력받아 세그먼트를 구성하며, 클릭 시 콜백을 통해 선택된 인덱스를 반환합니다.

WantedSegmentedControlOutlined(
    itemCount = 3,
    item = { index ->
        WantedSegmentedControlOutlinedItem(
            title = "Item $index",
            isSelected = selectedIndex == index
        )
    },
    onClick = { index -> selectedIndex = index }
)

Parameters

이름	타입	설명
`itemCount`	Int	표시할 항목의 수입니다.
`item`	(Int) -> Unit	각 인덱스에 대응하는 항목 Composable 슬롯입니다.
`modifier`	Modifier	외형을 설정하는 Modifier입니다.
`size`	WantedSegmentedDefaults.SegmentedSize	세그먼트 크기 설정입니다.
`onClick`	(Int) -> Unit	항목 클릭 시 호출되는 콜백입니다.

Advanced

WantedSegmentedControlOutlinedItem

SegmentedControlOutlined 내 개별 항목을 구성하는 컴포넌트입니다. 선택 여부에 따라 배경 색상, 테두리 색상, 텍스트 색상이 변경되며, 첫 번째 또는 마지막 항목인 경우 모서리가 둥글게 처리됩니다.

WantedSegmentedControlOutlinedItem(
    title = "옵션",
    isSelected = true,
    isFirst = true,
    isLast = false,
    icon = {
        Icon(
            painter = painterResource(id = R.drawable.ic_info),
            contentDescription = null
        )
    }
)

Parameters

이름	타입	설명
`title`	String	항목에 표시할 텍스트입니다.
`isSelected`	Boolean	항목의 선택 여부입니다.
`modifier`	Modifier	컴포넌트에 적용할 Modifier입니다.
`isFirst`	Boolean	첫 번째 항목 여부입니다. true인 경우 좌측 모서리가 둥글게 처리됩니다.
`isLast`	Boolean	마지막 항목 여부입니다. true인 경우 우측 모서리가 둥글게 처리됩니다.
`icon`	(@Composable () -> Unit)?	항목 왼쪽에 표시할 선택적 아이콘 Composable입니다.

WantedSegmentedControlSolid

문자열 리스트 기반의 Solid 스타일 Segmented Control 컴포넌트입니다. 선택된 항목을 강조 표시하며, 애니메이션되는 Knob으로 선택 상태를 표현합니다.

val items = listOf("전체", "읽음", "안읽음")
var selectedIndex by remember { mutableIntStateOf(0) }

WantedSegmentedControlSolid(
    items = items,
    selectedIndex = selectedIndex,
    onClick = { selectedIndex = it }
)

Parameters

이름	타입	설명
`items`	List<String>	표시할 항목 텍스트 리스트입니다.
`selectedIndex`	Int	현재 선택된 항목의 인덱스입니다.
`modifier`	Modifier	컴포넌트에 적용할 Modifier입니다.
`size`	SegmentedSize	컴포넌트의 크기입니다. Small, Medium, Large 중 선택할 수 있습니다.
`onClick`	(Int) -> Unit	항목 클릭 시 선택된 인덱스를 전달하는 콜백 함수입니다.

WantedSegmentedControlSolid

사용자 정의 항목으로 구성할 수 있는 Solid 스타일 Segmented Control 컴포넌트입니다. 각 항목을 커스텀 컴포넌트로 구성할 수 있으며, 선택 애니메이션은 Knob 위치 이동으로 표현됩니다.

var selectedIndex by remember { mutableIntStateOf(0) }

WantedSegmentedControlSolid(
    itemCount = 3,
    selectedIndex = selectedIndex,
    item = { index ->
        WantedSegmentedControlSolidItem(
            title = "옵션 $index",
            isSelected = index == selectedIndex,
            icon = { Icon(...) }
        )
    },
    onClick = { selectedIndex = it }
)

Parameters

이름	타입	설명
`itemCount`	Int	표시할 항목 개수입니다.
`selectedIndex`	Int	현재 선택된 항목의 인덱스입니다.
`item`	@Composable (Int) -> Unit	각 항목을 렌더링하는 Composable 슬롯입니다.
`modifier`	Modifier	컴포넌트에 적용할 Modifier입니다.
`size`	SegmentedSize	컴포넌트의 크기입니다. Small, Medium, Large 중 선택할 수 있습니다.
`onClick`	(Int) -> Unit	항목 클릭 시 선택된 인덱스를 전달하는 콜백 함수입니다.

WantedSegmentedControlSolidItem

SegmentedControlSolid 내 개별 항목을 구성하는 컴포넌트입니다. 선택 여부에 따라 텍스트 색상이 변경되며, 선택 시 강조 색상(label_normal)이 적용됩니다.

WantedSegmentedControlSolidItem(
    title = "알림",
    isSelected = true,
    icon = {
        Icon(
            painter = painterResource(id = R.drawable.ic_info),
            contentDescription = null
        )
    }
)

Parameters

이름	타입	설명
`title`	String	항목에 표시할 텍스트입니다.
`isSelected`	Boolean	항목의 선택 여부입니다.
`modifier`	Modifier	컴포넌트에 적용할 Modifier입니다.
`icon`	(@Composable () -> Unit)?	항목 왼쪽에 표시할 선택적 아이콘 Composable입니다.

WantedSegmentedDefaults

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

Enum

SegmentedSize

값	설명
`Small`	작은 사이즈입니다.
`Medium`	중간 사이즈입니다.
`Large`	큰 사이즈입니다.