یہ مضمون Tailwind CSS میں گرڈ آٹو فلو یوٹیلیٹی پر ہوور اثر کو لاگو کرنے کے طریقہ کار کی مثال دے گا۔
ٹیل ونڈ میں گرڈ آٹو فلو پر ہوور کیسے لگائیں؟
Tailwind میں گرڈ آٹو فلو پر ہوور اثر کو لاگو کرنے کے لیے، ایک HTML فائل بنائیں اور ' ہوور 'کے ساتھ کلاس' grid-flow-
اس کے عملی نفاذ کے لیے دیے گئے اقدامات کو دیکھیں:
مرحلہ 1: HTML پروگرام میں رو گرڈ کے ساتھ ہوور پراپرٹی کا استعمال کریں۔
ایک HTML پروگرام بنائیں اور استعمال کریں ' ہوور 'مطلوبہ جائیداد' grid-flow-
< جسم >
< div کلاس = 'گرڈ گرڈ فلو کول ہوور: گرڈ فلو قطار گیپ-3 ایم-3 ٹیکسٹ سینٹر' >
< div کلاس = 'bg-teal-500 p-5' > 1 < / div >
< div کلاس = 'bg-teal-500 p-5' > 2 < / div >
< div کلاس = 'bg-teal-500 p-5' > 3 < / div >
< div کلاس = 'bg-teal-500 p-5' > 4 < / div >
< div کلاس = 'bg-teal-500 p-5' > 5 < / div >
< div کلاس = 'bg-teal-500 p-5' > 6 < / div >
< / div >
< / جسم >
یہاں:
- ' گرڈ کلاس عنصر کو گرڈ کنٹینر کے طور پر سیٹ کرتی ہے۔
- ' grid-flow-col ” کالموں میں گرڈ آئٹمز کے بہاؤ کی وضاحت کرتا ہے۔
- ' hover:grid-flow-row جب ماؤس کنٹینر پر منڈلاتا ہے تو کلاس گرڈ آئٹمز کے بہاؤ کو قطاروں میں تبدیل کرتی ہے۔
- ' gap-3 ” گرڈ آئٹمز کے درمیان 3 اکائیوں کا فرق جوڑتا ہے۔
- ' m-3 گرڈ کنٹینر کے ارد گرد 3 یونٹس کا مارجن شامل کرتا ہے۔
- ' متن کا مرکز ” گرڈ آئٹمز کے اندر متنی مواد کو مرکز میں سیدھ میں کرتا ہے۔
مرحلہ 2: آؤٹ پٹ کی تصدیق کریں۔
اس بات کی تصدیق کرنے کے لیے کہ ہوور اثر گرڈ آٹو فلو پر لاگو ہو گیا ہے، ویب صفحہ دیکھیں، اور ماؤس کو گرڈ آئٹمز پر منتقل کریں:
یہ دیکھا جا سکتا ہے کہ ابتدائی طور پر گرڈ آئٹمز کا بہاؤ کالموں میں ہوتا ہے اور جب ماؤس ان پر منڈلاتا ہے تو بہاؤ قطاروں میں بدل جاتا ہے۔ اس سے ظاہر ہوتا ہے کہ گرڈ آٹو فلو پر ہوور اثر کامیابی سے لاگو ہو گیا ہے۔
نتیجہ
ٹیل ونڈ میں گرڈ آٹو فلو پر ہوور اثر کو لاگو کرنے کے لیے، ' ہوور 'مطلوبہ کلاس' grid-flow-