كيفية إنشاء استجابة UI مع المكونات على غرار

هناك العديد من الطرق لإنشاء تطبيقات الويب سريعة الاستجابة باستخدام ReactJS. بصرف النظر عن استخدام أطر عمل كاملة مثل Bootstrap ، فقد أردت إنشاء طريقة عرض مستجيبة للشبكة مع مكونات مصممة بطريقة غير مؤلمة.

تصوير أولور الرحمن على Unsplash

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

حتى هذه النقطة ، عندما أقوم بتصميم تخطيط صفحة ويب سريعة الاستجابة ، كنت دائماً أعتمد على Bootstrap ، أو Rea-bootstrap ، عند العمل مع ReactJS. لماذا ا؟ لأنني وجدت أنه سهل الاستخدام وجعل التطوير أسرع قليلاً.

ولكن ليس هذه المرة. لذلك ألقيت نظرة على البرنامج التعليمي w3schools حول إنشاء طريقة عرض لشبكة متجاوبة لمعرفة ما يحدث خلف ستائر هذه المكتبات الفاخرة:

كيف تعمل طريقة عرض الشبكة المستجيبة؟

بادئ ذي بدء ، أريد أن أقدم مقدمة قصيرة عن كيفية عمل طرق عرض الشبكة سريعة الاستجابة. إذا كنت تعرف هذا بالفعل ، فلا تتردد في تخطي هذا القسم.

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

.عمود {
  العرض: 8.33 ٪ ؛
  تعويم: اليسار؛
}

التحرير: كما ذكر Mauro Lionel Ocorso و Jean Duthon ، من الممكن أيضًا استخدام flexbox بدلاً من float: left ؛. ومع ذلك ، قد تكون هناك بعض مشكلات التوافق إذا كنت تريد دعم المتصفحات القديمة أيضًا. شكرا يا رفاق على الإشارة إلى هذا!

شبكة مع اثني عشر أعمدة

نظرًا لأن الشبكة بأكملها يبلغ عرضها 100 بالمائة ، يبلغ عرض كل عمود 8.33٪. الآن دعنا نقول إننا نريد عمودًا أكبر في بداية الشبكة ، بحجم ثلاثة أعمدة أو 25 بالمائة من الشاشة.

يمتد العمود الأول عبر الأعمدة الثلاثة الأولى

في الصورة أعلاه ، يمكنك رؤية العمود الأول يمتد عبر ثلاثة أعمدة ، مما تسبب في اختفاء العمود الثاني والثالث. ما حدث بالفعل ليس امتداد عمود حقيقي. حصل العمود الأول على عرض 25 بالمائة وتم حذف العمودين 2 و 3 الآن لم تعد هناك حاجة إليهما.

لتحقيق ذلك ، يجب إجراء بعض التغييرات. بدلاً من وجود فئة CSS واحدة لكل عمود ، يوجد واحد لكل فترة عمود ممكنة. ينعكس هذا أيضًا في أسماء الفئات التي استخدمتها: بينما يمتد col-1 عبر عمود واحد ، فإن col-3 يمتد عبر ثلاثة و col-12 سيكون عرضه 100 بالمائة.

[class * = "col-"] {
  تعويم: اليسار؛
}
.col-1 {
  العرض: 8.33 ٪ ؛
}
.col-2 {...}
.col-3 {
  العرض: 25 ٪ ؛
}
[...]

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

يجب أن تكدس الأعمدة عموديًا عند عرضها من جهاز صغير

دعنا نقول أننا نريد تكديس الأعمدة بمجرد أن يكون العرض أصغر من 768 بكسل.

[class * = "col-"] {
  / * Mobile أولاً: اضبط العرض على 100٪ افتراضيًا * /
  العرض: 100 ٪ ؛
}
Media فقط الشاشة و (العرض الأدنى: 768 بكسل) {
  / * لكل شيء أكبر من 768 بكسل * /
  .col-1 {
    العرض: 8.33 ٪ ؛
  }
  .col-2 {...}
  .col-3 {
    العرض: 25 ٪ ؛
  }
}
[...]

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

الشيء الثاني المهم هو قاعدةmedia التي أضفتها: بمجرد أن يتجاوز العرض 768 بكسل ، يتم استخدام العروض الإجمالية من المثال الأخير.

الآن وقد غطيت الأساسيات ، دعنا نرى ، كيف يتم ذلك باستخدام React والمكونات المصممة!

إنشاء طريقة عرض الشبكة الأساسية مع المكونات على غرار

كبداية ، سنبني نفس الشبكة بالضبط ، مثلما غطيت في القسم الأخير:

  • سيكون له اثنا عشر عمودًا ممكنًا
  • يمكن أن يمتد العمود عبر عرض 1-12 عمود.
  • إذا كان العرض الكلي أصغر من 768 بكسل ، فستتكدس جميع الأعمدة رأسياً.

