كيفية تخصيص v3.2.0 موضوع مادة واجهة المستخدم (الجزء 1)

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

  • الجزء 1: فهم هيكل موضوع MUI وكيفية قراءة وثيقة
  • الجزء 2: تجاوز المتغيرات والأدوات العالمية
  • الجزء 3: تجاوز متغيرات المكون
  • الجزء 4: تجاوز مع رد فعل المكتبة الخارجية (الإصدار 5/11)

لمن لا يعرف ماهية واجهة المستخدم؟

تفاعل مع المكونات التي تنفذ تصميم المواد من Google.

اسمح لي أن أخبرك بتاريخ قصير عن Material-ui قبل أن نتعمق فيه (يمكنك تخطي هذا القسم). بدأ المشروع قبل عامين ، الإصدار الأول هو 0.x.x. لقد دهشت عندما رأيت لأول مرة مكونات التجريبي. تذكرت أن الزر له تأثير كذاب عند النقر عليه لا يزال يبهرني حتى هذه الأيام. ومع ذلك ، فإن الإصدار الأول يتم تنفيذه بأسلوب مضمن وهو أمر صعب عندما يتعلق الأمر بالتخصيص والتجاوزات. لا يوجد أي مكون شبكة في v0.x.x ، لذلك كان من الصعب على مبتدئ مثلي البدء. لحسن الحظ ، في الإصدار 1+ (الإصدار الحالي 3.0.0) ، يطبقون نمط css-in-js مع الكثير من المكونات المفيدة الجديدة بما في ذلك الشبكة و Breakpoints و Hidden والمزيد. شيء آخر أحب هذا المشروع هو خارطة الطريق الشاملة الخاصة بهم واتساقها. إن Theming أسهل ولكن لا يزال من الصعب على المبتدئين ، ولهذا السبب أريد أن أشارك تجربتي في هذه السلسلة. يتم تنظيم المستند بشكل كبير ويتم شرحه بوضوح مع العروض التوضيحية ، لكنني أعتقد أن رد الفعل الدلالي يقوم بهذا الجزء بشكل أفضل نظرًا لتحريره الفوري ، يجب على MUI فتحه في صندوق تعليمات برمجية للتحرير. بالمناسبة ، أنا أحب MUI وأوصي بأن تحاولوا جميعًا تجربة ذلك.

فهم هيكل مادة واجهة المستخدم

عندما يتعلق الأمر بالموضوع ، فإن المجال الأول الذي تريد استكشافه هو اللون. نظرًا لأن MUI تنفذ تصميم مواد Google ، فمن المهم للغاية أن تفهم نية ذلك. وإلا فسوف تصل الأمر في النهاية.

نظام الألوان

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

يحتوي اللون على متغير داكن وخفيف معرف من 50 إلى 900

مثال متغير اللون

لمزيد من التفاصيل حول نظام ألوان تصميم المواد ، اقرأ هنا

طباعة

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

العناوين الرئيسية (h1-h6)

أكبر نص على الشاشة

قصيرة ، مهمة

EX. رأس مع العرض ، نمط البرنامج النصي

ترجمات (العنوان الفرعي 1 ، 2)

أصغر من العناوين

نص متوسط ​​التركيز

قصيرة

EX. رأس البطاقة (سان شريف)

الجسم (الجسم 1،2)

كتابة طويلة الشكل

التسمية التوضيحية و Overline

أصغر

إضافة تعليق توضيحي للصور (تعليق)

أعرض العنوان الرئيسي

زر

دعوة للعمل

جميع رسائل العاصمة سان serif

يمكن أن يكون الجمل القضية

لمزيد من التفاصيل حول طباعة تصميم المواد ، اقرأ هنا

هذا كل شيء ، والآن دعنا نذهب إلى وثيقة دليل المواد. موقع رسمي

هذا القسم مخصص للمبتدئين الذين يريدون تجربة مادة واجهة المستخدم. إذا لم تكن كذلك ، يمكنك الانتقال إلى الجزء التالي.

إذا كنت ترغب في تخصيص مواد واجهة المستخدم الخاصة بهم ، فيجب أن تكون على دراية بمكونات mui. أوصي أن نلقي نظرة على "مكونات المكون" (زر ، مربع ، التقدم ، TextField ، علامات التبويب).

يمكنك اللعب به في صندوق الرمل الرمزي لتعتاد عليه قبل أن نذهب إلى الجزء التالي.

هذا هو. إذا كنت على استعداد لبناء بعض السمات ، انقر أدناه.

الجزء 2: تجاوز المتغيرات والأدوات العالمية