زر

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

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

توضّح هذه الصورة الأنواع الخمسة من الأزرار في التصميم المتعدد الأبعاد:

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

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

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

زر معبأ

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

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

زر التعبئة النغمي

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

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

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

زر بمخطط خارجي

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

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

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

زر مرتفع

يستخدم مكوّن الزر البارز الدالة البرمجية المركبة ElevatedButton. ويحتوي على ظل يمثّل تأثير الارتفاع تلقائيًا. وهو زر معبأ يتضمّن ظلًا.

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

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

زر نصي

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

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

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

مراجع إضافية