في لقطة الشاشة التالية ، سترى أنني أنشأت مكونًا يسمى الصف وهو ضروري لمسح العائمة بعد الأعمدة. ثم أضفت مكونًا من الأعمدة ، والذي يحتوي على تعويم افتراضيًا: المجموعة اليسرى ، وعرض 100٪ (الجوال أولاً ، تتذكر؟)

ولكن إلقاء نظرة بنفسك:

شبكتنا بنيت مع المكونات على غرار

يأخذ مكون العمود فترة دعم تمثل مقدار الأعمدة التي يجب أن تمتد عبرها. إذا تم تعيين هذا prop ، فإننا نحسب العرض المطلوب بالنسب المئوية. إذا لم يتم تعيين نطاق عمود ، فنحن نفترض أن النسبة الافتراضية هي 8.33 في المائة ، وهو العرض الافتراضي لفترة عمود قدرها 1.

تمديد الشبكة: نقاط توقف مختلفة!

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

لتحقيق ذلك ، لن يستغرق العمود فترة تمتد. بدلاً من ذلك ، سيكون هناك نقطة واحدة لكل نقطة توقف:

  • XS لأحجام الشاشة تصل إلى 768 بكسل
  • sm للأحجام تصل إلى 992px
  • md للأحجام تصل إلى 1200
  • إل جي لكل شيء أكبر من ذلك
لدينا مكون العمود الجديد

إذن ماذا فعلنا هنا؟ نظرًا لعدم وجود عرض احتياطي للأعمدة تمتد أكبر من xs ، لم نعد نحسب قيمة العرض ، ولكن النص بالكامل بدلاً من ذلك.

على سبيل المثال: إذا قمت بتعيين نطاق عمود 6 على md ، فستحصل على العرض: 50٪ ؛ على الأجهزة المتوسطة. إذا لم تقم بتعيين نطاق عمود md وكان عرض الشاشة يتجاوز 992 بكسل ، فلن نضبط أي عرض. بهذه الطريقة ، يحصل العمود دائمًا على عرض نطاق عمود المجموعة الأصغر التالي ، أو 100٪ إذا لم يتم تعيين أي شيء.

الآن دعونا نرى كيف يعمل:

يجب أن يعرض المثال أعلاه شبكة بها عمودين.

شاشات صغيرة جدًا (<768 بكسل)
على الشاشات الصغيرة جدًا ، يأخذ العمود الأول العرض بالكامل ، بينما يتم تحويل العمود رقم 2 إلى الصف التالي.

تم تقديم مثالنا على شاشة صغيرة جدًا

الشاشات الصغيرة (> 768 بكسل)
يجب أن يمتد العمود الأول عبر 6 أعمدة ، وبالتالي يجب أن يحصل على عرض 50 بالمائة. في هذه الحالة ، لا يحتوي العمود الثاني على نطاق عمود لمجموعة الشاشات الصغيرة ، لذلك يتم تعيين عرض أصغر نقطة فاصل تالية: 50 بالمائة.

شاشة صغيرة - إذا لم يتم تعيين نطاق عمود بحجم شاشة معين ، فسيتم تعيين النطاق الأصغر التالي.

شاشات متوسطة (> 992 بكسل)
يجب أن يكون هذا سهلاً: يمتد العمود الأول عبر 8 أعمدة (66.66 بالمائة) والثاني يمتد عبر 4 أعمدة (33.33 بالمائة)

شاشة متوسطة

نظرًا لأننا لم نقم بتعيين نطاق عمود للشاشات الكبيرة ، فإن كلا العمودين يبدوان متشابهان كما يبدو على الشاشات المتوسطة.

استنتاج

كان ما بنينا هنا مثالاً على شبكة سريعة الاستجابة مع مكونات ذات وظائف أساسية. ربما يمكنك تمديد المكونات لدعم المزيد من التصميم مثل الهوامش أو الحشوات أو الحدود ، على سبيل المثال لا الحصر.

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

شكرا لكم على قراءة هذا المقال. آمل أن أتمكن من تزويدك ببعض المعلومات المفيدة. إذا كان الأمر كذلك ، فسأكون سعيدًا إذا أوصيت بهذا المنشور وانقر فوق الزر ♥ heart ليتسنى لعدد أكبر من الناس رؤية ذلك.

أنا سعيد دائمًا بتلقي الملاحظات! لذا إذا كانت هناك أسئلة أو إذا كنت تريد إضافة شيء هنا ، فيرجى ترك تعليق أو اللحاق بي على Twitter.

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