زرّ

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

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

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

مساحة عرض واجهة برمجة التطبيقات

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

زر معبأ

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

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

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

زر درجات لونية معبأة

يستخدم عنصر زر الدرجات اللونية الذي تم ملؤه العنصر FilledTonalButton القابل للإنشاء. وهي ممتلئة بلون تدرّجي تلقائيًا.

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

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

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

زر مخطّط

يستخدم مكوّن الزر المخطط عنصر OutlinedButton القابل للإنشاء. يظهر مع مخطط تفصيلي بشكل افتراضي.

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

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

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

زر بارز

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

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

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

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

زر لون النص

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

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

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

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

مصادر إضافية

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