Le composant Chip
est un élément d'interface utilisateur compact et interactif. Elle représente des concepts
des entités comme un contact ou
un tag, souvent avec une icône et un libellé. Il peut s'agir
que l'on peut cocher,
fermer ou cliquer.
Voici les quatre types de chips et les cas où vous pouvez les utiliser:
- Assistance: guide l'utilisateur pendant une tâche. Apparaît souvent sous la forme d'une interface utilisateur temporaire en réponse à une entrée utilisateur.
- Filtrer: permet aux utilisateurs d'affiner le contenu à partir d'un ensemble d'options. Ils peuvent et une coche peut s'afficher lorsqu'elle est sélectionnée.
- Entrée: représente les informations fournies par l'utilisateur, telles que les sélections dans un . Ils peuvent contenir une icône et du texte, et être précédés d'un "X" pour suppression.
- Suggestion: fournit des recommandations à l'utilisateur en fonction de sa récente une activité ou une entrée. Elles apparaissent généralement sous un champ de saisie pour inviter l'utilisateur actions.
Surface de l'API
Il existe quatre composables qui correspondent aux quatre types de chips. La les sections suivantes décrivent en détail ces composables et leurs différences. Toutefois, ils partagent les paramètres suivants:
label
: chaîne qui apparaît sur le chip.icon
: icône affichée au début du chip. Certaines des des composables spécifiques ont unleadingIcon
et untrailingIcon
distincts .onClick
: lambda que la puce appelle lorsque l'utilisateur appuie dessus.
Chip d'aide
Le composable AssistChip
permet de créer facilement un
qui pousse l'utilisateur dans une direction particulière. Une caractéristique
est son paramètre leadingIcon
, qui vous permet d'afficher une icône à gauche
du chip. L'exemple suivant montre comment l'implémenter:
@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) ) } ) }
Cette implémentation se présente comme suit.
![Un chip d'assistance simple](https://developer.android.google.cn/static/develop/ui/compose/images/components/chip-assist.png?authuser=5&hl=fr)
Élément de filtre
Avec le composable FilterChip
, vous devez vérifier si le chip
est sélectionnée. L'exemple suivant montre comment afficher un début
cochée uniquement si l'utilisateur a sélectionné le chip:
@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 }, ) }
Cette implémentation se présente comme suit lorsqu'elle n'est pas sélectionnée:
![Chip de filtre non sélectionné, sans coche et arrière-plan du plan.](https://developer.android.google.cn/static/develop/ui/compose/images/components/chip-filter.png?authuser=5&hl=fr)
Il s'affiche comme suit lorsqu'il est sélectionné:
![Chip de filtre sélectionné, avec une coche et un arrière-plan coloré.](https://developer.android.google.cn/static/develop/ui/compose/images/components/chip-filter-active.png?authuser=5&hl=fr)
Chip d'entrée
Vous pouvez utiliser le composable InputChip
pour créer des chips issus de
l'interaction de l'utilisateur. Par exemple, dans un client de messagerie, lorsque l'utilisateur écrit un
adresse e-mail, un chip d'entrée peut représenter une personne dont l'adresse a été saisie par l'utilisateur
dans le champ "to:" .
L'implémentation suivante illustre un chip d'entrée déjà présent dans un sélectionné. L'utilisateur ferme le chip lorsqu'il appuie dessus.
@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) ) }, ) }
Cette implémentation se présente comme suit.
![Chip d'entrée avec un avatar et une icône à la fin.](https://developer.android.google.cn/static/develop/ui/compose/images/components/chip-input.png?authuser=5&hl=fr)
Chip de suggestion
Le composable SuggestionChip
est le plus élémentaire des composables listés.
sur cette page, à la fois dans sa définition de l'API et ses cas d'utilisation courants. Suggestion
présentent des indices générés dynamiquement. Par exemple, dans une application de chat IA, vous
peut utiliser des chips de suggestion pour présenter des réponses possibles aux questions les plus récentes
.
Prenons cette implémentation de SuggestionChip
:
@Composable fun SuggestionChipExample() { SuggestionChip( onClick = { Log.d("Suggestion chip", "hello world") }, label = { Text("Suggestion chip") } ) }
Cette implémentation est la suivante :
![Un chip d'assistance simple.](https://developer.android.google.cn/static/develop/ui/compose/images/components/chip-suggestion.png?authuser=5&hl=fr)
Chip surélevé
Tous les exemples de ce document utilisent les composables de base qui acceptent un apparence. Si vous recherchez une puce plus visible, utilisez l'une des trois composables suivants: