Chip

Il componente Chip è un elemento compatto interattivo che rappresenta un input, un attributo o un'azione.

Anatomia

I chip possono contenere fino a due etichette di testo e un'icona facoltativa. Devi fornire almeno un'etichetta di testo o un'icona. I chip possono troncare il testo se l'etichetta di testo è troppo lunga. L'etichetta principale è costituita da una riga di testo se è presente l'etichetta secondaria, ma può contenere fino a due righe di testo se non è presente l'etichetta secondaria.

R. Etichetta principale
B. Etichetta secondaria (facoltativa)
C. Icona (facoltativa)
D. Container

Suggerimenti di progettazione

Chip immagine

I chip immagine contengono azioni relative a una determinata immagine. I chip di immagine funzionano bene per comunicare un aspetto più specifico.

Chip(
    ...
    label = {
        Text(
            text = "Summer Mix",
            maxLines = 1,
            overflow = TextOverflow.Ellipsis
         )
    },
    colors = ChipDefaults.imageBackgroundChipColors(
        backgroundImagePainter = painterResource(id = R.drawable.clouds)
    )
)
Chip avatar

Usa i chip di avatar per le azioni correlate a un avatar scelto. I chip degli avatar possono anche contenere icone per rendere l'avatar più facilmente riconoscibile, ad esempio una foto dell'ID contatto. Le icone degli avatar sono di 32 x 32 dp.

Chip(
    ...
    label = {
        Text(text = "Mark Castle")
    },
    icon = {
        Icon(
            painter = painterResource(id = R.drawable.avatar),
            contentDescription = null,
            modifier = Modifier.size(ChipDefaults.LargeIconSize)
                .wrapContentSize(align = Alignment.Center)
        )
    }
)
Chip compatto

Il componente correlato, CompactChip, è una variante del componente di chip che sembra più piccolo ed è progettato per i casi d'uso in cui lo spazio disponibile è minore. I chip compatti hanno uno slot per un'icona e uno slot per un'etichetta di testo di una sola riga. I chip compatti hanno un'area toccabile con un'altezza di 48 dp.

Gerarchia

Usa riempimenti di colori diversi per indicare la gerarchia dei chip. Progetta ogni schermata in modo che contenga un singolo chip in evidenza per l'azione principale.

Enfasi elevata
Utilizza chip che richiedono un'enfasi elevata per le azioni principali nella pagina. Utilizza colori primari come riempimento in un chip di enfasi elevata.

Enfasi media
Utilizza chip di enfasi media per le azioni meno importanti di quelle principali. Utilizza colori secondari per il riempimento di un chip di enfasi media.

In alternativa, utilizza il componente OutlineChip personalizzato. Il chip evidenziato ha uno sfondo trasparente, un tratto colorato della variante principale con un'opacità del 60% e contenuti di colore principale.

Enfasi ridotta
I chip di enfasi bassa hanno un riempimento trasparente e solo un'etichetta di testo. Utilizza chip a bassa enfasi per indicare una relazione figlio con un chip primario o secondario.

Dimensioni

Chip predefinito

Icona: 24 dp
Altezza: 52 dp

Chip compatto

Icona: 20 dp
Altezza: 32 dp
Area toccabile: 48 dp

Utilizzo

Visualizza esempi di utilizzo dei chip, come chip standard, in Impostazioni e chip di immagini in un'app per l'allenamento.