Chipsy
Zadbaj o dobrą organizację dzięki kolekcji
Zapisuj i kategoryzuj treści zgodnie ze swoimi preferencjami.
Komponent Element to interaktywny element, który reprezentuje dane wejściowe, atrybut lub działanie.
Rekomendacje dotyczące wierszy
Minimalne
Tekst główny > 1 wiersz
Etykieta dodatkowa > 1 wiersz
Maksimum
Tekst główny > 2 wiersze
Etykieta dodatkowa > 3 wiersze
Anatomia
Elementy mogą zawierać maksymalnie 2 etykiety tekstowe i opcjonalną ikonę. Należy podać co najmniej jedną etykietę tekstową lub jedną ikonę. Elementy mogą skrócić tekst, jeśli etykieta tekstowa będzie zbyt długa. Jeśli występuje etykieta dodatkowa, etykieta podstawowa to jeden wiersz tekstu. Jeśli nie ma etykiety dodatkowej, etykieta podstawowa może zawierać 2 wiersze tekstu.
Jeśli jest tylko jedna etykieta, powinna być wyśrodkowana. Jeśli widoczna jest etykieta lub ikona dodatkowa, etykiety powinny być wyrównane do lewej.
A. Etykieta podstawowa.
B. Etykieta dodatkowa (opcjonalna)
C. Ikona (opcjonalna)
D. kontener
Gradient elementu
Element standardowy
Góra/lewa = 50% główna
dół/prawo = 0% powierzchni
(nakładki gradientu na tle w kolorze powierzchni)
Element obrazu
Góra/lewa = 30% wartości podstawowej
0, 0, 45° (u dołu/prawej strony) = 20% na powierzchni
Alternatywne typy elementów
Element z obrazem tła
Elementy graficzne zawierają działania, które są powiązane z wybranym obrazem. Elementy obrazu dobrze nadają się do przekazywania bardziej szczegółowego wyglądu i stylu.
Zalecamy, aby te elementy miały stałą wysokość 52 dp.
Element awatara
Używaj elementów awatara do wykonywania działań związanych z wybranym awatarem. Elementy awatara mogą też zawierać ikony, które zwiększają rozpoznawalność awatara, na przykład zdjęcie identyfikatora kontaktu. Ikony awatara mają wymiary 32 x 32 dp.
Układ kompaktowy
Powiązany komponent, CompactChip, to wariant komponentu układu, który wydaje się mniejszy i został zaprojektowany z myślą o mniejszych zastosowaniach.
Elementy kompaktowe mają miejsce na ikonę oraz boks na etykietę tekstową z jednym wierszem. Kompaktowe elementy mają obszar do kliknięcia o wysokości 48 dp.
Hierarchia
Używaj różnych wypełnienia kolorami, aby określić hierarchię elementów. Zaprojektuj każdy ekran tak, aby zawierał 1 widoczny element odpowiadający głównemu działaniu.
Wysoka koncentracja
Elementów wyróżniających należy używać w przypadku działań podstawowych na stronie. Używaj kolorów podstawowych jako wypełnienia elementu o wysokim stopniu podkreślenia.
Średnie wyróżnienie
Elementy ze średnim wyróżnieniem używaj w przypadku działań, które są mniej ważne niż działania główne. Używaj kolorów dodatkowych do wypełnienia elementu o średnim stopniu podkreślenia.
Możesz też użyć niestandardowego komponentu OutlinedChip. Element z obrysem ma przezroczyste tło, kolor podstawowy wariantu o przezroczystości 60% i treści w kolorze głównym.
Niska wyróżnienie
Elementy z niskim wyróżnieniem mają przezroczyste wypełnienie i tylko etykietę tekstową. Używaj elementów o niskim stopniu podkreślenia, aby wskazać relację podrzędną z elementem głównym lub dodatkowym.
Rozmiary
Element domyślny
Ikona: 24 dp
Wysokość: 52 dp
Układ kompaktowy
Ikona: 20 dp
Wysokość: 32 dp
Obszar dotknięty: 48 dp
Wykorzystanie
Zobacz przykłady wykorzystania elementów, takich jak elementy standardowe w Ustawieniach, a także elementy graficzne w aplikacji do ćwiczeń.
Adaptacyjne układy
Działanie responsywne
Elementy rozciągają się, aby wypełnić dostępną szerokość na większych ekranach.
Ikona (24 x 24 dp)
Kontener (52 x XX dp)
Treść strony i umieszczone na niej fragmenty kodu podlegają licencjom opisanym w Licencji na treści. Java i OpenJDK są znakami towarowymi lub zastrzeżonymi znakami towarowymi należącymi do firmy Oracle lub jej podmiotów stowarzyszonych.
Ostatnia aktualizacja: 2025-07-27 UTC.
[[["Łatwo zrozumieć","easyToUnderstand","thumb-up"],["Rozwiązało to mój problem","solvedMyProblem","thumb-up"],["Inne","otherUp","thumb-up"]],[["Brak potrzebnych mi informacji","missingTheInformationINeed","thumb-down"],["Zbyt skomplikowane / zbyt wiele czynności do wykonania","tooComplicatedTooManySteps","thumb-down"],["Nieaktualne treści","outOfDate","thumb-down"],["Problem z tłumaczeniem","translationIssue","thumb-down"],["Problem z przykładami/kodem","samplesCodeIssue","thumb-down"],["Inne","otherDown","thumb-down"]],["Ostatnia aktualizacja: 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"]]
