Button

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

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

توضح الصورة التالية الأنواع الخمسة من الأزرار في Material Design.

الشكل 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 UI