Button

الأزرار هي مكونات أساسية تسمح للمستخدم بتشغيل إجراء محدد. هناك خمسة أنواع من الأزرار. يوضّح الجدول التالي شكل كل نوع من أنواع الأزرار الخمسة، بالإضافة إلى مواضع استخدامها.

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

توضِّح الصورة التالية الأنواع الخمسة للأزرار في تصميم المواد.

الشكل 1. مكوّنات الزرّ الخمسة

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

• onClick: الدالة التي يتم استدعاءها عندما يضغط المستخدم على الزر
• enabled: عندما تكون هذه المَعلمة false، تظهر هذه المَعلمة غير متاح وغير نشط.
• colors: مثيل ButtonColors الذي يحدّد الألوان المستخدَمة في الزر
• contentPadding: المساحة المتروكة داخل الزر

زرّ معبّأ

يستخدم مكوّن الزرّ الممتلئ العنصر الأساسي Button القابل للتجميع. ويتم تلقائيًا ملؤه بلون واحد. يوضّح المقتطف التالي كيفية تنفيذ المكوّن:

@Composable
fun FilledButtonExample(onClick: () -> Unit) {
    Button(onClick = { onClick() }) {
        Text("Filled")
    }
}
Button.kt

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

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

الشكل 2. زرّ ممتلئ

زرّ نغميّ معبأ

يستخدم مكوّن الزرّ الملوّن الممتلئ العنصر القابل للتجميع FilledTonalButton. ويتم ملؤه تلقائيًا بلون نغمي.

يوضّح المقتطف التالي كيفية تنفيذ المكوّن:

@Composable
fun FilledTonalButtonExample(onClick: () -> Unit) {
    FilledTonalButton(onClick = { onClick() }) {
        Text("Tonal")
    }
}
Button.kt

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

الشكل 3. زرّ نغمي

زر مخطّط

يستخدم مكوّن الزرّ المخطّط العنصر القابل للتجميع OutlinedButton. ويظهر مع مخطّط تلقائيًا.

يوضّح المقتطف التالي كيفية تنفيذ المكوّن:

@Composable
fun OutlinedButtonExample(onClick: () -> Unit) {
    OutlinedButton(onClick = { onClick() }) {
        Text("Outlined")
    }
}
Button.kt

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

الشكل 4. زر محدَّد الجوانب

زر بارز

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

يوضّح المقتطف التالي كيفية تنفيذ المكوّن:

@Composable
fun ElevatedButtonExample(onClick: () -> Unit) {
    ElevatedButton(onClick = { onClick() }) {
        Text("Elevated")
    }
}
Button.kt

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

الشكل 5. زر بارز

زر لون النص

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

يوضّح المقتطف التالي كيفية تنفيذ المكوّن:

@Composable
fun TextButtonExample(onClick: () -> Unit) {
    TextButton(
        onClick = { onClick() }
    ) {
        Text("Text Button")
    }
}
Button.kt

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

الشكل 6. زر نصي

مصادر إضافية

• زر الإجراء العائم
• مستندات واجهة مستخدم Material