الأزرار
تنظيم صفحاتك في مجموعات
يمكنك حفظ المحتوى وتصنيفه حسب إعداداتك المفضّلة.
استخدِم مكوّن زر للإجراءات التي يفهمها المستخدمون جيدًا ولا تحتاج إلى تصنيف نصي. تتميز الأزرار عن الشرائح بشكلها الدائري.
علم التشريح
(أ). المحتوى
تحتوي الأزرار على خانة واحدة مخصّصة لرمز أو نص. اختَر رمزًا ذا صلة بالإجراء الذي يؤديه الزر. يمكنك استخدام نص يتألّف من ثلاثة أحرف كحدّ أقصى إذا لم يكن بإمكان الرمز وصف الإجراء ذي الصلة. ننصحك باستخدام مكوّن شريحة إذا لم يكن بإمكان الرمز وصف الإجراء بوضوح.
(ب). الحاوية
تقتصر حاويات الأزرار على تعبئة لون واحد ممزوج.
الأزرار المكثّفة
تظهر الأزرار المكثفة أصغر حجمًا، ولكنّها توفّر مساحة أكبر يمكن النقر عليها. تكون المساحة التلقائية التي يمكن النقر عليها 48×48 dp.
تسلسل هرمي
استخدِم ألوانًا مختلفة لملء الأزرار للإشارة إلى التسلسل الهرمي للزر.
تركيز عالٍ
تحتوي الأزرار التي تُبرز المحتوى على إجراءات أساسية للتطبيق. بالنسبة إلى الأزرار التي تُبرز المحتوى، استخدِم الألوان الأساسية أو الثانوية للحاوية والألوان "مفعَّل" و"غير مفعَّل" للمحتوى. لمزيد من المعلومات، يُرجى الاطّلاع على استخدام مظاهر Material Design على Wear OS.
إبراز متوسط
تتميز الأزرار ذات التأكيد المتوسط بملء لون أقل تباينًا. وتحتوي على إجراءات أقل أهمية من الإجراءات الأساسية. استخدِم لون السطح للحاوية ولون "على السطح" للمحتوى.
بدلاً من ذلك، استخدِم المكوّن المخصّص 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)
ننصحك بإضافة مساحة إضافية حول هذا الزرّ لإنشاء هدف لمس بحجم 48 dp على الأقل. هذا هو الحد الأدنى لحجم هدف النقر من أجل تسهيل الاستخدام.
الاستخدام
استخدِم الأزرار العادية لتمكين المستخدم من اتّخاذ إجراء واحد، مثل قبول مكالمة أو رفضها أو بدء موقّت.
استخدِم أزرار الإيقاف/التفعيل للسماح للمستخدم بتفعيل خيار أو إيقافه، مثل اختيار أيام الأسبوع وإلغاء اختيارها أو إيقاف مؤقت ومُجدوَل لوقت معيّن وإعادة تشغيله.
التنسيقات التكيُّفية
السلوك الاستباقي
زر واحد
سيظلّ الحشو الداخلي كما هو، ويجب أن تكون الهوامش نسبًا مئوية لمنع تمديد الأزرار أكثر من اللازم والحفاظ على حجم نسبي.
زرَّان
عندما يكون هناك زران، تتم إضافة الهوامش الداخلية كنسبة مئوية لمنع تمديد الأزرار أكثر من اللازم والحفاظ على حجم نسبي.
برامج معالجة النصوص (IME)
زر واحد أو زران
تمتد تطبيقات IME التي تتضمّن زرَّين أو زرًا واحدًا لتأمين الشاشة دائمًا إلى الهوامش الجانبية بغض النظر عن حجم الشاشة.
3 أزرار
على الشاشات التي يقلّ قطرها عن 225 dp، تظل الأزرار دائرية ولا يتم تمديدها. على الشاشات الأكبر حجمًا، التي تبلغ دقتها 225 dp أو أكثر، يتم تمديد الأزرار إلى الحواف الجانبية.
يخضع كل من المحتوى وعيّنات التعليمات البرمجية في هذه الصفحة للتراخيص الموضحّة في ترخيص استخدام المحتوى. إنّ Java وOpenJDK هما علامتان تجاريتان مسجَّلتان لشركة Oracle و/أو الشركات التابعة لها.
تاريخ التعديل الأخير: 2025-07-27 (حسب التوقيت العالمي المتفَّق عليه)
[[["يسهُل فهم المحتوى.","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 (حسب التوقيت العالمي المتفَّق عليه)"],[],[],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."]]
