לחצנים
קל לארגן דפים בעזרת אוספים
אפשר לשמור ולסווג תוכן על סמך ההעדפות שלך.
משתמשים ברכיב לחצן לפעולות שהמשתמשים מבינים היטב ולא צריך להוסיף להן תווית טקסט. הלחצנים נבדלים מהצ'יפים בכך שהם עגולים.
אנטומיה
א. תוכן
לכפתורים יש חריץ אחד שמוגדר לשימוש בסמל או בטקסט. בוחרים סמל שרלוונטי לפעולה שהלחצן מבצע. אם אי אפשר לתאר את הפעולה הרלוונטית באמצעות סמל, אפשר להשתמש בטקסט של עד שלושה תווים. כדאי להשתמש ברכיב צ'יפ אם אי אפשר לתאר בבירור את הפעולה באמצעות סמל
ב. מאגר
קונטיינרים של לחצנים מוגבלים למילוי בצבע אחיד אחד.
לחצנים קומפקטיים
לחצנים קומפקטיים נראים קטנים יותר, אבל יש להם אזור גדול יותר שניתן להקיש עליו. ברירת המחדל של אזור הקשה היא 48x48 dp.
היררכיה
כדאי להשתמש במילוי בצבעים שונים כדי לציין את היררכיית הלחצנים.
דגש גבוה
לחצנים עם הדגשה חזקה מכילים פעולות שהן עיקריות לאפליקציה. לחצנים עם הדגשה חזקה צריכים להיות בצבע ראשי או משני למארז, ובצבע ראשי או משני לתוכן. מידע נוסף זמין במאמר עיצוב לפי נושאים ב-Material Design ל-Wear.
דגש בינוני
כפתורים עם הדגשה ברמה בינונית נבדלים על ידי מילוי בצבע פחות מנוגד. הם מכילים פעולות שפחות חשובות מהפעולות הראשיות. משתמשים בצבע 'פני השטח' למאגר ובצבע 'בפני השטח' לתוכן.
לחלופין, אפשר להשתמש ברכיב המותאם אישית OutlinedButton כדי ליצור לחצן הדגשה ברמה בינונית. הוא כולל רקע שקוף, קו בצבע של וריאנט ראשי בשקיפות של 60% ותוכן בצבע ראשי.
דגש נמוך (סמל בלבד)
כפתורים עם דגש נמוך נבדלים בכך שאין להם מילוי. הן מתאימות במיוחד לאזורים קטנים יותר בתצוגת השעון שבהם צריך סידור קומפקטי. משתמשים בצבע 'בממשק' לתוכן.
גדלים
אפשר להשתמש בכפתורים בגדלים שונים כדי להדגיש פעולות או להפחית את הדגשתן.
גדול
סמל (30 x 30 dp)
מאגר (60 x 60 dp)
ברירת מחדל
סמל (26 x 26 dp)
מאגר (52 x 52 dp)
קטן
סמל (24 x 24 dp)
קונטיינר (48 x 48 dp)
אקסטרה-סמול
סמל (24 x 24 dp)
מאגר (32 x 32 dp)
מומלץ להוסיף עוד רווח מסביב לכפתור הזה כדי ליצור יעד הקשה בגודל של לפחות 48dp. זהו הגודל המינימלי של יעד ההקשה שלנו לשם נגישות.
שימוש
כדאי להשתמש בלחצנים רגילים כדי לאפשר למשתמש לבצע פעולה אחת, כמו קבלה או דחייה של שיחה או הפעלת טיימר.
אפשר להשתמש בלחצני החלפת מצב כדי לאפשר למשתמש להפעיל או להשבית אפשרות, למשל לבחור ימים בשבוע ולהסיר את הבחירה שלהם, או להשהות ולחדש את הטיימר.
פריסות דינמיות
התנהגות תגובה
לחצן אחד
המילוי הפנימי יישאר ללא שינוי, והשוליים צריכים להיות בפרמטרים של אחוזים כדי למנוע מתיחה מוגזמת של הלחצנים ולשמור על גודל יחסי.
2 לחצנים
כשיש 2 לחצנים, מתווספים שוליים פנימיים באחוזים כדי למנוע מתיחה מוגזמת של הלחצנים ולשמור על גודל יחסי.
IME
1 או 2 כפתורים
IME עם 2 לחצנים נעולים או עם לחצן נעול אחד תמיד נמתחים עד לשוליים הצדדיים, ללא קשר לגודל המסך.
3 לחצנים
במסכים קטנים מ-225dp, הלחצנים נשארים עגולים ולא נמתחים. במסכים גדולים יותר, בגודל 225dp או יותר, הלחצנים נמתחים עד לשוליים הצדדיים.
דוגמאות התוכן והקוד שבדף הזה כפופות לרישיונות המפורטים בקטע רישיון לתוכן. 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,["# Buttons\n\nUse a [Button](/reference/kotlin/androidx/wear/compose/material/package-summary#Button(kotlin.Function0,androidx.compose.ui.Modifier,kotlin.Boolean,androidx.wear.compose.material.ButtonColors,androidx.compose.foundation.interaction.MutableInteractionSource,androidx.compose.ui.graphics.Shape,androidx.wear.compose.material.ButtonBorder,kotlin.Function1)) component for actions that are well understood by users and don't need a text label. Buttons are distinguished from chips by their circular shape.\n\nAnatomy\n-------\n\n\n**A. Content**\n\nButtons have a single slot reserved for an icon or text. Choose an icon that is relevant to the action the button performs. You can use text with a maximum of three characters if an icon is unable to describe the relevant action. Consider the use of a Chip component if an icon cannot clearly describe the action\n\n**B. Container**\n\nButton containers are limited to a single solid color fill.\n\n\u003cbr /\u003e\n\n\u003cbr /\u003e\n\nButton types\n------------\n\n\n**Toggle buttons**\n\n[Toggle buttons](/reference/kotlin/androidx/wear/compose/material/package-summary#ToggleButton(kotlin.Boolean,kotlin.Function1,androidx.compose.ui.Modifier,kotlin.Boolean,androidx.wear.compose.material.ToggleButtonColors,androidx.compose.foundation.interaction.MutableInteractionSource,kotlin.Function1)) enable users to toggle between two states. \n\n**Compact buttons**\n\n[Compact buttons](/reference/kotlin/androidx/wear/compose/material/package-summary#CompactButton(kotlin.Function0,androidx.compose.ui.Modifier,kotlin.Boolean,androidx.wear.compose.material.ButtonColors,androidx.compose.ui.unit.Dp,androidx.compose.foundation.interaction.MutableInteractionSource,kotlin.Function1)) appear smaller but have a larger tappable area. The default tappable area is 48x48 dp.\n\n\u003cbr /\u003e\n\nHierarchy\n---------\n\n\nUse different color fills to denote button hierarchy.\n\n**High emphasis**\n\nHigh emphasis buttons contain actions that are primary to the app. For high emphasis buttons use Primary or Secondary colors for the container and On Primary and On Secondary colors for the content. For more information see [Wear Material Theming](/training/wearables/design/theme).\n\n**Medium emphasis**\n\nMedium emphasis buttons are distinguished by a less contrasting color fill. They contain actions that are less important than the primary actions. Use the Surface color for the container and the On Surface color for the content.\n\nAlternatively, use the custom [OutlinedButton](/reference/kotlin/androidx/wear/compose/material/package-summary#OutlinedButton(kotlin.Function0,androidx.compose.ui.Modifier,kotlin.Boolean,androidx.wear.compose.material.ButtonColors,androidx.compose.foundation.interaction.MutableInteractionSource,androidx.compose.ui.graphics.Shape,androidx.wear.compose.material.ButtonBorder,kotlin.Function1)) component for a medium emphasis button. This has a transparent background, a primary variant colored stroke of 60% opacity, and primary colored content.\n**Low emphasis (icon only)**\n\n\u003cbr /\u003e\n\nLow emphasis buttons are distinguished by having no fill. They are best suited for smaller areas on the watch face where a compact arrangement is needed. Use the On Surface colour for the content.\n\n\u003cbr /\u003e\n\n\u003cbr /\u003e\n\nSizes\n-----\n\nUse buttons of different sizes to emphasize or de-emphasize actions.\n\n\n**Large**\n\nIcon (30 x 30 dp) \nContainer (60 x 60 dp) \n\n**Default**\n\nIcon (26 x 26 dp) \nContainer (52 x 52 dp)\n\n\u003cbr /\u003e\n\n\n**Small**\n\nIcon (24 x 24 dp) \nContainer (48 x 48 dp) \n\n**Extra Small**\n\nIcon (24 x 24 dp) \nContainer (32 x 32 dp)\n\n\nIt's recommended to add additional padding around this button to create a tap target of at least 48 dp. This is our minimum tap target size for accessibility.\n\n\u003cbr /\u003e\n\nUsage\n-----\n\nUse standard buttons to enable the user to take a single action such as accepting or declining a call, or starting a timer.\n\nUse toggle buttons to allow the user to turn an option on or off, such as selecting and deselecting days of the week or pausing and restarting a timer.\n\nAdaptive layouts\n----------------\n\n### **Responsive behavior**\n\n\n**1 button**\n\nThe internal padding will remain the same, and the margins should be percentages in order to stop the buttons from stretching too far, and keeping a relative size. \n\n**2 buttons**\n\nWhen there are 2 buttons, percentage internal margins are added in order to stop the buttons from stretching too far, and keeping a relative size.\n\n\u003cbr /\u003e\n\n### **IMEs**\n\n**1 or 2 Buttons**\n\nIMEs with 2 or a single button lockup always stretch all the way to the side margins regardless of screen size.\n\n**3 Buttons**\n\nOn screens smaller than 225 dp, the buttons remain circular and do not stretch. On larger screens, 225 dp or larger, the buttons stretch all the way to the side margins."]]
