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, ignorabile o cliccabile.

I quattro tipi di chip e i relativi casi d'uso sono i seguenti:

  • Assistenza: guida l'utente durante un'attività. Spesso viene visualizzato come elemento UI temporaneo 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, se selezionati, possono includere un'icona con un segno di spunta.
  • Input: rappresenta le informazioni fornite dall'utente, ad esempio le selezioni in un menu. Possono contenere un'icona e un testo e fornire una X per la rimozione.
  • Suggerimento: fornisce consigli all'utente in base alla sua attività o al suo input recenti. In genere vengono visualizzati sotto un campo di immissione per richiedere azioni dell'utente.
Un esempio di ciascuno dei quattro componenti dei chip, con le relative caratteristiche uniche evidenziate.
Figura 1. I quattro componenti del chip.

Piattaforma API

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

  • label: la stringa visualizzata nel chip.
  • icon: l'icona visualizzata all'inizio del chip. Alcuni dei componibili specifici hanno un parametro leadingIcon e trailingIcon separato.
  • onClick: la funzione lambda che il chip chiama quando l'utente lo preme.

Chip di assistenza

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

@Composable
fun AssistChipExample() {
    AssistChip(
        onClick = { Log.d("Assist chip", "hello world") },
        label = { Text("Assist chip") },
        leadingIcon = {
            Icon(
                painter = rememberVectorPainter(AppIcons.Settings),
                contentDescription = "Localized description",
                Modifier.size(AssistChipDefaults.IconSize)
            )
        }
    )
}

Ecco come appare l'implementazione:

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

Icona filtro

Il componibile FilterChip richiede di monitorare se il chip è selezionato o meno. L'esempio seguente mostra come visualizzare un'icona di controllo iniziale 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(
                    painter = rememberVectorPainter(AppIcons.Done),
                    contentDescription = "Done icon",
                    modifier = Modifier.size(FilterChipDefaults.IconSize)
                )
            }
        } else {
            null
        },
    )
}

Ecco come appare l'implementazione quando non è selezionata:

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

Quando è selezionato, viene visualizzato come segue:

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

Chip di input

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

La seguente implementazione mostra un chip di input già in uno stato 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(
                painter = rememberVectorPainter(AppIcons.Person),
                contentDescription = "Localized description",
                Modifier.size(InputChipDefaults.AvatarSize)
            )
        },
        trailingIcon = {
            Icon(
                painter = rememberVectorPainter(AppIcons.Close),
                contentDescription = "Localized description",
                Modifier.size(InputChipDefaults.AvatarSize)
            )
        },
    )
}

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 di suggerimento presentano 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") }
    )
}

Ecco come appare la barra:

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

Chip in rilievo

Tutti gli esempi in questo documento utilizzano gli elementi componibili di base che hanno un aspetto piatto. Se vuoi un chip con un aspetto in rilievo, utilizza uno dei tre seguenti elementi componibili:

Risorse aggiuntive