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.