Le composant Chip
est un élément d'interface utilisateur compact et interactif. Il représente des entités complexes telles qu'un contact ou une balise, souvent avec une icône et un libellé. Elle peut être cochée, fermée ou cliquable.
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 comme un élément d'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 être sélectionnés ou désélectionnés, et peuvent inclure une coche lorsqu'ils sont sélectionnés.
- Entrée: représente les informations fournies par l'utilisateur, telles que les sélections dans un menu. Ils peuvent contenir une icône et du texte, accompagnés d'un "X" pour les supprimer.
- Suggestion: fournit des recommandations à l'utilisateur en fonction de son activité ou de ses entrées récentes. Ils apparaissent généralement sous un champ de saisie pour inviter l'utilisateur à effectuer une action.
Surface de l'API
Il existe quatre composables qui correspondent aux quatre types de chips. Les sections suivantes décrivent ces composables et leurs différences en détail. 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. Certains composables spécifiques ont des paramètresleadingIcon
ettrailingIcon
distincts.onClick
: lambda que la puce appelle lorsque l'utilisateur appuie dessus.
Chip d'aide
Le composable AssistChip
permet de créer facilement un chip d'aide qui pousse l'utilisateur dans une direction particulière. L'une des caractéristiques distinctives est son paramètre leadingIcon
, qui vous permet d'afficher une icône sur le côté 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.
Élément de filtre
Le composable FilterChip
nécessite que vous voyiez si le chip est sélectionné ou non. L'exemple suivant montre comment afficher une icône de coche de début uniquement lorsque 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:
Il s'affiche comme suit lorsqu'il est sélectionné:
Chip d'entrée
Vous pouvez utiliser le composable InputChip
pour créer des chips résultant d'une interaction de l'utilisateur. Par exemple, dans un client de messagerie, lorsque l'utilisateur écrit un e-mail, un chip d'entrée peut représenter une personne dont l'adresse a été saisie dans le champ "À".
L'implémentation suivante illustre un chip d'entrée déjà 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 de suggestion
Le composable SuggestionChip
est le plus élémentaire des composables répertoriés sur cette page, à la fois dans sa définition de l'API et dans ses cas d'utilisation courants. Les chips de suggestion présentent des indices générés dynamiquement. Par exemple, dans une application de chat basée sur l'IA, vous pouvez utiliser des chips de suggestion pour présenter des réponses possibles au message le plus récent.
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 :
Chip surélevé
Tous les exemples de ce document utilisent les composables de base qui prennent un aspect plat. Si vous recherchez une puce plus élégante, utilisez l'un des trois composables suivants: