Chips
Mit Sammlungen den Überblick behalten
Sie können Inhalte basierend auf Ihren Einstellungen speichern und kategorisieren.
Die Chip-Komponente ist ein interaktives Element, das eine Eingabe, ein Attribut oder eine Aktion darstellt.
Linienempfehlungen
Minimum
Primärer Text > 1 Zeile
Sekundäres Label > 1 Zeile
Maximal
Primärer Text > 2 Zeilen
Sekundäres Label > 3 Zeilen
Anatomie
Chips können bis zu zwei Textbeschriftungen und ein optionales Symbol enthalten. Es muss mindestens eine Textbeschriftung oder ein Symbol angegeben werden. Chips schneiden Text möglicherweise ab, wenn die Textbeschriftung zu lang ist. Das primäre Label ist eine Textzeile, wenn das sekundäre Label vorhanden ist. Das primäre Label kann zwei Textzeilen enthalten, wenn das sekundäre Label nicht vorhanden ist.
Wenn nur ein Label vorhanden ist, sollte es zentriert werden. Wenn ein sekundäres Label oder Symbol vorhanden ist, sollten die Labels linksbündig ausgerichtet sein.
A. Primäres Label
B. Sekundäres Label (optional)
C. Symbol (optional)
D. Container
Chips-Farbverlauf
Standardchip
Oben/links = 50% primär
Unten/rechts = 0% Oberfläche
(Farbverlauf-Overlays auf einem Hintergrund in einer Oberflächenfarbe)
Bild-Chip
Oben/Links = 30% primär
0, 0, 45° (Unterhalb unten/rechts) = 20% auf der Oberfläche
Alternative Chiptypen
Chip mit Hintergrundbild
Bild-Chips enthalten Aktionen, die sich auf ein ausgewähltes Bild beziehen. Bildchips vermitteln ein konkreteres Erscheinungsbild.
Diese Chips sollten eine feste Höhe von 52 dp haben.
Avatar-Chip
Avatar-Chips für Aktionen verwenden, die mit einem ausgewählten Avatar zusammenhängen. Avatar-Chips können auch Symbole enthalten, mit denen der Avatar leichter zu erkennen ist, z. B. ein Foto einer Kontakt-ID. Avatarsymbole haben eine Größe von 32 x 32 dp.
Kompakter Chip
Die zugehörige Komponente, „CompactChip“, ist eine Variante der Chip-Komponente, die kleiner aussieht und für Anwendungsfälle mit weniger Platz entwickelt wurde.
Kompakte Chips haben einen Platz für ein Symbol und einen Slot für ein einzeiliges Textlabel. Kompakte Chips haben einen antippbaren Bereich mit einer Höhe von 48 dp.
Hierarchiediagramm
Verwenden Sie Füllfarben in verschiedenen Farben, um die Chiphierarchie darzustellen. Jeder Bildschirm sollte einen einzelnen gut sichtbaren Chip für die primäre Aktion enthalten.
Stark betont
Verwenden Sie Chips mit hoher Betonung für Aktionen, die primär für die Seite sind. Verwenden Sie Primärfarben als Füllung eines Chips mit hoher Betonung.
Mittlere Betonung
Verwenden Sie Chips mit mittlerer Betonung für Aktionen, die weniger wichtig als die primären Aktionen sind. Verwenden Sie Sekundärfarben für die Füllung eines Chips mit mittlerer Betonung.
Alternativ können Sie die benutzerdefinierte OutlinedChip-Komponente verwenden. Der umrissene Chip hat einen transparenten Hintergrund, einen primären Farbstrich mit einer Deckkraft von 60% und primärfarbige Inhalte.
Geringe Hervorhebung
Chips mit geringer Hervorhebung haben eine transparente Füllung und nur ein Textlabel. Verwenden Sie Chips mit niedriger Hervorhebung, um auf eine Beziehung zwischen Kindern und einem primären oder sekundären Chip hinzuweisen.
Größen
Standard-Chip
Symbol: 24 dp
Höhe: 52 dp
Kompakter Chip
Symbol: 20 dp
Höhe: 32 dp
Anpassbarer Bereich: 48 dp
Verwendung
Beispiele für die Nutzung von Chips wie Standardchips in den Einstellungen und Bildchips in einer Trainings-App.
Adaptive Layouts
Responsives Verhalten
Auf größeren Displays werden die Chips so dehnt, dass sie die verfügbare Breite ausfüllen.
Symbol (24 × 24 dp)
Container (52 × XX dp)
Alle Inhalte und Codebeispiele auf dieser Seite unterliegen den Lizenzen wie im Abschnitt Inhaltslizenz beschrieben. Java und OpenJDK sind Marken oder eingetragene Marken von Oracle und/oder seinen Tochtergesellschaften.
Zuletzt aktualisiert: 2025-07-27 (UTC).
[[["Leicht verständlich","easyToUnderstand","thumb-up"],["Mein Problem wurde gelöst","solvedMyProblem","thumb-up"],["Sonstiges","otherUp","thumb-up"]],[["Benötigte Informationen nicht gefunden","missingTheInformationINeed","thumb-down"],["Zu umständlich/zu viele Schritte","tooComplicatedTooManySteps","thumb-down"],["Nicht mehr aktuell","outOfDate","thumb-down"],["Problem mit der Übersetzung","translationIssue","thumb-down"],["Problem mit Beispielen/Code","samplesCodeIssue","thumb-down"],["Sonstiges","otherDown","thumb-down"]],["Zuletzt aktualisiert: 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"]]
