Chip

Il componente Chip è un elemento dell'interfaccia utente compatto e interattivo. Rappresenta le attività complesse come un contatto o un tag, spesso con un'icona e un'etichetta. Può essere selezionato, ignorato o cliccabile.

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

  • Assistenza: guida l'utente durante un'attività. Spesso appare come interfaccia utente temporanea in risposta all'input dell'utente.
  • Filtra: 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, come le selezioni in una o dal menu Fogli Google. Possono contenere un'icona e del testo e fornire una "X" per la rimozione.
  • Suggerimento: fornisce all'utente consigli in base ai suoi contenuti recenti attività o input. 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 relative caratteristiche uniche evidenziate.
Figura 1. I quattro componenti del chip.

Piattaforma API

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

  • label: la stringa visualizzata sul chip.
  • icon: l'icona visualizzata all'inizio del chip. Alcuni dei composabili specifici hanno un parametro leadingIcon e trailingIcon distinto.
  • onClick: la funzione lambda chiamata dal chip quando l'utente lo preme.

Chip di assistenza

Il composable AssistChip offre un modo semplice per creare un chip di assistenza che indirizzi l'utente in una determinata direzione. Uno strumento distintivo caratteristica è il parametro leadingIcon che ti consente di visualizzare un'icona a sinistra lato del chip. L'esempio seguente 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 è visualizzata come segue.

Un semplice chip di assistenza.
Figura 2. Chip di assistenza.

Icona filtro

Il componibile FilterChip richiede di monitorare se il chip è selezionata. L'esempio seguente mostra come mostrare un modello icona selezionata 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

Questa implementazione viene visualizzata come segue quando non è selezionata:

Un chip filtro non selezionato, senza spunta e con uno sfondo del piano.
Figura 3. Icona filtro non selezionato.

Se selezionato, il suo aspetto sarà il seguente:

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

Chip di input

Puoi utilizzare il composable InputChip per creare chip derivanti dall'interazione dell'utente. Ad esempio, in un client di posta, quando l'utente scrive un un'email, un chip di input potrebbe rappresentare una persona di cui l'utente ha inserito l'indirizzo nel campo "to:" .

La seguente implementazione mostra un chip di input già in stato selezionato. L'utente ignora 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 è visualizzata come segue.

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 i componibili elencati in questa pagina, sia nella definizione dell'API che nei casi d'uso comuni. Suggerimento presentano suggerimenti generati dinamicamente. Ad esempio, in un'app di chat basata sull'IA, potrebbe utilizzare chip di suggerimento per presentare possibili risposte alla richiesta più recente per creare un nuovo messaggio email.

Considera questa implementazione di SuggestionChip:

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

Questa implementazione si presenta nel seguente modo:

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

Chip rialzato

Tutti gli esempi in questo documento utilizzano i composabili di base con un aspetto piatto. Se vuoi un chip con un aspetto più elevato, utilizza uno dei seguenti tre composabili:

Risorse aggiuntive