Published on

قوة الـPeer

Authors

ماهو الـ peer؟

هو كلاس مساعد في tailwindcss يتيح لك معرفة حالة العناصر المجاورة للـinput وبالتالي يمكنك اضافة ستايل معين او اظهار محتوى معين بناءً على القيمة التي توجد في الـinput

يمكن الاستفادة من الـpeer في عدة اشياء وطرق كثيرة سأتطرق لبعض منها

الاستخدام بديلا عن الكولابس

"صورة توضيحية"

<header>
  {# هذا مانحتاجه #}
  <input type="checkbox" id="nav" class="peer sr-only" />
  <div class="hidden peer-checked:block">...</div>
</header>

يكفي ان يتم وضع الـinput

<input type="checkbox" id="nav" class="peer sr-only" />

فوق العنصر الذي تريد اخفائه و اظهاره

ويمكن التحكم بالعنصر بهذه الكلاسات

<div class="hidden peer-checked:block">...</div>

معلومة مهمة

اذا كان العنصر الذي تريد اخفاءه بهذا الشكل

<header>
  <input type="checkbox" id="nav" class="peer sr-only" />
  <div class="bg-blue-950 mx-auto w-full border-r-[30px] border-blue-600 lg:w-[960px] ">
    <div class="hidden peer-checked:block">...</div>
  </div>
</header>

اي بمعنى انه ديف داخل ديف فيجب عليك استخدام ايضا الـgrouping كالتالي

<header>
  {# هذا مانحتاجه #}
  <input type="checkbox" id="nav" class="peer sr-only" />
  <div
    class="bg-blue-950 ---> ماتم اضافته group/nav mx-auto w-full border-r-[30px] border-blue-600 lg:w-[960px] "
  >
    {# االاستخدام يكون هنا #}
    <div class="---> ماتم اضافته peer-checked:group-[]/nav:block hidden">...</div>
  </div>
</header>

يمكن استخدامها بعدة امثلة و طرق كمثال يمكنك عمل عنصر accordion بدون تدخل اي كود جافاسكربت او يمكنك اظهار رسائل الاخطاء عند الكتابة فيالـtext input كمثال يمكنك الاطلاع على المزيد من هنا

عنصر الاكورديون

"صورة توضيحية"

يمكنك إلقاء نظرة على الكود و تجربته من خلال هذا الرابط