Chip

Il componente Chip è un elemento UI compatto e interattivo. Rappresenta entità complesse come un contatto o un tag, spesso con un'icona e un'etichetta. Può essere selezionabile, chiudibile o cliccabile.

I quattro tipi di chip e dove potresti utilizzarli sono i seguenti:

  • Assist: guida l'utente durante un'attività. Spesso viene visualizzato come elemento temporaneo dell'interfaccia utente in risposta all'input dell'utente.
  • Filtro: consente agli utenti di perfezionare i contenuti da un insieme di opzioni. Possono essere selezionati o deselezionati e possono includere un'icona a forma di segno di spunta quando sono selezionati.
  • Input: rappresenta le informazioni fornite dall'utente, ad esempio le selezioni in un menu. Possono contenere un'icona e del testo e fornire una X per la rimozione.
  • Suggerimento: fornisce consigli all'utente in base alla sua attività o ai suoi input recenti. In genere vengono visualizzati sotto un campo di input per invitare l'utente a eseguire azioni.
Un esempio di ciascuno dei quattro componenti del chip, con le loro caratteristiche uniche evidenziate.
Figura 1. I quattro componenti del chip.

Piattaforma API

Esistono quattro composable che corrispondono ai quattro tipi di chip. Le sezioni seguenti descrivono in dettaglio questi composable e le loro differenze. Tuttavia, condividono i seguenti parametri:

  • label: la stringa visualizzata sul chip.
  • icon: l'icona visualizzata all'inizio del chip. Alcuni composable specifici hanno parametri leadingIcon e trailingIcon separati.
  • onClick: la lambda chiamata dal chip quando l'utente lo preme.

Chip di assistenza

Il componente componibile AssistChip offre un modo semplice per creare un chip di assistenza che indirizza l'utente in una direzione specifica. Una caratteristica distintiva è il parametro leadingIcon che consente di visualizzare un'icona sul lato sinistro del chip. Il seguente esempio mostra come puoi implementarlo:

@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

Ecco come appare l'implementazione:

Un semplice chip di assistenza che mostra un'icona principale e un'etichetta di testo.
Figura 2. Chip Assist.

Icona filtro

Il componente componibile FilterChip richiede di monitorare se la chip è selezionata o meno. Il seguente esempio mostra come visualizzare un'icona di spunta solo quando l'utente ha selezionato il 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

Ecco come appare questa implementazione quando non è selezionata:

Un'icona filtro non selezionata, senza segno di spunta e con uno sfondo semplice.
Figura 3. Icona filtro deselezionata.

e viene visualizzato nel seguente modo quando viene selezionato:

Icona filtro selezionata, con un segno di spunta e uno sfondo colorato.
Figura 4. Chip del filtro selezionato.

Chip di input

Puoi utilizzare il componente componibile InputChip per creare chip che derivano dall'interazione dell'utente. Ad esempio, in un client di posta, quando l'utente sta scrivendo un'email, un chip di input potrebbe rappresentare un contatto che l'utente ha aggiunto al campo "A:".

La seguente implementazione mostra un chip di input già selezionato. L'utente chiude il chip quando lo preme.

@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

Ecco come appare l'implementazione:

Un chip di input con un avatar e un'icona finale.
Figura 5. Chip di input.

Chip di suggerimento

Il componibile SuggestionChip è il più semplice tra quelli elencati in questa pagina, sia nella definizione dell'API sia nei casi d'uso comuni. I chip suggerimento mostrano suggerimenti generati dinamicamente. Ad esempio, in un'app di chat AI, potresti utilizzare i chip di suggerimento per presentare possibili risposte al messaggio più recente.

Considera questa implementazione di SuggestionChip:

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

Ecco come appare la barra:

Un semplice chip di suggerimento.
Figura 6. Chip di suggerimento.

Chip sollevato

Tutti gli esempi in questo documento utilizzano i composable di base che hanno un aspetto piatto. Se vuoi una chip con un aspetto elevato, utilizza uno dei tre seguenti componenti componibili:

Risorse aggiuntive