الشرائح

المكوِّن Chip هو عنصر مضغوط تفاعلي يمثل إدخالاً أو سمة أو إجراءًا.

علم التشريح

يمكن أن تحتوي الشرائح على ما يصل إلى تصنيفين نصيين وأيقونة اختيارية. يجب توفير تصنيف نصي واحد أو رمز واحد على الأقل. وقد تقتطع الشرائح النص إذا كان التصنيف النصي طويلاً جدًا. ويكون التصنيف الأساسي عبارة عن سطر واحد من النص في حال توفُّر التصنيف الثانوي، ولكن يمكن أن يتضمّن ما يصل إلى سطرَين من النص في حال عدم توفّر التصنيف الثانوي.

أ. تصنيف أساسي
ب: التصنيف الثانوي (اختياري)
ج: الرمز (اختياري)
د: الحاوية

اقتراحات التصميم

شريحة صورة

تحتوي شرائح الصور على إجراءات ذات صلة بصورة تم اختيارها. تعمل شرائح الصور بشكل جيد لتقديم شكل ومضمون أكثر تحديدًا.

Chip(
    ...
    label = {
        Text(
            text = "Summer Mix",
            maxLines = 1,
            overflow = TextOverflow.Ellipsis
         )
    },
    colors = ChipDefaults.imageBackgroundChipColors(
        backgroundImagePainter = painterResource(id = R.drawable.clouds)
    )
)

شريحة الصورة الرمزية

يمكنك استخدام شرائح الصور الرمزية لتنفيذ الإجراءات المرتبطة بصورة رمزية تم اختيارها. ويمكن أن تتضمّن شرائح الصورة الرمزية أيضًا رموزًا تسهّل التعرّف على الصورة الرمزية، مثل صورة مستند تعريف جهة الاتصال. تكون رموز الصورة الرمزية 32x32dp.

Chip(
    ...
    label = {
        Text(text = "Mark Castle")
    },
    icon = {
        Icon(
            painter = painterResource(id = R.drawable.avatar),
            contentDescription = null,
            modifier = Modifier.size(ChipDefaults.LargeIconSize)
                .wrapContentSize(align = Alignment.Center)
        )
    }
)

المكوّنات ذات الصلة

شريحة مدمجة

أمّا المكوِّن ذو الصلة، CompactChip فهو خيار مختلف لمكوِّن الشريحة الذي يظهر بحجم أصغر ومصمَّم للاستخدام في الحالات التي لا تتوفّر فيها مساحة أقل. تحتوي الشرائح المكثّفة على فتحة للرمز وفتحة لتصنيف نص سطر واحد. ويكون ارتفاع الشرائح المكثّفة 48 وحدة بكسل مستقلة الكثافة ومساحة يمكن النقر عليها.

تسلسل هرمي

استخدِم تعبئة ألوان مختلفة للدلالة على التسلسل الهرمي للشرائح. صمِّم كل شاشة بحيث تحتوي على شريحة واحدة بارزة للإجراء الأساسي.

تركيز عالٍ
يمكنك استخدام شرائح عالية التركيز لتنفيذ الإجراءات الأساسية في الصفحة. يمكنك استخدام الألوان الأساسية كتعبئة لشريحة تركيز عالية.

التوكيد المتوسط
يمكنك استخدام شرائح التشديد المتوسطة للإجراءات الأقل أهمية من الإجراءات الأساسية. استخدام ألوان ثانوية لتعبئة شريحة تركيز متوسط.

يمكنك بدلاً من ذلك استخدام المكوِّن OutlineChip المخصّص. تشمل الشريحة المحددة خلفية شفافة ولونًا أساسيًا ملونًا يبلغ تعتيمه 60% ومحتوى ملون أساسي.

تركيز منخفض
تحتوي شرائح التركيز المنخفض على تعبئة شفافة وتصنيف نصي فقط. ويمكنك استخدام شرائح توكيد منخفضة للإشارة إلى علاقة فرعية بشريحة أساسية أو ثانوية.

الأحجام

الشريحة التلقائية

الرمز: 24dp
الارتفاع: 52dp

شريحة مدمجة

الرمز: 20 بكسل مستقل الكثافة
الارتفاع: 32 بكسل مستقل الكثافة
المنطقة القابلة للنقر: 48 بكسل مستقل الكثافة

الاستخدام

يمكنك الاطّلاع على أمثلة على استخدام الشرائح، مثل الشرائح العادية، ضمن "الإعدادات" و"شرائح الصور" في تطبيق للتمارين الرياضية.