كيفية تحريك الكتل البرمجية باستخدام React و Tailwind

أثناء العمل على موقع Next.js ، كنت بحاجة إلى نقل مكون React إلى مكان مختلف تمامًا في ترميزي ، اعتمادًا على حجم الشاشة.

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

نظرًا للطريقة التي نظمت بها ترميز HTML و CSS ، لم يتضح لي على الفور كيفية إجراء هذا الانتقال دون إعادة كتابة جزء كبير منه.

لذلك نظرت إلى Tailwind لتزودني بحل جيد.

وكانت هذه هي الطريقة: لقد أضفت المكون مرتين على الشاشة ، مع تخصيص الفصلhidden xl:blockإلى الجزء "الشاشة الكبيرة" وxl:hiddenإلى المقتطف الخاص بالشاشات الأصغر:

<div className="hidden xl:block">
  <Sidebar />
</div>

…


<div className=“xl:hidden”>
<Sidebar />
</div>

العيب بالطبع هو أن المكون يتم تقديمه مرتين ، ولكن كونه مكونًا بسيطًا للعرض بدون منطق ، فقد كان بمثابة حل وسط يمكنني التعايش معه.

تحميل مجانيكتيب رد الفعل


المزيد من البرامج التعليمية للتفاعل:


Tech Wiki على الإنترنت!