Chip 구성요소는 간단한 대화형 UI 요소입니다. 복잡함을 나타냅니다.
엔터티(예: 연락처, 태그)로 구성되며 아이콘 및 라벨이 있는 경우가 많습니다. 가능
선택 가능, 닫을 수 있음 또는 클릭 가능
네 가지 유형의 칩과 이를 사용할 수 있는 위치는 다음과 같습니다.
- 지원: 작업을 진행하는 동안 사용자를 안내합니다. 종종 임시 UI로 표시됨 요소가 입력될 때 사용됩니다.
- 필터: 사용자가 옵션 모음에서 콘텐츠를 미세 조정할 수 있습니다. 사용자는 할 수 있습니다. 가 선택 또는 선택 해제되며, 선택되면 체크 표시 아이콘이 포함될 수 있습니다.
- 입력: 사용자가 제공한 정보(예: 선택합니다. 아이콘과 텍스트를 포함할 수 있으며 'X'를 제공할 수 있습니다. 삭제해야 합니다.
- 추천: 사용자의 최근 활동을 기반으로 추천을 제공합니다. 합니다. 일반적으로 사용자에게 메시지를 표시하기 위해 입력란 아래에 표시됩니다. 있습니다.
</ph>
API 노출 영역
4가지 유형의 칩에 상응하는 컴포저블이 4개 있습니다. 이 다음 섹션에서는 이러한 컴포저블과 그 차이점을 자세히 설명합니다. 그러나 다음 매개변수를 공유합니다.
label: 칩에 표시되는 문자열입니다.icon: 칩의 시작 부분에 표시되는 아이콘입니다. 일부 특정 컴포저블에는 별도의leadingIcon와trailingIcon가 있습니다. 매개변수 값으로 사용됩니다.onClick: 사용자가 칩을 눌렀을 때 칩에서 호출하는 람다입니다.
지원 칩
AssistChip 컴포저블을 사용하면 간단하게
특정 방향으로 사용자를 조금씩 유도하는 지원 칩이 있습니다. 가장 차별화되는
기능은 왼쪽에 아이콘을 표시할 수 있는 leadingIcon 매개변수입니다.
있습니다. 다음 예는 구현 방법을 보여줍니다.
@Composable
fun AssistChipExample() {
AssistChip(
onClick = { Log.d("Assist chip", "hello world") },
label = { Text("Assist chip") },
leadingIcon = {
Icon(
Icons.Filled.Settings,
contentDescription = "Localized description",
Modifier.size(AssistChipDefaults.IconSize)
)
}
)
}
이 구현은 다음과 같이 표시됩니다.
<ph type="x-smartling-placeholder">
필터 칩
FilterChip 컴포저블을 사용하면 칩이
선택합니다. 다음 예는 선행
사용자가 칩을 선택한 경우에만 체크표시 아이콘을 선택합니다.
@Composable
fun FilterChipExample() {
var selected by remember { mutableStateOf(false) }
FilterChip(
onClick = { selected = !selected },
label = {
Text("Filter chip")
},
selected = selected,
leadingIcon = if (selected) {
{
Icon(
imageVector = Icons.Filled.Done,
contentDescription = "Done icon",
modifier = Modifier.size(FilterChipDefaults.IconSize)
)
}
} else {
null
},
)
}
선택 해제하면 이 구현이 다음과 같이 표시됩니다.
<ph type="x-smartling-placeholder">
선택하면 다음과 같이 표시됩니다.
<ph type="x-smartling-placeholder">
입력 칩
InputChip 컴포저블을 사용하여 다음에서 발생하는 칩을 만들 수 있습니다.
사용자 상호작용입니다. 예를 들어 이메일 클라이언트에서 사용자가
입력 칩은 사용자가 입력한 주소를 가진 사람을 나타낼 수 있습니다.
'to:'에 입력합니다. 필드를 확인합니다.
다음 구현은 이미 입력 칩을 보여줍니다. 선택 상태가 됩니다. 사용자가 칩을 닫으면 닫습니다.
@Composable
fun InputChipExample(
text: String,
onDismiss: () -> Unit,
) {
var enabled by remember { mutableStateOf(true) }
if (!enabled) return
InputChip(
onClick = {
onDismiss()
enabled = !enabled
},
label = { Text(text) },
selected = enabled,
avatar = {
Icon(
Icons.Filled.Person,
contentDescription = "Localized description",
Modifier.size(InputChipDefaults.AvatarSize)
)
},
trailingIcon = {
Icon(
Icons.Default.Close,
contentDescription = "Localized description",
Modifier.size(InputChipDefaults.AvatarSize)
)
},
)
}
이 구현은 다음과 같이 표시됩니다.
추천 칩
SuggestionChip 컴포저블은 나열된 컴포저블 중 가장 기본적인 컴포저블입니다.
API 정의 및 일반적인 사용 사례를
확인할 수 있습니다 추천
칩은 동적으로 생성된 힌트를 제공합니다. 예를 들어 AI 채팅 앱에서
추천 쿼리 칩을 사용하여 가장 최근의
메시지가 표시됩니다.
다음과 같은 SuggestionChip 구현을 생각해 보세요.
@Composable
fun SuggestionChipExample() {
SuggestionChip(
onClick = { Log.d("Suggestion chip", "hello world") },
label = { Text("Suggestion chip") }
)
}
이 구현은 다음과 같이 표시됩니다.
높아진 칩
이 문서의 모든 예에서는 평면을 사용하는 기본 컴포저블을 사용합니다. 있습니다. 상승된 모양이 있는 칩을 원하는 경우 다음 세 가지 컴포저블이 있습니다.