الشرائح
تنظيم صفحاتك في مجموعات
يمكنك حفظ المحتوى وتصنيفه حسب إعداداتك المفضّلة.
المكوِّن الشريحة هو عنصر تفاعلي يمثل إدخالاً أو سمة أو إجراءً.
اقتراحات الأسطر
الحدّ الأدنى
النص الأساسي > سطر واحد
التصنيف الثانوي > سطر واحد
الحدّ الأقصى
النص الأساسي > سطران
التصنيف الثانوي > 3 أسطر
علم التشريح
يمكن أن تحتوي الشرائح على تصنيفَين نصيَين ورمز اختياري. يجب تقديم تصنيف نصي واحد أو رمز واحد على الأقل. قد تقتطع الشرائح النص إذا كان تصنيف النص طويلاً جدًا. التسمية الأساسية عبارة عن سطر واحد من النص إذا كانت التسمية الثانوية موجودة. يمكن أن يحتوي التصنيف الأساسي على سطرَين من النص في حال عدم توفّر التصنيف الثانوي.
إذا كان هناك تصنيف واحد فقط، يجب توسيطه. في حال وجود تصنيف أو رمز ثانوي، يجب محاذاة التصنيفات إلى اليسار.
أ- تصنيف أساسي
ب. التصنيف الثانوي (اختياري)
ج- الرمز (اختياري)
د. الحاوية
تدرج الشرائح
شريحة عادية
أعلى/يسار = 50% أساسي
أسفل/يمين = 0% سطح
(تراكبات متدرجة على خلفية لون السطح)
شريحة الصور
أعلى/يسار = 30% أساسي
0، 0، 45 درجة (أسفل الأسفل/اليمين) = 20% على صيغة السطح
أنواع الشرائح البديلة
شريحة مع صورة خلفية
تحتوي شرائح الصور على إجراءات ذات صلة بصورة مختارة. تعمل شرائح الصور بشكل جيد لتوفير مظهر أكثر تحديدًا وطابعًا معيّنًا.
ويُنصح بأن يكون ارتفاع هذه الشرائح ثابتًا يبلغ 52 بكسل مستقل الكثافة.
شريحة الصور الرمزية
يمكنك استخدام شرائح الصور الرمزية لتنفيذ الإجراءات المرتبطة بصورة رمزية مختارة. يمكن أن تحتوي شرائح الصور الرمزية أيضًا على رموز تُستخدم لتسهيل التعرّف على الصورة الرمزية، مثل صورة معرّف جهة الاتصال. حجم رموز الصور الرمزية هو 32x32 بكسل مستقل الكثافة.
شريحة مضغوطة
المكوّن ذو الصلة، وهو CompactChip هي أحد الأشكال المختلفة لمكوّن الشريحة، وهي مصمَّمة لتناسب حالات الاستخدام التي تقل فيها المساحة.
تحتوي الشرائح الصغيرة على فتحة لرمز، وخانة لتصنيف النص من سطر واحد. تحتوي الشرائح الصغيرة على مساحة قابلة للنقر يبلغ ارتفاعها 48 بكسل مستقل الكثافة.
تسلسل هرمي
استخدام تعبئة ألوان مختلفة للإشارة إلى التدرّج الهرمي للشرائح صمِّم كل شاشة لتحتوي على شريحة بارزة واحدة للإجراء الأساسي.
التوكيد العالي
استخدِم الشرائح عالية التوكيد للإجراءات الأساسية في الصفحة. استخدِم الألوان الأساسية كتعبئة لشريحة تركيز عالٍ.
تركيز متوسط
استخدِم شرائح التوكيد المتوسط للإجراءات الأقل أهمية من الإجراءات الأساسية. استخدام ألوان ثانوية لملء شريحة تركيز متوسط.
بدلاً من ذلك، يمكنك استخدام المكوِّن Outline المخصص. تحتوي الشريحة المحدّدة على خلفية شفافة وحد لوني أساسي بنسبة تعتيم 60% ومحتوى ملوّن أساسي.
تركيز منخفض
تحتوي الشرائح ذات التوكيد المنخفض على تعبئة شفافة وتصنيف نصي فقط. استخدام شرائح منخفضة التوكيد للإشارة إلى وجود علاقة فرعية بشريحة أساسية أو ثانوية
الأحجام
الشريحة التلقائية
الرمز: 24 بكسل مستقل الكثافة
الارتفاع: 52 بكسل مستقل الكثافة
شريحة مضغوطة
الرمز: 20 dp
الارتفاع: 32 dp
المساحة القابلة للنقر: 48 dp
الاستخدام
يمكنك الاطّلاع على أمثلة على استخدام الشرائح، مثل الشرائح العادية في "الإعدادات" وشرائح الصور في تطبيق للتمارين الرياضية.
التنسيقات التكيُّفية
السلوك المتجاوب
يمكن تمديد الشرائح لملء العرض المتاح على الشاشات الأكبر حجمًا.
الرمز (24 × 24 بكسل مستقل الكثافة)
الحاوية (52 × XX بكسل مستقل الكثافة)
يخضع كل من المحتوى وعيّنات التعليمات البرمجية في هذه الصفحة للتراخيص الموضحّة في ترخيص استخدام المحتوى. إنّ 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,["# 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"]]
