زرّ

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

Type

المظهر

الغرض

معبأ

خلفية صلبة بنص متباين

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

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

يختلف لون الخلفية ليتناسب مع السطح.

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

مرتفعة

يبرز من خلال الظل.

مناسبة لدور مشابه للأزرار ذات الدرجات اللونية. قم بزيادة المسقط الرأسي لجعل الزر يظهر بشكل أكثر بروزًا.

مخطّط

يتم عرض حد بدون تعبئة.

أزرار متوسطة التوكيد تحتوي على إجراءات مهمة وليست أساسية وهي مقترنة بشكل جيد مع أزرار أخرى للإشارة إلى إجراءات ثانوية بديلة مثل "Cancel" (إلغاء) أو "Back" (رجوع).

نص

لعرض نص بدون خلفية أو حدود

أزرار منخفضة التركيز، وهي مثالية للإجراءات الأقل أهمية، مثل روابط التنقّل أو الوظائف الثانوية مثل "مزيد من المعلومات" أو "عرض التفاصيل"

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

مثال لكل من مكونات الأزرار الخمسة، مع إبراز خصائصها الفريدة.
الشكل 1. مكوّنات الأزرار الخمسة

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

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

زر معبأ

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

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

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

زر معبأ بخلفية أرجوانية تظهر عليها عبارة "ممتلئ".
الشكل 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. زر نصي.

مراجع إضافية