Puce électronique

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 un tag, souvent avec une icône et un libellé. Elle peut être cochée, ignorable ou cliquable.

Les quatre types de chips et les endroits où vous pouvez les utiliser sont les suivants:

  • Assistance: guide l'utilisateur au cours d'une tâche. Elle 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 icône en forme de 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, et une croix ("X") à supprimer.
  • Suggestion: fournit des recommandations à l'utilisateur en fonction de son activité récente ou de ses entrées. Ces emplacements s'affichent généralement sous un champ de saisie pour inviter l'utilisateur à effectuer des actions.
Exemple de chacun des quatre composants du chip, avec leurs caractéristiques uniques mises en évidence.
Figure 1. Les quatre composants de la puce.

Surface d'API

Quatre composables correspondent aux quatre types de chips. Les sections suivantes décrivent ces composables et leurs différences en détail. Ils partagent toutefois les paramètres suivants:

  • label: chaîne qui apparaît dans le chip.
  • icon: icône affichée au début du chip. Certains composables spécifiques ont des paramètres leadingIcon et trailingIcon distincts.
  • onClick: lambda que le chip appelle lorsque l'utilisateur appuie dessus.

Chip d'aide

Le composable AssistChip offre un moyen simple de créer un chip d'assistance qui encourage l'utilisateur dans une direction particulière. Son paramètre leadingIcon vous permet d'afficher une icône sur le côté gauche de la puce. 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)
            )
        }
    )
}
Chip.kt

Cette implémentation est la suivante.

Un chip d'assistance simple
Figure 2. Chip d'assistance

Élément de filtre

Avec le composable FilterChip, vous devez savoir si le chip est sélectionné ou non. L'exemple suivant montre comment afficher une icône cochée en avant 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
        },
    )
}
Chip.kt

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
Figure 3. Icône de filtre non sélectionnée.

Et apparaît comme suit lorsque cette option est sélectionnée:

Chip de filtre sélectionné, avec une coche et un arrière-plan coloré.
Figure 4. Icône de filtre sélectionnée.

Chip d'entrée

Vous pouvez utiliser le composable InputChip pour créer des chips résultant d'une interaction utilisateur. Par exemple, dans un client de messagerie, lorsque l'utilisateur rédige 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)
            )
        },
    )
}
Chip.kt

Cette implémentation est la suivante.

Chip d'entrée avec un avatar et une icône à la fin.
Figure 5 : Chip d'entrée

Chip de suggestion

Le composable SuggestionChip est le plus basique des composables listés sur cette page, à la fois dans sa définition d'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 l'exemple de cette implémentation de SuggestionChip:

@Composable
fun SuggestionChipExample() {
    SuggestionChip(
        onClick = { Log.d("Suggestion chip", "hello world") },
        label = { Text("Suggestion chip") }
    )
}
Chip.kt

Cette implémentation est la suivante :

Un chip d'assistance simple
Figure 6 : Chip d'assistance

Chip surélevé

Tous les exemples de ce document utilisent des composables de base qui ont une apparence plate. Si vous souhaitez un chip à l'apparence élevée, utilisez l'un des trois composables suivants:

Ressources supplémentaires