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.

Di seguito sono riportati i quattro tipi di chip e dove potresti utilizzarli:

  • 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 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 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 del chip, con le loro caratteristiche uniche evidenziate.
Figura 1. I quattro componenti chip.

Piattaforma API

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

  • label: la stringa visualizzata sul chip.
  • icon: l'icona visualizzata all'inizio del chip. Alcuni degli elementi componibili specifici hanno parametri leadingIcon e trailingIcon separati.
  • onClick: la lambda che il chip chiama quando l'utente lo preme.

Chip di assistenza

L'AssistChip componibile fornisce un modo semplice per creare un chip di assistenza che spinge 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 di assistenza.

Icona filtro

L'elemento componibile FilterChip richiede di tenere traccia se il chip è selezionato o meno. Il seguente esempio mostra come visualizzare un'icona di spunta 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(
                    imageVector = Icons.Filled.Done,
                    contentDescription = "Done icon",
                    modifier = Modifier.size(FilterChipDefaults.IconSize)
                )
            }
        } else {
            null
        },
    )
}
Chip.kt

Ecco come appare l'implementazione quando non è selezionata:

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

E come appare quando è selezionata:

Icona filtro selezionata, con un segno di spunta e uno sfondo colorato.
Figura 4. Chip di 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 elettronica, 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à in 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(
                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

L'elemento componibile SuggestionChip è il più semplice degli elementi componibili 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") }
    )
}
Chip.kt

Ecco come appare l'implementazione:

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

Chip sollevato

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

Risorse aggiuntive