تتيح الأزرار للمستخدمين اتخاذ الإجراءات وتحديد الاختيارات بنقرة واحدة.

إنها (الأزرار) تنقل الإجراءات التي يمكن للمستخدمين القيام بها. يتم وضعه بواسطة واجهة المستخدم الخاصة بك في أماكن مثل أدناه:

• نوافذ مشروطة
• نماذج
• بطاقات
• أشرطة الأدوات
• الزر الأساسي

يأتي الزر في 3 أنواع: نص (افتراضي)، متضمن، و موجز.

 import * as React from 'react'; import Stack from '@mui/material/Stack'; import Button from '@mui/material/Button'; export default function BasicButtons() { return ( Text Contained Outlined ); } 

زر النص

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

 import * as React from 'react'; import Button from '@mui/material/Button'; import Stack from '@mui/material/Stack'; export default function TextButtons() { return ( Primary Disabled Link ); } 

زر الواردة

الأزرار المضمنة عالية التركيز، وتتميز باستخدام الارتفاع والتعبئة. يحتوي على الإجراءات المستخدمة بشكل أساسي في تطبيقنا.

مستودع مخضرم

 import * as React from 'react'; import Button from '@mui/material/Button'; import Stack from '@mui/material/Stack'; export default function ContainedButtons() { return ( Contained Disabled Link ); } 

يمكنك إزالة الارتفاع باستخدام خاصية تعطيل الارتفاع.

 import * as React from 'react'; import Button from '@mui/material/Button'; export default function DisableElevation() { return ( Disable elevation ); } 

الزر المبين

الأزرار المحددة هي أزرار متوسطة التركيز. أنها تحتوي على إجراءات أساسية ولكن ليس الإجراء الرئيسي في التطبيق.

الأزرار المحددة هي البديل الأقل لاحتواء الأزرار أو بديل التركيز العالي لأزرار النص.

 import * as React from 'react'; import Button from '@mui/material/Button'; import Stack from '@mui/material/Stack'; export default function OutlinedButtons() { return ( Primary Disabled Link ); } 

التعامل مع النقرات

جميع المكونات تقبل عند النقر المعالج الذي يتم تطبيقه على الجذر DOM عنصر.

 { alert('clicked'); }} > Click me 

ملاحظة: تتجنب الوثائق ذكر الدعائم الأصلية في قسم واجهة برمجة التطبيقات (API) الخاص بالمكونات.

لون

 import * as React from 'react'; import Stack from '@mui/material/Stack'; import Button from '@mui/material/Button'; export default function ColorButtons() { return ( Secondary Success Error ); } 

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

مقاس

استخدم هذه الخاصية للأزرار الأكبر أو الأصغر.

زر التحميل

 import * as React from 'react'; import { styled } from '@mui/material/styles'; import Button from '@mui/material/Button'; import IconButton from '@mui/material/IconButton'; import PhotoCamera from '@mui/icons-material/PhotoCamera'; import Stack from '@mui/material/Stack'; const Input = styled('input')({ display: 'none', }); export default function UploadButtons() { return ( Upload ); } 

أزرار مع التسمية والرمز

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

تحويل السلسلة إلى int في Java

على سبيل المثال، إذا أردنا حذف الزر، فيجب عليك تسميته برمز سلة المهملات.

 import * as React from &apos;react&apos;; import Button from &apos;@mui/material/Button&apos;; import DeleteIcon from &apos;@mui/icons-material/Delete&apos;; import SendIcon from &apos;@mui/icons-material/Send&apos;; import Stack from &apos;@mui/material/Stack&apos;; export default function IconLabelButtons() { return ( <button variant="outlined" starticon="{}"> Delete </button><button variant="contained" endicon="{}"> Send ); } </button>

زر الأيقونة

توجد أزرار الأيقونات في أشرطة الأدوات وأشرطة التطبيقات. تعتبر الرموز مناسبة لأزرار التبديل التي تسمح بتحديد الاختيارات أو إلغاء تحديدها. مثل إضافة أو إزالة أي عنصر من التسمية.

 import * as React from 'react'; import IconButton from '@mui/material/IconButton'; import Stack from '@mui/material/Stack'; import DeleteIcon from '@mui/icons-material/Delete'; import AlarmIcon from '@mui/icons-material/Alarm'; import AddShoppingCartIcon from '@mui/icons-material/AddShoppingCart'; export default function IconButtons() { return ( ); } 

الأحجام

استخدم دعامة الحجم للرمز الأكبر أو الأصغر في الزر.

 import * as React from 'react'; import Stack from '@mui/material/Stack'; import IconButton from '@mui/material/IconButton'; import DeleteIcon from '@mui/icons-material/Delete'; export default function IconButtonSizes() { return ( ); } 

