العربية

أطلق العنان لقوة متغيرات peer في Tailwind CSS لتصميم العناصر الشقيقة بناءً على حالة عنصر آخر. يقدم هذا الدليل الشامل أمثلة معمقة وحالات استخدام عملية لإنشاء واجهات مستخدم ديناميكية وسريعة الاستجابة.

متغيرات Peer في Tailwind CSS: إتقان تصميم العناصر الشقيقة

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

فهم متغيرات Peer

تسمح لك متغيرات Peer بتصميم عنصر بناءً على حالة (مثل التحويم، التركيز، التحديد) عنصر شقيق له. يتم تحقيق ذلك باستخدام كلاس peer الخاص بـ Tailwind بالاقتران مع متغيرات أخرى قائمة على الحالة مثل peer-hover و peer-focus و peer-checked. تستفيد هذه المتغيرات من مجمعات CSS الشقيقة (sibling combinators) لاستهداف وتصميم العناصر ذات الصلة.

بشكل أساسي، يعمل كلاس peer كعلامة، مما يسمح للمتغيرات اللاحقة المستندة إلى peer باستهداف العناصر الشقيقة التي تلي العنصر المحدد في شجرة DOM.

المفاهيم الأساسية

الصيغة الأساسية والاستخدام

تتضمن الصيغة الأساسية لاستخدام متغيرات peer تطبيق كلاس peer على العنصر المحفز ثم استخدام متغيرات peer-* على العنصر المستهدف.

مثال: تصميم فقرة عند تحديد مربع اختيار


<label class="flex items-center space-x-2">
  <input type="checkbox" class="peer" />
  <span>Enable Dark Mode</span>
</label>
<p class="hidden peer-checked:block text-gray-700">
  Dark mode is now enabled.
</p>

في هذا المثال، يتم تطبيق كلاس peer على عنصر <input type="checkbox"/>. أما عنصر الفقرة، وهو شقيق لمربع الاختيار، فيحتوي على كلاس peer-checked:block. هذا يعني أنه عند تحديد مربع الاختيار، سيتغير عرض الفقرة من hidden إلى block.

أمثلة عملية وحالات استخدام

تفتح متغيرات Peer مجموعة واسعة من الإمكانيات لإنشاء مكونات واجهة مستخدم ديناميكية وتفاعلية. إليك بعض الأمثلة العملية التي توضح تنوعها:

١. تسميات النماذج التفاعلية

عزز تجربة المستخدم من خلال تمييز تسميات النماذج بصريًا عندما تكون حقول الإدخال المقابلة لها في حالة تركيز.


<div>
  <label for="name" class="block text-gray-700 font-bold mb-2 peer-focus:text-blue-500 transition-colors duration-200">
    Name:
  </label>
  <input type="text" id="name" class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline peer" />
</div>

في هذا المثال، يتم تطبيق كلاس peer على حقل الإدخال. عندما يكون حقل الإدخال في حالة تركيز، سيقوم كلاس peer-focus:text-blue-500 الموجود على التسمية بتغيير لون نص التسمية إلى اللون الأزرق، مما يوفر إشارة مرئية للمستخدم.

٢. أقسام الأكورديون/القابلة للطي

أنشئ أقسام أكورديون حيث يؤدي النقر على العنوان إلى توسيع المحتوى الموجود أسفله أو طيه.


<div>
  <button class="w-full text-left py-2 px-4 bg-gray-100 hover:bg-gray-200 focus:outline-none peer">
    Section Title
  </button>
  <div class="hidden peer-focus:block bg-white py-2 px-4">
    <p>Content of the section.</p>
  </div>
</div>

هنا، يتم تطبيق كلاس peer على الزر. يحتوي div المحتوى على كلاسات hidden peer-focus:block. على الرغم من أن هذا المثال يستخدم حالة 'focus'، فمن المهم ملاحظة أن سمات ARIA المناسبة (مثل `aria-expanded`) وجافاسكريبت قد تكون مطلوبة لإمكانية الوصول والوظائف المحسنة في تنفيذ أكورديون حقيقي. ضع في اعتبارك التنقل عبر لوحة المفاتيح وتوافق قارئات الشاشة.

٣. تصميم القوائم الديناميكي

