Button
الأزرار هي مكونات أساسية تتيح للمستخدم تشغيل اتخاذ القرار. هناك خمسة أنواع من الأزرار. ويوضّح الجدول التالي ومظهر كل نوع من أنواع الأزرار الخمسة، بالإضافة إلى المكان الذي يجب أن تستخدم فيه معهم.
النوع |
المظهر |
الغرض |
---|---|---|
معبأ |
خلفية خالصة مع نص متباين |
أزرار عالية التوكيد. تُستخدم هذه الإجراءات في الإجراءات الأساسية في أحد التطبيقات، مثل "إرسال". و"حفظ". يؤكد تأثير الظل على أهمية الزر. |
صبغة مملوءة |
يختلف لون الخلفية ليتطابق مع لون السطح. |
أيضًا للإجراءات الأساسية أو المهمة توفر الأزرار المعبأة وزنًا مرئيًا أكثر ووظائف ملاءمة مثل "الإضافة إلى عربة التسوق" وانقر على "تسجيل الدخول". |
مرتفعة |
تبرز بوجود ظل. |
تناسب دورًا مشابهًا لأزرار درجات اللون. يمكنك زيادة المسقط الرأسي لكي يظهر الزر بشكل أكثر بروزًا. |
مخطّط |
يظهر حد بدون تعبئة. |
أزرار متوسط التوكيد، تحتوي على إجراءات مهمة ولكنها ليست أساسية. يمكن إقرانها جيدًا بأزرار أخرى للإشارة إلى إجراءات ثانوية بديلة مثل "إلغاء". أو "رجوع". |
نص |
يتم عرض النص بدون خلفية أو حدود. |
أزرار منخفضة التركيز، مثالية للإجراءات الأقل أهمية، مثل روابط التنقّل، أو الوظائف الثانوية مثل "مزيد من المعلومات" أو "عرض التفاصيل". |
توضح الصورة التالية الأنواع الخمسة من الأزرار في Material Design.
مساحة عرض واجهة برمجة التطبيقات
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") } }
تظهر طريقة التنفيذ هذه على النحو التالي: