ستوضح هذه المقالة الأدوات المساعدة التي يمكن استخدامها للتحكم في وضع العناصر الموضوعة على صفحة الويب.
هل تستخدم أدوات Tailwind للتحكم في وضع العناصر الموضوعة؟
الأداة المساعدة Tailwind CSS التي تتعامل بشكل خاص مع وضع العناصر الموضوعة في كلا المحورين الأفقي أو الرأسي هي ' أعلى | حق | أسفل | غادر '. تمامًا مثل الأدوات المساعدة الأخرى، فإنه يوفر أيضًا فئات مختلفة يمكنها تعيين العنصر المتوضع في أماكن مختلفة، بعض هذه الفئات مذكورة أدناه:
- أقحم-{placementValue}
- البداية-{placementValue}
- أعلى-{placementValue}
- نهاية-{placementValue}
- أسفل-{placementValue}
- اليسار-{placementValue}
- يمين-{placementValue}
الآن، دعونا نحصل على مثال عملي لاستخدام بعض هذه الفئات لفهم أفضل.
مثال: وضع العنصر المحدد باستخدام أدوات Tailwind CSS المساعدة
في هذا المثال، سيتم استخدام الأداة الموصوفة أعلاه لوضع العنصر الموجود في أماكن مختلفة على صفحة الويب، كما هو موضح أدناه:
< جسم فصل = 'شبكة الشبكة-cols-3' >
< شعبة فصل = 'نسبي h-32 w-32 bg-orange-200 p-4 m-4 مركز النص مبرر وممتد مدور' >
< شعبة فصل = 'اليسار المطلق-0 أعلى-0 ح-16 ث-16 بجي-أزرق-400 مدور ص-4' > البند 1 < / شعبة >
< / شعبة >
< شعبة فصل = 'نسبي h-32 w-32 bg-orange-200 p-4 m-4 مركز النص مبرر وممتد مدور' >
< شعبة فصل = 'إقحام مطلق-x-0 أعلى-0 ح-16 بغ-أزرق-400 مدور ص-4' > البند 2 < / شعبة >
< / شعبة >
< شعبة فصل = 'نسبي h-32 w-32 bg-orange-200 p-4 m-4 مركز النص مبرر وممتد مدور' >
< شعبة فصل = 'إقحام مطلق-0 bg-blue-400 مدور p-4' > البند 3 < / شعبة >
< / شعبة >
< شعبة فصل = 'نسبي h-32 w-32 bg-orange-200 p-4 m-4 مركز النص مبرر وممتد مدور' >
< شعبة فصل = 'إقحام مطلق-y-0 يمين-0 ث-16 بغ-أزرق-400 مدور ص-4' > البند 4 < / شعبة >
< / شعبة >
< شعبة فصل = 'نسبي h-32 w-32 bg-orange-200 p-4 m-4 مركز النص مبرر وممتد مدور' >
< شعبة فصل = 'أسفل مطلق-0 يمين-0 ح-16 ث-16 بجي-أزرق-400 مدور ص-4' > البند 5 < / شعبة >
< / شعبة >
< / جسم >
وصف الكود أعلاه:
- أولا، قم بإنشاء خمسة الوالدين ' شعبة ' وتطبيق فئات Tailwind CSS المختلفة لتعيين الموضع النسبي والارتفاع والعرض والخلفية والحشوة والهامش وما إلى ذلك.
- بعد ذلك، قم بإنشاء 'متداخل' شعبة 'عنصر داخل كل والد 'div'. سيتم تنفيذ الموضع لعنصر 'div' المتداخل هذا.
- ثم قم بتطبيق فئات CSS الخلفية من ' مطلق '،' ح '،' في '،' بغ '،' ص '، و ' مدور 'لأسلوب متداخل' شعبة ' عنصر.
- بعد ذلك، بدءًا من القسم المتداخل رقم 1 إلى القسم الخامس، قم بتعيين فئات جديدة من ' اليسار-0 أعلى-0 '،' أقحم-س-0 '،' أقحم 0 '،' أقحم-y-0 يمين-0 '، و ' أسفل-0 يمين-0 ' على التوالى.
- تحدد هذه الفئات موضع عناصر div المتداخلة في الزاوية العلوية اليسرى، وتغطي الموضع العلوي، وتغطي المساحة الأصلية بالكامل، وتغطي الجانب الأيمن، وتغطي الموضع السفلي الأيسر على التوالي.
بعد التنفيذ، تبدو معاينة عناصر div كما يلي:
يُظهر الإخراج أن العناصر الموضوعة موضوعة في المواضع المطلوبة.
خاتمة
ال ' أعلى | حق | أسفل | غادر ” يتم استخدام الأداة المساعدة Tailwind للتحكم في وضع العناصر على صفحة الويب. يستخدم عدة فئات لاستهداف كل موضع ثم ينقل العنصر المحدد في ذلك المكان وفقًا للمتطلبات. تضع هذه الفئات بشكل أساسي العناصر الموضوعة على اليسار واليمين والأسفل والأعلى. يمكنهم المساعدة في تغطية المنطقة بأكملها، وتغطية اتجاهات محددة مثل اليسار أو الأعلى، وما إلى ذلك. لقد نجحت هذه المقالة في شرح الأدوات المساعدة التي يمكن استخدامها للتحكم في موضع العناصر الموضوعة.