Chip

간결한 정보나 선택 상태를 시각적으로 표현합니다. 태그, 필터, 선택된 항목 등을 나타내며, 아이콘 및 텍스트와 함께 사용할 수 있습니다. 작고 유연한 형태로 다양한 인터랙션을 지원합니다.

Design

Web

iOS

Android

WantedChip

사용자가 선택할 수 있는 Chip 컴포넌트를 생성합니다. 텍스트, 아이콘, 크기, 활성화 여부 등의 다양한 설정을 지원합니다.

WantedChip(
    text = "텍스트",
    leftIcon = R.drawable.ic_sample_icon,
    rightIcon = R.drawable.ic_sample_icon,
    onClick = { /* 클릭 처리 */ }
)

Parameters

이름	타입	설명
`text`	String	표시할 텍스트입니다.
`modifier`	Modifier	Modifier를 통한 외형 스타일 지정입니다.
`size`	ChipSize	Chip의 크기를 설정합니다.
`variant`	ChipVariant	Chip의 스타일 변형입니다 (Solid, Outlined).
`isActive`	Boolean	선택 여부 상태입니다.
`isEnable`	Boolean	사용 가능 여부입니다.
`leftIcon`	Int?	왼쪽에 표시할 아이콘 리소스 ID입니다.
`rightIcon`	Int?	오른쪽에 표시할 아이콘 리소스 ID입니다.
`interactionSource`	MutableInteractionSource	클릭 시의 상호작용 상태입니다.
`onClick`	(() -> Unit)?	클릭 시 실행되는 콜백입니다.

Overload

커스텀 스타일을 적용할 수 있는 Chip 컴포넌트를 생성합니다. 기본 스타일 외에 WantedChipDefault를 통한 직접 설정이 가능합니다.

WantedChip(
    text = "커스텀 텍스트",
    chipDefault = customChipDefault,
    onClick = { /* 클릭 처리 */ }
)

Parameters

이름	타입	설명
`text`	String	표시할 텍스트입니다.
`modifier`	Modifier	Modifier를 통한 스타�� 지정입니다.
`leftIcon`	Int?	왼쪽 아이콘 리소스 ID입니다.
`rightIcon`	Int?	오른쪽 아이콘 리소스 ID입니다.
`chipDefault`	WantedChipDefault	직접 지정한 Chip 스타일입니다.
`interactionSource`	MutableInteractionSource	클릭 상호작용을 위한 상태 객체입니다.
`onClick`	(() -> Unit)?	클릭 시 실행될 콜백입니다.

좌우 아이콘과 텍스트 Content를 포함한 Chip Layout을 구성합니다. 직접 Chip 기본 스타일 및 구성요소를 입력할 수 있습니다.

WantedChip(
    content = { Text("Content") },
    leftIcon = { Icon(...) },
    rightIcon = { Icon(...) }
)

Parameters

이름	타입	설명
`modifier`	Modifier	Modifier를 통한 외형 스타일 지정입니다.
`size`	ChipSize	Chip 크기 설정입니다.
`variant`	ChipVariant	Chip 스타일 변형입니다.
`isActive`	Boolean	활성화 여부입니다.
`isEnable`	Boolean	사용 가능 여부입니다.
`chipDefault`	WantedChipDefault	Chip 스타일 객체입니다.
`interactionSource`	MutableInteractionSource	터치 인터랙션 제어용 객체입니다.
`content`	(@Composable () -> Unit)	텍스트 또는 기타 Composable 콘텐츠입니다.
`leftIcon`	(@Composable (() -> Unit)?)	좌측 아이콘 Composable입니다.
`rightIcon`	(@Composable (() -> Unit)?)	우측 아이콘 Composable입니다.
`onClick`	(() -> Unit)?	클릭 이벤트 콜백입니다.

Advanced

WantedChipContract

Chip에 대한 전반적인 계약(Contract)을 정의하는 객체입니다. 이 객체는 Chip의 시각적 변형 및 크기에 대한 enum 클래스를 포함합니다.

WantedChipDefault

WantedChip의 기본 스타일을 정의하는 데이터 클래스입니다. 크기, 스타일 변형, 활성화 여부, 사용 가능 여부, 아이콘 색상, 배경 색상, 테두리 색상, 텍스트 스타일을 포함합니다.

val chipDefault = WantedChipDefault(
    size = ChipSize.Medium,
    variant = ChipVariant.Solid,
    isActive = true,
    isEnable = true,
    iconColor = Color.Black,
    backgroundColor = Color.White,
    borderColor = Color.Gray,
    textStyle = TextStyle.Default
)

Properties

이름	타입	설명
`size`	ChipSize	Chip의 크기를 설정합니다.
`variant`	ChipVariant	Chip의 스타일 변형입니다 (Solid, Outlined).
`isActive`	Boolean	Chip의 활성화 여부입니다.
`isEnable`	Boolean	Chip의 사용 가능 여부입니다.
`iconColor`	Color	아이콘의 색상입니다.
`backgroundColor`	Color	배경 색상입니다.
`borderColor`	Color	테두리 색상입니다.
`textStyle`	TextStyle	텍스트 스타일입니다.

WantedChipDefaults

WantedChip의 기본 스타일을 제공하는 객체입니다.

getDefault

기본 스타일에 맞춰 WantedChipDefault 객체를 생성합니다. Compose 환경에 따라 Chip의 스타일을 동적으로 결정합니다.

val chipDefault = WantedChipDefaults.getDefault(
    size = ChipSize.Medium,
    variant = ChipVariant.Solid
)

Parameters

이름	타입	설명
`size`	ChipSize	Chip의 크기를 설정합니다.
`variant`	ChipVariant	Chip의 스타일 변형입니다 (Solid, Outlined).
`isActive`	Boolean	활성화 여부입니다.
`isEnable`	Boolean	사용 가능 여부입니다.
`iconColor`	Color	아이콘의 색상입니다.
`backgroundColor`	Color	배경 색상입니다.
`borderColor`	Color	테두리 색상입니다.
`textStyle`	TextStyle	텍스트 스타일입니다.

Return

타입	설명
WantedChipDefault	설정된 WantedChipDefault 객체를 반환합니다.

Enum

ChipVariant

값	설명
`Solid`	배경이 채워진 형태입니다.
`Outlined`	테두리만 있는 형태입니다.

ChipSize

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