React MDL يدمج التفاعل مع مادة تصميم لايت

قامت Google مؤخرًا بطرح مكتبة تسمى Material Design Lite والتي تعد مصدرًا أساسيًا للمطورين. يقوم تلقائيًا بتصميم أي موقع ويب باستخدام إرشادات تصميم المواد باستخدام CSS و JS المدمج مسبقًا.

هذا هو إطار شعبي لمشاريع ديف بسيطة. يجمع React MDL بين إطار عمل Google ومكتبة React لتكوين مورد واجهة مستدير جيدًا.

من الواضح أن تصميم المواد من Google هو مستقبل UI / UX في عالم Google. ومع تطبيق Material Design Lite ، أصبح تطبيق هذه الميزات أسهل من أي وقت مضى على أي موقع ويب باستخدام مكتبة مفتوحة المصدر خاصة بها.

React هو أيضًا إلى حد بعيد إطار عمل JS للواجهة الأمامية الأكثر استخدامًا لمكونات عرض الواجهة الأمامية. مع React MDL ، يمكنك دمج مكونات React هذه مع مكتبة MDL للحصول على طريقة عرض تشبهها في وثائق Google عبر الإنترنت.

إليك نموذج لمقال مقال حتى تتمكن من التعرف على كيفية ظهور هذا.

لا تحتوي هذه الصفحة على العديد من مكونات React ولكنها توضح جمالية تصميم المواد. ستجد المزيد من الإجراءات في هذا العرض التوضيحي الذي تم إنشاؤه باستخدام مكونات React.

يمكنك في الواقع العثور على مزيد من المعلومات حول Material Design Lite في تقرير GitHub إذا كنت مهتمًا بمعرفة المزيد. من هناك يمكنك تنزيل CSS و JS الخام للتنفيذ في صفحتك والذي يدعم تلقائيًا جميع المتصفحات الحديثة والتدهور اللطيف.

لسوء الحظ نظرًا لأن React MDL ما زال جديدًا إلى حد ما ، فإنه لا يتمتع بالدعم الكامل لجميع المكونات.

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

أود ليس نوصي بتعلم React MDL حتى تشعر بالفعل بالراحة مع كلتا المكتبات.

إن مجموعة Material Design Lite بسيطة للغاية للبدء ولكن React أكثر تعقيدًا.

لمعرفة المزيد حول MDL ، تحقق من صفحة الأسئلة الشائعة على الموقع الرسمي. يقدم نصائح حول مكان استخدام MDL ، والميزات التي يقدمها ، وكيف يمكن أن تنسجم مع سير عمل webdev النموذجي.

لكن بصدق ، حتى لو لم تفهم React بشكل جيد ، فلا يزال بإمكانك الحصول على جميع العينات في صفحة المكونات. على سبيل المثال ، تحتوي صفحة النص على حقول نصية تعمل باستخدام تصميم المواد ولكن مع قصاصات كود التفاعل.

لا تتردد في اللعب ونرى ما يمكنك بنائه. كلا المكتبات مجانية ومفتوحة المصدر لجميع المشاريع سواء كانت شخصية أو تجارية.

يمكنك معرفة المزيد من صفحة React MDL GitHub إذا كنت تريد دراسة المصدر والغطس فيه.