Chips
Restez organisé à l'aide des collections
Enregistrez et classez les contenus selon vos préférences.
Le composant Chip est un élément interactif qui représente une entrée, un attribut ou une action.
Recommandations de lignes
Minimum
Texte principal > 1 ligne
Libellé secondaire > 1 ligne
Maximum
Texte principal > 2 lignes
Libellé secondaire > 3 lignes
Anatomie
Les chips peuvent contenir jusqu'à deux libellés de texte et une icône facultative. Vous devez fournir au moins un libellé textuel ou une icône. Les chips peuvent tronquer le texte si le libellé est trop long. Le libellé principal correspond à une ligne de texte si le libellé secondaire est présent. Le libellé principal peut contenir deux lignes de texte si le libellé secondaire n'est pas présent.
S'il n'y a qu'un seul libellé, il doit être centré. Si un libellé secondaire ou une icône sont présents, ils doivent être alignés à gauche.
A. Libellé principal
B. Libellé secondaire (facultatif)
C. Icône (facultatif)
D. Conteneur
Dégradé de chips
Puce standard
Haut/Gauche = 50% du primaire
Bas/Droite = 0% de la surface
(superpositions de dégradé sur un arrière-plan de couleur de surface)
Chip d'image
Haut/Gauche = 30% du primaire
0, 0, 45° (en dessous du bas/de la droite) = 20% sur la variante de surface
Types de chips alternatifs
Chip avec image de fond
Les chips d'image contiennent des actions associées à une image sélectionnée. Les chips d'image sont efficaces pour donner une apparence plus spécifique.
Il est recommandé d'utiliser une hauteur fixe de 52 dp pour ces chips.
Puce d'avatar
Utiliser des chips d'avatar pour des actions associées à un avatar sélectionné. Les chips d'avatar peuvent également avoir des icônes utilisées pour rendre l'avatar plus facilement reconnaissable, comme la photo d'une pièce d'identité. La taille des icônes d'avatar est de 32 x 32 dp.
Chip compact
Le composant associé, CompactChip, est une variante du composant Chip. Plus petit, il est conçu pour les cas d'utilisation où l'espace est limité.
Les chips compacts disposent d'un emplacement pour une icône et d'un emplacement pour un libellé de texte d'une seule ligne. Les chips compacts ont une zone tactile d'une hauteur de 48 dp.
Hiérarchie
Utilisez différents remplissages de couleur pour indiquer la hiérarchie des chips. Concevez chaque écran pour qu'il contienne un seul chip bien visible pour l'action principale.
Forte accentuation
Utilisez des chips à forte intensité pour les actions principales de la page. Utilisez des couleurs primaires pour remplir un chip à forte intensité.
Intensité moyenne
Utilisez des chips d'intensité moyenne pour les actions moins importantes que les actions principales. Utilisez des couleurs secondaires pour remplir un chip d'intensité moyenne.
Vous pouvez également utiliser le composant OutlinedChip personnalisé. Le chip encadré a un arrière-plan transparent, un trait dans la couleur de la variante principale d'une opacité de 60 %, et un contenu dans une couleur primaire.
Faible intensité
Les chips à faible intensité ont un remplissage transparent et seulement un libellé textuel. Utilisez des chips à faible intensité pour indiquer une relation enfant avec un chip principal ou secondaire.
Tailles
Chip par défaut
Icône: 24 dp
Hauteur: 52 dp
Chip compact
Icône: 20 dp
Hauteur: 32 dp
Zone tactile: 48 dp
Utilisation
Découvrez des exemples d'utilisation de chips tels que des chips standards dans les paramètres et des chips d'image dans une application d'exercice.
Mises en page adaptatives
Comportement responsif
Les chips sont étirés pour occuper toute la largeur disponible sur les écrans plus grands.
Icône (24 x 24 dp)
Conteneur (52 x XX dp)
Le contenu et les exemples de code de cette page sont soumis aux licences décrites dans la Licence de contenu. Java et OpenJDK sont des marques ou des marques déposées d'Oracle et/ou de ses sociétés affiliées.
Dernière mise à jour le 2025/07/27 (UTC).
[[["Facile à comprendre","easyToUnderstand","thumb-up"],["J'ai pu résoudre mon problème","solvedMyProblem","thumb-up"],["Autre","otherUp","thumb-up"]],[["Il n'y a pas l'information dont j'ai besoin","missingTheInformationINeed","thumb-down"],["Trop compliqué/Trop d'étapes","tooComplicatedTooManySteps","thumb-down"],["Obsolète","outOfDate","thumb-down"],["Problème de traduction","translationIssue","thumb-down"],["Mauvais exemple/Erreur de code","samplesCodeIssue","thumb-down"],["Autre","otherDown","thumb-down"]],["Dernière mise à jour le 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"]]
