Chip

Le composant Chip est un élément d'interface utilisateur compact et interactif. Il représente des entités complexes comme un contact ou un tag, souvent avec une icône et un libellé. Il peut s'agir d'une notification à cocher, à fermer ou sur laquelle il est possible de cliquer.

Voici les quatre types de chips et les cas d'utilisation associés :

  • Assister : guide l'utilisateur lors d'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 icône en forme de coche lorsqu'ils sont sélectionnés.
  • Input : 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 fournir un X pour la suppression.
  • Suggestion : fournit des recommandations à l'utilisateur en fonction de son activité ou de ses saisies récentes. Elles apparaissent généralement sous un champ de saisie pour inciter l'utilisateur à effectuer une action.
Exemple de chacun des quatre composants de chip, avec leurs caractéristiques uniques mises en évidence.
Figure 1 : Les quatre composants du chip.

Surface d'API

Il existe quatre composables correspondant 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 s'affiche sur le chip.
  • icon : icône affichée au début du chip. Certains composables spécifiques ont un paramètre leadingIcon et trailingIcon distinct.
  • onClick : lambda appelé par le chip lorsque l'utilisateur appuie dessus.

Chip d'assistance

Le composable AssistChip offre un moyen simple de créer un chip d'assistance qui incite l'utilisateur à aller dans une direction particulière. L'une de ses 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)
            )
        }
    )
}
Chip.kt

Cette implémentation se présente comme suit.

Chip d'assistance simple affichant une icône et un libellé de texte.
Figure 2 : Chip Assistant.

Élément de filtre

Le composable FilterChip vous oblige à suivre si le chip est sélectionné ou non. L'exemple suivant montre comment afficher une icône cochée en début de ligne 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 avec un arrière-plan uni.
Figure 3 : Chip de filtre non sélectionné.

Elle se présente comme suit lorsqu'elle est sélectionnée :

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

Chip de saisie

Vous pouvez utiliser le composable InputChip pour créer des chips résultant d'une interaction utilisateur. Par exemple, dans un client de messagerie, lorsqu'un utilisateur rédige un e-mail, un chip de saisie peut représenter un contact qu'il a ajouté au champ "À".

L'implémentation suivante montre 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 se présente comme suit.

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

Chip de suggestion

Le composable SuggestionChip est le plus élémentaire 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 suggestions présentent des indices générés de manière dynamique. Par exemple, dans une application de chat IA, vous pouvez utiliser des chips de suggestion pour présenter des réponses possibles au dernier message.

Examinez 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 :

Chip de suggestion simple.
Figure 6 : Chip de suggestion.

Chip surélevé

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

Ressources supplémentaires