الألوان

استخدم خاصية اللون لتطبيق لوحة ألوان السمة على المكون.

 import * as React from 'react'; import Stack from '@mui/material/Stack'; import IconButton from '@mui/material/IconButton'; import Fingerprint from '@mui/icons-material/Fingerprint'; export default function IconButtonColors() { return ( ); } 

التخصيص

فيما يلي أمثلة لتخصيص المكون الخاص بنا.

زر التحميل

يمكن لأزرار التحميل إظهار حالة التحميل وتعطيل تفاعلات الزر.

 import * as React from &apos;react&apos;; import LoadingButton from &apos;@mui/lab/LoadingButton&apos;; import SaveIcon from &apos;@mui/icons-material/Save&apos;; import Stack from &apos;@mui/material/Stack&apos;; export default function LoadingButtons() { return ( Submit Fetch data <loadingbutton loading loadingposition="start" starticon="{}" variant="outlined"> Save ); } </loadingbutton>

قم بتبديل زر التحميل لرؤية الانتقال بين المواضع غير ذات الصلة.

زر معقد

تم دمج زر الأيقونة وزر النص والأزرار المضمنة وأزرار الإجراءات العائمة في مكون واحد يسمى ButtonBase.

طريقة السلسلة الفرعية في جافا

يمكنك استخدام مكون المستوى الأدنى لإنشاء تفاعلات مخصصة.

مكتبات توجيه الطرف الثالث

يعد التنقل بين العميل دون رحلة HTTP محددة إلى الخادم حالة استخدام فريدة. يوفر مكون ButtonBase خصائص المكون للتعامل مع حالة الاستخدام.

الحدود

يقوم ButtonBase بتعيين أحداث مؤشر المكون: لا شيء؛ على زر التعطيل الذي يمنع ظهور المؤشر المعطل.

إذا كنت تريد استخدام 'غير مسموح' ، لديك خياران:

CSS فقط: يمكنك إزالة نمط حدث المؤشر في حالة التعطيل عنصر:

 .uibuttonbase-root:disabled { cursor: not allowed; pointer-events: auto; , 

بالرغم من،

مؤشر عدم المرجعية

يجب عليك إضافة أحداث المؤشر: لا شيء؛ عندما تحتاج إلى عرض تلميحات الأدوات على العناصر المعطلة.

إذا قمت بعرض أي شيء آخر غير عنصر الزر، فلن يتغير المؤشر. على سبيل المثال، وصلة عنصر.

تغيير دوم. يمكنك لف الزر:

 <span style="{{" cursor: 'not allowed' }}> disabled </span> 

يمكنه دعم أي عنصر، على سبيل المثال، رابط عنصر.

غير مرتب

سيأتي المكون مع الإصدار غير المصمم. إنه مثالي لإجراء تحسينات كبيرة وتقليل حجم الحزمة.

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

كيفية استخدام مكون الزر في ReactJS؟

تتيح الأزرار للمستخدمين اتخاذ إجراءاتهم وتحديد الاختيارات بنقرة واحدة. هذا المكون متاح لنا لمحتوى React UI، ومن السهل جدًا دمجه. يمكننا استخدام مكون الزر في ReactJS باستخدام النهج التالي.

إنشاء تطبيق رد الفعل وتثبيت الوحدات:

الخطوة 1: أنشئ تطبيق React باستخدام الأمر الموضح أدناه:

تصميم مفرد

 npx create-react-app foldername 

الخطوة 2: بعد إنشاء مجلد المشروع، واسم المجلد للتنقل فيه باستخدام الأمر المحدد:

 cd foldername 

الخطوه 3: تحميل هذا واجهة المستخدم المادية باستخدام الأمر التالي، بعد إنشاء تطبيق ReactJS:

 npm install @material-ui/core 

هيكل المشروع: وسوف تبدو على النحو التالي.

هيكل المشروع

التطبيق.js: الآن عليك كتابة الكود أدناه في ملف App.js ملف.

هنا، التطبيق هو المكون الافتراضي الذي كتبناه في الكود الخاص بنا.

جافا سكريبت

 import React from &apos;react&apos;; import Button from &apos;@material-ui/core/Button&apos;; const App = () =&gt; { return ( <h3>How to use Button Component in ReactJS?</h3> <br> Default Button Primary Button Secondary Button Disabled Button Link Button ); } export default App; 

خطوات تشغيل التطبيق:

قم بتشغيل التطبيق باستخدام الأمر من الدليل الجذر للمشروع:

 npm start 

انتاج: الآن افتح المتصفح الخاص بك وانتقل إلى http://localhost:3000/. يمكنك رؤية الإخراج أدناه: