Button

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

توضح الصورة التالية الأنواع الخمسة من الأزرار في 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