تمت ترجمة هذه الصفحة بواسطة Cloud Translation API‏.

الشريحة

عنصر Chip هو عنصر واجهة مستخدم تفاعلي ومكثّف. ويمثّل ذلك الكيانات المعقدة، مثل جهة اتصال أو علامة، غالبًا باستخدام رمز وتصنيف. ويمكن أن يكون قابلاً للاختيار أو الإغلاق أو النقر عليه.

إليك الأنواع الأربعة للشرائح وكيفية استخدامها:

المساعدة: يوجّه المستخدم أثناء أداء مَهمّة. تظهر غالبًا كواجهة مستخدم مؤقتة العنصر استجابةً لإدخال المستخدم.
الفلتر: يسمح للمستخدمين بتحسين المحتوى من خلال مجموعة من الخيارات. يمكنه أو إلغاء تحديدها، وقد تتضمن رمز علامة الاختيار عند تحديدها.
الإدخال: لتمثيل المعلومات التي يقدّمها المستخدِم، مثل الاختيارات في القائمة. ويمكن أن تحتوي على رمز ونص، ويجب أن تتضمّن رمز X للإزالة.
اقتراح: يوفّر اقتراحات للمستخدم استنادًا إلى نشاطه أو إدخاله الأخير. يظهر عادةً أسفل حقل الإدخال لطلب من المستخدم مناسبة.

مثال على كل مكوّن من مكوّنات الشريحة الأربعة، مع تمييز خصائصه الفريدة — **الشكل 1.** مكونات الشريحة الأربعة

واجهة برمجة التطبيقات

هناك أربعة عناصر قابلة للإنشاء تتوافق مع الأنواع الأربعة من الرقائق. تشير رسالة الأشكال البيانية تحدد الأقسام التالية هذه العناصر القابلة للإنشاء والاختلافات بينها بالتفصيل. ومع ذلك، فهي تشترك في المَعلمات التالية:

label: السلسلة التي تظهر على الشريحة
icon: الرمز المعروض في بداية الشريحة تحتوي بعض العناصر القابلة للتجميع على مَعلمتَي leadingIcon وtrailingIcon مفصالتَين.
onClick: دالة lambda التي تستدعيها الشريحة عندما يضغط عليها المستخدم.

شريحة مساعدة

توفّر السمة AssistChip القابلة للإنشاء طريقة سهلة لإنشاء شريحة مساعدة توجّه المستخدم في اتجاه معين. ومن بين الميزات التي تميّز هذه الشريحة، المَعلمة leadingIcon التي تتيح لك عرض رمز على ناحية اليسار من الشريحة. يوضح المثال التالي كيفية تطبيقه:

@Composable
fun AssistChipExample() {
    AssistChip(
        onClick = { Log.d("Assist chip", "hello world") },
        label = { Text("Assist chip") },
        leadingIcon = {
            Icon(
                Icons.Filled.Settings,
                contentDescription = "Localized description",
                Modifier.size(AssistChipDefaults.IconSize)
            )
        }
    )
}Chip.kt

تظهر عملية التنفيذ هذه على النحو التالي.

شريحة مساعدة بسيطة. — **الشكل 2.** شريحة المساعدة

شريحة الفلتر

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

@Composable
fun FilterChipExample() {
    var selected by remember { mutableStateOf(false) }

    FilterChip(
        onClick = { selected = !selected },
        label = {
            Text("Filter chip")
        },
        selected = selected,
        leadingIcon = if (selected) {
            {
                Icon(
                    imageVector = Icons.Filled.Done,
                    contentDescription = "Done icon",
                    modifier = Modifier.size(FilterChipDefaults.IconSize)
                )
            }
        } else {
            null
        },
    )
}Chip.kt

يظهر هذا التنفيذ على النحو التالي عند عدم اختياره:

شريحة فلتر غير محدّدة، بدون علامة اختيار وخلفية خطة — **الشكل 3.** شريحة فلتر غير محدّدة

ويظهر على النحو التالي عند اختياره:

تم اختيار شريحة فلتر مع علامة اختيار وخلفية ملوّنة. — **الشكل 4.** تم اختيار شريحة الفلتر.

شريحة الإدخال

يمكنك استخدام العنصر القابل للتجميع InputChip لإنشاء شرائح ناتجة عن تفاعل المستخدم. على سبيل المثال، في برنامج بريد إلكتروني، عندما يكتب المستخدم رسالة إلكترونية، قد تمثّل شريحة الإدخال شخصًا أدخل المستخدم عنوانه في الحقل "إلى:".

توضح عملية التنفيذ التالية شريحة إدخال موجودة بالفعل في الولاية المحددة. يغلق المستخدم الشريحة عند الضغط عليها.

@Composable
fun InputChipExample(
    text: String,
    onDismiss: () -> Unit,
) {
    var enabled by remember { mutableStateOf(true) }
    if (!enabled) return

    InputChip(
        onClick = {
            onDismiss()
            enabled = !enabled
        },
        label = { Text(text) },
        selected = enabled,
        avatar = {
            Icon(
                Icons.Filled.Person,
                contentDescription = "Localized description",
                Modifier.size(InputChipDefaults.AvatarSize)
            )
        },
        trailingIcon = {
            Icon(
                Icons.Default.Close,
                contentDescription = "Localized description",
                Modifier.size(InputChipDefaults.AvatarSize)
            )
        },
    )
}Chip.kt

تظهر طريقة التنفيذ هذه على النحو التالي.

شريحة إدخال تحتوي على صورة رمزية ورمز لاحق — **الشكل 5.** أدخِل الشريحة.

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

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

راجِع عملية تنفيذ SuggestionChip التالية:

@Composable
fun SuggestionChipExample() {
    SuggestionChip(
        onClick = { Log.d("Suggestion chip", "hello world") },
        label = { Text("Suggestion chip") }
    )
}Chip.kt

تظهر عملية التنفيذ هذه على النحو التالي:

شريحة بارزة

تستخدم جميع الأمثلة الواردة في هذا المستند العناصر الأساسية القابلة للإنشاء التي تتخذ مظهرك. إذا كنت تريد شريحة ذات مظهر بارز، استخدِم أحد العناصر القابلة للتجميع التالية:

مصادر إضافية

مستندات واجهة مستخدم Material