تمت ترجمة هذه الصفحة بواسطة 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 UI