الصفحة الرئيسية>المتعلقة بالبرمجة>شفرة المصدر الأخرى
تنزيل

مكونات MUI

إرشادات لتصميم عناصر واجهة المستخدم باستخدام React Material UI

قوالب الرد

يتم تحديد أقسام كل تخطيط بوضوح إما عن طريق التعليقات أو استخدام ملفات منفصلة، ​​مما يجعل من السهل استخراج أجزاء من الصفحة (مثل "وحدة البطل"، أو التذييل، على سبيل المثال) لإعادة استخدامها في صفحات أخرى. بالنسبة للأمثلة متعددة الأجزاء، يصف الجدول الموجود في الملف التمهيدي الموجود في موقع التعليمات البرمجية المصدر المرتبط الغرض من كل ملف.

نقاط التوقف الافتراضية

تتطابق كل نقطة توقف (مفتاح) مع عرض شاشة ثابت (قيمة):

  • xs ، صغير جدًا: 0 بكسل
  • سم ، صغير: 600 بكسل
  • مد ، متوسط: 900 بكسل
  • إل جي كبير: 1200 بكسل
  • XL ، كبير جدًا: 1536 بكسل 
 cd /d G: O thers r eact v ite-project
 npm run dev
 http://localhost:5173/

عرض

اطلع على هذه التطبيقات العامة التي تستخدم واجهة المستخدم المادية للحصول على الإلهام لمشروعك القادم.

السمات

فيما يلي الأدوات المساعدة التي يمكن أن تساعدك في تخصيص المظهر الخاص بك والقدرة على تغييره في المتصفح.

  • إنشاء سمة Material-UI - أداة عبر الإنترنت لإنشاء سمات MUI عبر أداة Color Design Color Tool.
  • مولد موضوع واجهة المستخدم المادية - مولد موضوع / لوحة المواد واجهة المستخدم.
  • Material-UI Theme Editor - أداة لإنشاء سمات لتطبيقات MUI الخاصة بك عن طريق تحديد الألوان والحصول على معاينة مباشرة.

المشاريع ذات الصلة

مجموعة مشاريع تصميم واجهة المستخدم المادية.

  • Material-ui-theme-editor - أداة لإنشاء سمات لتطبيقات Material UI الخاصة بك والتي تتميز بالمعاينة المباشرة.
  • منشئ لوحة المواد - يمكن استخدام منشئ لوحة تصميم المواد الرسمي لإنشاء لوحة لأي لون تختاره.
  • المكونات الإضافية - توفر مجموعة من مكونات "الجزيء" المبنية على واجهة المستخدم المادية مثل التذييل وملف تعريف الارتباط وزر BackToTop والعناصر المعقدة الأخرى القابلة للتخصيص بدرجة كبيرة لمساعدة المطورين على بناء الأجزاء الكلية لواجهة المستخدم الخاصة بهم بسرعة كبيرة. غالبًا ما يتم تكرار هذه المكونات عبر المواقع - وهذه المكتبة تحل هذه المشكلة بالتحديد.
  • React Admin - إطار عمل للواجهة الأمامية لبناء تطبيقات إدارية تعمل في المتصفح، أعلى واجهات برمجة تطبيقات REST/GraphQL، باستخدام ES6 وReact وتصميم المواد.
  • قصاصات واجهة المستخدم المادية - يوفر ملحق VSCode مقتطفات.
  • Material UI Codemorphs - ملحق VSCode يوفر تعديلات برمجية.
  • Eslint: اكتشاف الفئات غير المستخدمة - البرنامج المساعد ESLint لاكتشاف فئات التصميم غير المستخدمة باستخدام @mui/styles .

عناصر

قائمة بمكونات واجهة المستخدم التي تم إنشاؤها باستخدام تصميم واجهة المستخدم المادية.

  • حقل كلمة مرور Material-UI - حقل كلمة مرور باستخدام Material-UI.
  • حوار ملء الشاشة - مربع حوار ملء الشاشة لـ Material-UI.
  • تحميل واجهة المستخدم المادية - ضوابط التحميل التي تم إجراؤها في واجهة المستخدم المادية باستخدام FileAPI.
  • Super Select Field - مكون القائمة المنسدلة للإكمال التلقائي متعدد التحديد لـ Material-UI.
  • نموذج مخطط المادة JSON - نموذج واجهة المستخدم المادية الذي تم إنشاؤه من json.
  • Notistack - أشرطة خفيفة سهلة لواجهة المستخدم المادية (لذلك لا يتعين عليك التعامل مع حالة الفتح/الإغلاق الخاصة بها).
  • Material-UI Dropzone - مكون Material-UI مبني فوق منطقة إسقاط التفاعل.
  • Formik-Material-UI - روابط لاستخدام Material-UI مع formik.
  • Redux-Form-Material-UI - مكونات الغلاف لتسهيل استخدام Material-UI مع Redux Form.
  • Final-Form-Material-UI - مكونات الغلاف لتسهيل استخدام Material-UI مع النموذج النهائي.
  • المواد الدائرية التلقائية لواجهة المستخدم - دائري بنمط المواد.
  • صورة واجهة المستخدم المادية - صورة بنمط المادة مع تحميل الرسوم المتحركة.
  • ترقيم الصفحات المسطح لواجهة المستخدم المادية - مكون ترقيم الصفحات ذو التصميم المسطح لواجهة المستخدم المادية.
  • Dx-react-scheduler-Material-UI - مكون جدولة/تقويم لـ Material-UI.
  • Dx-react-chart-Material-UI - مخططات لـ Material-UI تصور البيانات باستخدام مجموعة متنوعة من أنواع السلاسل، بما في ذلك الشريط والخط والمنطقة والمبعثر والدائري والمزيد.
  • مدونة Material-UI Medium - مكون بطاقة واجهة المستخدم المادية الموسعة لعرض المدونات المتوسطة.
  • React Github Repo Cards - مكون بطاقة واجهة المستخدم المادية الموسعة لإظهار مستودعات GitHub.
  • تفاعل مكونات الجزيء - تفاعل مكونات الجزيء بناءً على واجهة المستخدم المادية.
  • Material-UI NestedMenuItem - بديل منسدل لـ MenuItem الخاص بـ MUI بقوائم متداخلة بشكل لا نهائي، ويتم فتحه عند التمرير.
  • React-planet - إنشاء قوائم دائرية تشبه الكواكب.
يوسع
معلومات إضافية
تطبيقات ذات صلة
نوصي لك
أخبار ذات صلة الكل