Chip
Mantieni tutto organizzato con le raccolte
Salva e classifica i contenuti in base alle tue preferenze.
Il componente Chip è un elemento interattivo che rappresenta un input, un attributo o un'azione.
Suggerimenti per le linee
Minimo
Testo principale > 1 righe
Etichetta secondaria > 1 righe
Massima
Testo principale > 2 righe
Etichetta secondaria > 3 righe
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 potrebbero troncare il testo se l'etichetta è troppo lunga. L'etichetta principale è una riga di testo se è presente l'etichetta secondaria. L'etichetta principale può contenere due righe di testo se l'etichetta secondaria non è presente.
Se c'è una sola etichetta, deve essere centrata. Se è presente un'etichetta o un'icona secondaria, le etichette devono essere allineate a sinistra.
A. Etichetta principale
B. (Facoltativo) Etichetta secondaria
C. Icona (facoltativa)
D. contenitore
Chip Gradient
Chip standard
In alto/a sinistra = 50% principale
In basso/a destra = 0% Superficie
(Overlay di sfumatura su uno sfondo del colore superficie)
Chip immagine
In alto/a sinistra = 30% principale
0, 0, 45° (in basso/a destra) = 20% sulla variante in superficie
Tipi di chip alternativi
Chip con immagine di sfondo
I chip di immagine contengono azioni correlate a un'immagine scelta. I chip di immagine sono ideali per comunicare un aspetto più specifico.
È consigliabile che questi chip abbiano un'altezza fissa di 52 dp.
Chip avatar
Utilizza i chip di avatar per le azioni correlate a un determinato avatar. I chip avatar possono anche contenere icone che rendono l'avatar più facilmente riconoscibile, ad esempio la foto di un ID contatto. Le icone avatar sono di 32 x 32 dp.
Chip compatto
Il componente correlato, CompactChip è una variante del componente Chip, più piccolo ed è progettato per i casi d'uso in cui lo spazio è ridotto.
I chip compatti hanno uno spazio per un'icona e uno spazio per un'etichetta di testo a riga singola. I chip compatti hanno un'area toccabile con un'altezza di 48 dp.
Gerarchia
Usa riempimenti di colore diversi per indicare la gerarchia dei chip. Progetta ogni schermata in modo che contenga un singolo chip in evidenza per l'azione principale.
Elevata enfasi
Utilizza chip con enfasi elevata per le azioni principali nella pagina. Utilizza i colori primari come riempimento per un chip con enfasi elevata.
Enfasi media
Utilizza i chip con enfasi media per le azioni meno importanti delle azioni principali. Utilizzare colori secondari per il riempimento di un chip con enfasi media.
In alternativa, utilizza il componente OutliningChip personalizzato. Il chip con contorno ha uno sfondo trasparente, un tratto di colore della variante principale con un'opacità del 60% e contenuti del colore principale.
Evidenziazione bassa
I chip con enfasi bassa hanno un riempimento trasparente e solo un'etichetta di testo. Utilizza i chip a bassa enfasi per indicare una relazione figlio con un chip principale o secondario.
Dimensioni
Chip predefinito
Icona: 24 dp
Altezza: 52 dp
Chip compatto
Icona: 20 dp
Altezza: 32 dp
Area toccabile: 48 dp
Utilizzo
Guarda esempi di utilizzo dei chip, come i chip standard in Impostazioni e i chip di immagine in un'app per l'allenamento.
Layout adattivi
Comportamento reattivo
I chip si estendono per riempire la larghezza disponibile sugli schermi più grandi.
Icona (24 x 24 dp)
Contenitore (52 x XX dp)
I campioni di contenuti e codice in questa pagina sono soggetti alle licenze descritte nella Licenza per i contenuti. Java e OpenJDK sono marchi o marchi registrati di Oracle e/o delle sue società consociate.
Ultimo aggiornamento 2025-07-27 UTC.
[[["Facile da capire","easyToUnderstand","thumb-up"],["Il problema è stato risolto","solvedMyProblem","thumb-up"],["Altra","otherUp","thumb-up"]],[["Mancano le informazioni di cui ho bisogno","missingTheInformationINeed","thumb-down"],["Troppo complicato/troppi passaggi","tooComplicatedTooManySteps","thumb-down"],["Obsoleti","outOfDate","thumb-down"],["Problema di traduzione","translationIssue","thumb-down"],["Problema relativo a esempi/codice","samplesCodeIssue","thumb-down"],["Altra","otherDown","thumb-down"]],["Ultimo aggiornamento 2025-07-27 UTC."],[],[],null,["# Chips\n\nThe [Chip](/reference/kotlin/androidx/wear/compose/material/package-summary#Chip(kotlin.Function0,androidx.wear.compose.material.ChipColors,androidx.wear.compose.material.ChipBorder,androidx.compose.ui.Modifier,kotlin.Boolean,androidx.compose.foundation.layout.PaddingValues,androidx.compose.ui.graphics.Shape,androidx.compose.foundation.interaction.MutableInteractionSource,androidx.compose.ui.semantics.Role,kotlin.Function1)) component is an interactive element that represents an input, attribute, or action.\n\nLine Recommendations\n--------------------\n\n**Minimum**\n\nPrimary Text \\\u003e 1 Lines \n\nSecondary Label \\\u003e 1 Lines \n\n**Maximum**\n\nPrimary Text \\\u003e 2 Lines \n\nSecondary Label \\\u003e 3 Lines\n\n\u003cbr /\u003e\n\n\u003cbr /\u003e\n\nAnatomy\n-------\n\nChips can contain up to two text labels and an optional icon. At least one text label or an icon must be provided. Chips may truncate text if the text label is too long. The primary label is one line of text if the secondary label is present. The primary label can contain two lines of text if the secondary label is not present. \n\nIf there's only one label, it should be centered. If a secondary label or icon is present, the labels should be left-aligned. \n\n**A. Primary label\nB. Secondary label (optional)\nC. Icon (optional)\nD. Container**\n\n\u003cbr /\u003e\n\n\u003cbr /\u003e\n\n**Chips Gradient**\n------------------\n\n**Standard Chip**\n\nTop/Left = 50% Primary \n\nBottom/Right = 0% Surface \n\n(Gradient overlays on a background of Surface color)\n\n\u003cbr /\u003e\n\n\u003cbr /\u003e\n\n**Image Chip**\n\nTop/Left = 30% Primary \n\n0, 0, 45° (Below Bottom/Right) = 20% On Surface Variant\n\n\u003cbr /\u003e\n\n\u003cbr /\u003e\n\nAlternative Chip types\n----------------------\n\n**Chip with background image**\n\nImage chips contain actions which relate to a chosen image. Image chips work well to communicate a more specific look and feel.\n\nIt is recommended that these Chips should have a fixed height of 52 dp.\n\n\u003cbr /\u003e\n\n\u003cbr /\u003e\n\n**Avatar Chip**\n\nUse avatar chips for actions that are related to a chosen avatar. Avatar chips can also have icons used to make the avatar more easily recognizable, such as a contact ID photo. Avatar icons are 32x32 dp.\n\n\u003cbr /\u003e\n\n\u003cbr /\u003e\n\nRelated components\n------------------\n\n**Compact Chip**\n\nThe related component, CompactChip is a variant of the Chip component that appears smaller and is designed for use cases where there is less space. \n\n\nCompact chips have a slot for an icon and a slot for a single line text label. Compact chips have a tappable area with a height of 48 dp.\n\n\u003cbr /\u003e\n\n\u003cbr /\u003e\n\nHierarchy\n---------\n\nUse different color fills to denote chip hierarchy. Design each screen to contain a single prominent chip for the primary action. \n\n**High emphasis** \n\n\nUse high-emphasis chips for actions that are primary to the page. Use primary colors as the fill of a high emphasis chip. \n\n**Medium emphasis** \n\n\nUse medium emphasis chips for actions that are less important than the primary actions. Use secondary colors for the fill of a medium emphasis chip. \n\n\nAlternatively, use the custom OutlinedChip component. The outlined chip has a transparent background, a primary variant colored stroke of 60% opacity, and primary colored content. \n\n**Low emphasis** \n\n\nLow emphasis chips have a transparent fill and only a text label. Use low emphasis chips to indicate a child relationship to a primary or secondary chip.\n\n\u003cbr /\u003e\n\n\u003cbr /\u003e\n\n### **Sizes**\n\n**Default Chip**\n\nIcon: 24 dp \nHeight: 52 dp \n**Compact Chip**\n\nIcon: 20 dp \nHeight: 32 dp \nTappable Area: 48 dp\n\n\u003cbr /\u003e\n\n\u003cbr /\u003e\n\n### **Usage**\n\nSee examples of chip usage such as standard chips in Settings and image chips in an exercise app.\n\n### **Adaptive layouts**\n\n**Responsive behavior**\n\nChips stretch to fill the available width on larger displays. \n\n\nIcon (24 x 24 dp) \n\nContainer (52 x XX dp)\n\n\u003cbr /\u003e\n\n\u003cbr /\u003e"]]