ميّز عناصر القائمة عند التحويم أو التركيز باستخدام متغيرات peer.


<ul>
  <li>
    <a href="#" class="block py-2 px-4 hover:bg-gray-100 focus:outline-none peer">Item 1</a>
    <span class="hidden peer-hover:inline peer-focus:inline text-gray-500 ml-2">(Details)</span>
  </li>
  <li>
    <a href="#" class="block py-2 px-4 hover:bg-gray-100 focus:outline-none peer">Item 2</a>
    <span class="hidden peer-hover:inline peer-focus:inline text-gray-500 ml-2">(Details)</span>
  </li>
</ul>

في هذه الحالة، يتم تطبيق كلاس peer على وسم الرابط داخل كل عنصر من عناصر القائمة. عندما يتم التحويم فوق وسم الرابط أو التركيز عليه، يتم عرض عنصر span المجاور، مما يوفر تفاصيل إضافية.

٤. التصميم بناءً على صلاحية الإدخال

قدم ملاحظات مرئية للمستخدمين بناءً على صلاحية مدخلاتهم في حقول النموذج.


<div>
  <label for="email" class="block text-gray-700 font-bold mb-2">Email:</label>
  <input type="email" id="email" required class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline peer" />
  <p class="hidden peer-invalid:block text-red-500 text-sm mt-1">Please enter a valid email address.</p>
</div>

هنا، نستفيد من الكلاس الزائف :invalid (المدعوم أصلاً من قبل المتصفحات) ومتغير peer-invalid. إذا كان إدخال البريد الإلكتروني غير صالح، فسيتم عرض رسالة الخطأ.

٥. أزرار الاختيار ومربعات التحديد المخصصة

أنشئ أزرار اختيار ومربعات تحديد جذابة بصريًا وتفاعلية باستخدام متغيرات peer لتصميم مؤشرات مخصصة.


<label class="inline-flex items-center">
  <input type="radio" class="form-radio h-5 w-5 text-blue-600 peer" name="radio" value="option1" />
  <span class="ml-2 text-gray-700 peer-checked:text-blue-600">Option 1</span>
  <span class="ml-2 hidden peer-checked:inline-block w-5 h-5 rounded-full bg-blue-600"></span>
</label>

في هذا المثال، يتم استخدام متغير peer-checked لتصميم كل من نص التسمية ومؤشر مخصص (span الملون) عند تحديد زر الاختيار.

تقنيات واعتبارات متقدمة

دمج متغيرات Peer مع متغيرات أخرى

يمكن دمج متغيرات Peer مع متغيرات Tailwind الأخرى مثل hover و focus و active لإنشاء تفاعلات أكثر تعقيدًا ودقة.


<button class="peer bg-gray-200 hover:bg-gray-300 focus:outline-none focus:bg-gray-300"
        >
  Hover me
</button>
<p class="hidden peer-hover:block peer-focus:block">This will show on hover or focus</p>

سيُظهر هذا المثال الفقرة عندما يتم التحويم فوق الزر أو التركيز عليه.

استخدام المجمعات الشقيقة العامة (~)

بينما يكون مجمع الشقيق المجاور (+) أكثر شيوعًا، يمكن أن يكون مجمع الشقيق العام (~) مفيدًا في سيناريوهات معينة حيث لا يكون العنصر المستهدف مجاورًا مباشرة للعنصر peer.

مثال: تصميم جميع الفقرات اللاحقة بعد مربع اختيار.


<input type="checkbox" class="peer" />
<p>Paragraph 1</p>
<p class="peer-checked:text-green-500">Paragraph 2</p>
<p class="peer-checked:text-green-500">Paragraph 3</p>

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

اعتبارات إمكانية الوصول

من الضروري مراعاة إمكانية الوصول عند استخدام متغيرات peer. تأكد من أن التفاعلات التي تنشئها قابلة للاستخدام والفهم من قبل الأشخاص ذوي الإعاقة. وهذا يشمل:

اعتبارات الأداء

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

استكشاف المشكلات الشائعة وإصلاحها

فيما يلي بعض المشكلات الشائعة التي قد تواجهها عند العمل مع متغيرات peer وكيفية استكشافها وإصلاحها:

بدائل لمتغيرات Peer

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

الخاتمة

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

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