הדפסת כרטיסים
קל לארגן דפים בעזרת אוספים
אפשר לשמור ולסווג תוכן על סמך ההעדפות שלך.
הרכיב כרטיס מכיל תוכן ופעולות לגבי נושא אחד.
אנטומיה
לרכיב כרטיס יש רק חריץ אחד. אפשר להוסיף לכרטיסים סמלים, תמונות או תוויות, והם ניתנים להתאמה אישית.
כברירת מחדל, הכרטיסים הם מלבניים עם קצוות מעוגלים ורקע הדרגתי. כדי לוודא שהכרטיס יוצג במלואו במסך, כדאי להגדיר את הגובה המקסימלי שלו ל-60%. הסיבה לכך היא שבמסכים עגולים יכול להיות חיתוך של עד 20% מהחלק העליון והתחתון של המסך.
כרטיס כותרת
אפשר להשתמש בכרטיסי כותרת כדי להציג מידע באפליקציה, כמו הודעה. לכרטיסי כותרות יש פריסה של שלושה משבצות, שכוללת כותרת, שדה זמן אופציונלי והתוכן הרלוונטי, שהוא תמונה או טקסט.
כרטיס אפליקציה
אתם יכולים להשתמש בכרטיסי אפליקציות כדי להציג רכיבים אינטראקטיביים מכמה אפליקציות. כרטיסי האפליקציות כוללים פריסה של חמישה משבצות, שכוללות את סמל האפליקציה, שם האפליקציה, השעה שבה התרחשה הפעילות, כותרת כלשהי והתוכן הרלוונטי, שהוא תמונה או טקסט.
שינוי הדרגתי של צבעים בכרטיסים
הדרגתיות בכרטיס
למעלה/שמאל + 68dp רווח משמאל = 100% Surface
למטה/ימין = 0% Surface
שכבת-על של כרטיס תמונה
למעלה/שמאל + 56dp רווח פנימי מ-T/L = 100% שטח
למטה/ימין + 24dp רווח פנימי מ-B/R = 0% שטח
(שכבות-על של פס מודגש על רקע תמונה)
גדלים
רוחב הכרטיס
כברירת מחדל, הכרטיסים מוצגים ברוחב המקסימלי של המאגר.
גובה הכרטיס
גובה הכרטיס גמיש. הוא נקבע על סמך התוכן של הרכיבים.
בתצוגות שעון עגולות, כרטיסים שגובהם גבוה מ-60% מגובה המסכים נחתכים.
שימוש
פריסות דינמיות
TitleCard
במסכים גדולים יותר, אנחנו מאפשרים שורה נוספת של טקסט לגוף המודעה. כדי להציג יותר מהתמונה, מוסיפים מרווח מורחב של 24dp בתחתית התמונה.
TitleCard עם תמונה בתוך הטקסט (החלפת מקום הטקסט הראשי)
במסכים גדולים יותר, יחס הגובה-רוחב של התמונה לא משתנה והיא כוללת שוליים בצד שמאל כדי שהגובה של הכרטיס לא יהיה גדול מדי.
כרטיסים עם התאמה אישית נוספת
כרטיס עם רקע של תמונה
כדי ליצור את הפריסה הזו, תצטרכו לבצע התאמה אישית.
בכרטיסי תמונה מוצג תוכן שקשור לנושא אחד עם תמונה ברקע. בכרטיסי תמונות אפשר להציג גם תמונות עצמאיות.
מומלץ להגדיל את המרווח התחתון ל-24dp כדי להציג יותר מתמונת הרקע בלי טקסט מעליו.
דוגמאות התוכן והקוד שבדף הזה כפופות לרישיונות המפורטים בקטע רישיון לתוכן. 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,["# Cards\n\nThe [Card](/reference/kotlin/androidx/wear/compose/material/package-summary#Card(kotlin.Function0,androidx.compose.ui.Modifier,androidx.compose.ui.graphics.painter.Painter,androidx.compose.ui.graphics.Color,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 contains content and actions about a single subject.\n\nAnatomy\n-------\n\nA card component only has a single slot. Cards can contain icons, images or labels, are customizable.\n\nBy default, cards are rectangular with rounded corners and a gradient background. Set the maximum height of your card to 60% to ensure that it's fully displayed on the screen because circular displays can clip up to 20% of the top and bottom of the screen.\n\n\u003cbr /\u003e\n\n\u003cbr /\u003e\n\n**Title Card**\n\nUse [Title cards](/reference/kotlin/androidx/wear/compose/material/package-summary#TitleCard(kotlin.Function0,kotlin.Function1,androidx.compose.ui.Modifier,kotlin.Boolean,kotlin.Function1,androidx.compose.ui.graphics.painter.Painter,androidx.compose.ui.graphics.Color,androidx.compose.ui.graphics.Color,androidx.compose.ui.graphics.Color,kotlin.Function1)) to show information within an application, such as a message. Title cards have a three-slot layout which includes a title, an optional time field, and the relevant content, which is either an image or text. \n**App Card**\n\nUse [App cards](/reference/kotlin/androidx/wear/compose/material/package-summary#AppCard(kotlin.Function0,kotlin.Function1,kotlin.Function1,kotlin.Function1,androidx.compose.ui.Modifier,kotlin.Boolean,kotlin.Function1,androidx.compose.ui.graphics.painter.Painter,androidx.compose.ui.graphics.Color,androidx.compose.ui.graphics.Color,androidx.compose.ui.graphics.Color,androidx.compose.ui.graphics.Color,kotlin.Function1)) to show interactive elements from multiple applications. App cards have a five-slot layout that includes an application icon, the application name, the time that the activity occurred, a title of some sort and the relevant content, which is either an image or text.\n\n\u003cbr /\u003e\n\n\u003cbr /\u003e\n\nCards gradient\n--------------\n\n**Card Gradient**\n\nTop/Left + 68dp padding from Left = 100% Surface \n\nBottom/Right = 0% Surface\n\n\u003cbr /\u003e\n\n\u003cbr /\u003e\n\n**Image Card Overlay**\n\nTop/Left + 56 dp padding from T/L = 100% Surface \n\nBottom/Right + 24 dp padding from B/R = 0% Surface \n\n(Gradient overlays on a image background)\n\n\u003cbr /\u003e\n\n\u003cbr /\u003e\n\nSizes\n-----\n\n**Card width**\n\nCards default to the maximum width of the container.\n\n\u003cbr /\u003e\n\n**Card height**\n\n\u003cbr /\u003e\n\nCard height is flexible. It is determined by the components' content.\n\nOn round watch faces, cards that are taller than 60% of the height of the screens are clipped.\n\n\u003cbr /\u003e\n\n\u003cbr /\u003e\n\nUsage\n-----\n\nAdaptive layouts\n----------------\n\n**TitleCard**\n\nOn larger screens we allow an extra line of text for body copy. And in order to display more of the image, add an enlarged 24 dp padding at the bottom.\n\n**TitleCard with in-line image (replacing the body copy slot)**\n\nOn larger screens, the image doesn't change its aspect ratio and has the padding on the right in order to not make the height of the card too big.\n\n### Cards with additional customization\n\n**Card with an image background** \nIn order to achieve this layout you will need customization. \n\n\nImage cards display content relating to a single topic with a background image. Image cards can also display standalone images. \n\n\nIt is recommended that the bottom padding is increased to 24 dp in order to display more of the background image without text over it.\n\n\u003cbr /\u003e\n\n\u003cbr /\u003e"]]
