צ'יפס
קל לארגן דפים בעזרת אוספים
אפשר לשמור ולסווג תוכן על סמך ההעדפות שלך.
הרכיב צ'יפ הוא רכיב אינטראקטיבי שמייצג קלט, מאפיין או פעולה.
המלצות לקו
מינימום
טקסט ראשי > שורה אחת
תווית משנית > שורה אחת
מקסימום
טקסט ראשי > 2 שורות
תווית משנית > 3 שורות
אנטומיה
צ'יפים יכולים להכיל עד שתי תוויות טקסט וסמל אופציונלי. צריך לספק לפחות תווית טקסט או סמל אחד. אם תווית הטקסט ארוכה מדי, הטקסט עשוי להיחתך בצ'יפים. התווית הראשית היא שורת טקסט אחת אם התווית המשנית קיימת. התווית הראשית יכולה להכיל שתי שורות טקסט אם התווית המשנית לא מופיעה.
אם יש רק תווית אחת, צריך למרכז אותה. אם יש תווית או סמל משניים, צריך ליישר את התוויות לצד ימין.
א. תווית ראשית
ב. תווית משנית (אופציונלי)
ג. סמל (אופציונלי)
ד. מאגר
הדרגתיות של צ'יפים
צ'יפ רגיל
למעלה/שמאל = 50% ראשי
למטה/ימין = 0% פני
(שכבות-על של גווני-מעבר על רקע בצבע פני)
צ'יפ תמונה
למעלה/שמאל = 30% ראשי
0, 0, 45° (מתחת לחלק התחתון/ימין) = 20% בגרסה של פני השטח
סוגי צ'יפים חלופיים
צ'יפ עם תמונה ברקע
צ'יפים של תמונות מכילים פעולות שקשורות לתמונה שנבחרה. צ'יפים של תמונות מתאימים להעברת מראה וסגנון ספציפיים יותר.
מומלץ שהגובה של הצ'יפים האלה יהיה קבוע, 52dp.
צ'יפ הדמות
משתמשים בצ'יפים של דמויות לפעולות שקשורות לדמות שנבחרה. אפשר גם להוסיף צ'יפים של סמלי דמויות כדי לזהות את הדמות בקלות רבה יותר, כמו תמונה של תעודת מזהים של איש הקשר. סמלי הדמויות הם בגודל 32x32 dp.
צ'יפ קומפקטי
הרכיב הקשור, CompactChip, הוא וריאנט של רכיב Chip שנראה קטן יותר ומותאם לתרחישים לדוגמה שבהם יש פחות מקום.
צ'יפים קומפקטיים כוללים חריץ לסמל וחריץ לתווית טקסט של שורה אחת. לצ'יפים קומפקטיים יש אזור שניתן להקיש עליו בגובה 48dp.
היררכיה
משתמשים במילוי בצבעים שונים כדי לציין את היררכיית הצ'יפים. כדאי לעצב כל מסך כך שיכיל צ'יפ בולט אחד של הפעולה הראשית.
דגש גבוה
כדאי להשתמש בצ'יפים עם דגש גבוה לפעולות שהן העיקריות בדף. מומלץ להשתמש בצבעים ראשיים כמילוי של צ'יפ עם הדגשה חזקה.
הדגשה בינונית
מומלץ להשתמש בצ'יפים עם הדגשה בינונית לפעולות שפחות חשובות מהפעולות הראשיות. מומלץ להשתמש בצבעים משניים למילוי של צ'יפ הדגשה בינוני.
לחלופין, אפשר להשתמש ברכיב OutlinedChip בהתאמה אישית. צ'יפ עם קו מתאר כולל רקע שקוף, קו צבעוני של וריאנט ראשי עם אטימות של 60% ותוכן בצבע ראשי.
הדגשה נמוכה
לצ'יפים עם הדגשה נמוכה יש מילוי שקוף ותווית טקסט בלבד. משתמשים בצ'יפים עם הדגשה נמוכה כדי לציין קשר של צ'יפ צאצא לצ'יפ ראשי או משני.
גדלים
צ'יפ ברירת מחדל
סמל: 24 dp
גובה: 52 dp
צ'יפ קומפקטי
סמל: 20 dp
גובה: 32 dp
אזור שניתן להקשה: 48 dp
שימוש
כאן אפשר לראות דוגמאות לשימוש בשבבים, כמו שבבים רגילים בהגדרות ושבבי תמונות באפליקציית אימון.
פריסות דינמיות
התנהגות תגובה
הצ'יפים נמתחים כדי למלא את הרוחב הזמין במסכים גדולים יותר.
סמל (24 x 24 dp)
מאגר (52 x XX dp)
דוגמאות התוכן והקוד שבדף הזה כפופות לרישיונות המפורטים בקטע רישיון לתוכן. Java ו-OpenJDK הם סימנים מסחריים או סימנים מסחריים רשומים של חברת Oracle ו/או של השותפים העצמאיים שלה.
עדכון אחרון: 2025-07-27 (שעון UTC).
[[["התוכן קל להבנה","easyToUnderstand","thumb-up"],["התוכן עזר לי לפתור בעיה","solvedMyProblem","thumb-up"],["סיבה אחרת","otherUp","thumb-up"]],[["חסרים לי מידע או פרטים","missingTheInformationINeed","thumb-down"],["התוכן מורכב מדי או עם יותר מדי שלבים","tooComplicatedTooManySteps","thumb-down"],["התוכן לא עדכני","outOfDate","thumb-down"],["בעיה בתרגום","translationIssue","thumb-down"],["בעיה בדוגמאות/בקוד","samplesCodeIssue","thumb-down"],["סיבה אחרת","otherDown","thumb-down"]],["עדכון אחרון: 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"]]
