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