Çipler
Koleksiyonlar ile düzeninizi koruyun
İçeriği tercihlerinize göre kaydedin ve kategorilere ayırın.
Çip bileşeni; bir girişi, özelliği veya işlemi temsil eden etkileşimli bir öğedir.
Satır Önerileri
Minimum
Birincil Metin > 1 Satır
İkincil Etiket > 1 Satır
Maksimum
Birincil Metin > 2 Satır
İkincil Etiket > 3 Satır
Anatomi
Çipler en fazla iki metin etiketi ve isteğe bağlı bir simge içerebilir. En az bir metin etiketi veya simge sağlanmalıdır. Metin etiketi çok uzunsa çipler metni kesebilir. İkincil etiket varsa birincil etiket tek satırdan oluşur. İkincil etiket yoksa birincil etiket iki satırdan oluşabilir.
Yalnızca tek bir etiket varsa bu etiket ortalanmalıdır. İkincil bir etiket veya simge varsa etiketler sola hizalanmalıdır.
A. Birincil etiket
B. İkincil etiket (isteğe bağlı)
C. Simge (isteğe bağlı)
D. Kapsayıcı
Çipler Gradyanı
Standart Çip
Üst/Sol =% 50 Birincil
Alt/Sağ =% 0 Yüzey
(Yüzey rengi arka planında gradyan yer paylaşımları)
Resim çipi
Üst/Sol =% 30 Birincil
0, 0, 45° (Alt/Sağ Altta) = Yüzey Varyantında% 20
Alternatif çip türleri
Arka plan resmi olan çip
Resim çipleri, seçilen resimle ilgili işlemler içerir. Resim çipleri, görünümü ve tarzı daha net bir şekilde ifade etmek için idealdir.
Bu çiplerin sabit yüksekliğinin 52 dp olması önerilir.
Avatar Çipi
Seçili bir avatarla ilgili işlemler için avatar çipleri kullanın. Avatar çiplerinde, avatarın daha kolay tanınabilmesi için kişi kimliği fotoğrafı gibi simgeler de yer alabilir. Avatar simgeleri 32x32 dp'dir.
Kompakt Çip
İlgili bileşen olan CompactChip'teki Çip bileşeni, daha küçük görünen ve daha az alanın olduğu kullanım alanları için tasarlanmış olan bir varyanttır.
Kompakt çiplerde simge ve tek satırlık metin etiketi için bir alan bulunur. Kompakt çiplerin dokunulabilir alanı 48 dp yüksekliğindedir.
Hiyerarşi
Çip hiyerarşisini belirtmek için farklı renk dolguları kullanın. Her ekranı, birincil işlem için tek bir belirgin çip içerecek şekilde tasarlayın.
Yüksek vurgu
Sayfada öncelikli olan işlemler için yüksek vurgu çipleri kullanın. Yüksek vurgulu çiplerin dolgusu olarak birincil renkleri kullanın.
Orta vurgu
Birincil işlemlerden daha az önemli olan işlemler için orta vurgu çipleri kullanın. Orta vurgu çipinin dolgusu için ikincil renkler kullan.
Alternatif olarak, özel OutLineChip bileşenini de kullanabilirsiniz. Dış çizgili çipin şeffaf arka planı, %60 opaklığa sahip birincil varyant rengi ve birincil renkli içeriği vardır.
Az vurgu
Düşük vurgulu çiplerde şeffaf dolgu bulunur ve yalnızca metin etiketi vardır. Birincil veya ikincil çiple çocuk ilişkisini belirtmek için düşük vurgu çipleri kullanın.
Boyutlar
Varsayılan Çip
Simge: 24 dp
Yükseklik: 52 dp
Kompakt Çip
Simge: 20 dp
Yükseklik: 32 dp
Dokunulabilir Alan: 48 dp
Kullanım
Ayarlar'da standart çipler ve egzersiz uygulamalarındaki resim çipleri gibi çip kullanım örneklerine göz atın.
Uyarlanabilir düzenler
Duyarlı davranış
Çipler, daha büyük ekranlarda mevcut genişliği doldurmak için uzatılır.
Simge (24 x 24 dp)
Kapsayıcı (52 x XX dp)
Bu sayfadaki içerik ve kod örnekleri, İçerik Lisansı sayfasında açıklanan lisanslara tabidir. Java ve OpenJDK, Oracle ve/veya satış ortaklarının tescilli ticari markasıdır.
Son güncelleme tarihi: 2025-07-27 UTC.
[[["Anlaması kolay","easyToUnderstand","thumb-up"],["Sorunumu çözdü","solvedMyProblem","thumb-up"],["Diğer","otherUp","thumb-up"]],[["İhtiyacım olan bilgiler yok","missingTheInformationINeed","thumb-down"],["Çok karmaşık / çok fazla adım var","tooComplicatedTooManySteps","thumb-down"],["Güncel değil","outOfDate","thumb-down"],["Çeviri sorunu","translationIssue","thumb-down"],["Örnek veya kod sorunu","samplesCodeIssue","thumb-down"],["Diğer","otherDown","thumb-down"]],["Son güncelleme tarihi: 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"]]
