Chip

Il componente Chip è un elemento dell'interfaccia utente 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:

  • 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 potrebbero 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 relative caratteristiche uniche evidenziate.
Figura 1. I quattro componenti del chip.

Superficie 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 che appare 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 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

Questa implementazione viene visualizzata nel seguente modo.

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 iniziale solo quando l'utente ha selezionato la 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

Questa implementazione viene visualizzata nel seguente modo 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. Icona filtro selezionata.

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à 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

Questa implementazione viene visualizzata nel seguente modo.

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

Chip di suggerimento

Il componente 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 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

Questa implementazione viene visualizzata nel seguente modo:

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 un chip con un aspetto elevato, utilizza uno dei tre seguenti composable:

Risorse aggiuntive