Button

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

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

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

• ‫onClick: الدالة التي يتم استدعاؤها عندما يضغط المستخدم على الزر.
• enabled: عند ضبط هذه المَعلمة على "خطأ"، سيظهر الزر على أنّه غير متاح وغير نشط.
• ‫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