یہ مضمون Tailwind CSS کا استعمال کرتے ہوئے مرئی خصوصیات کے ساتھ ہوور اور دیگر ریاستوں کو لاگو کرنے کے عمل درآمد کے طریقہ کار سے متعلق ہے۔
ٹیل ونڈ میں ویزیبلٹی یوٹیلیٹی کے ساتھ ہوور اور دیگر ریاستوں کو کیسے اپلائی کریں؟
مرئیت کی افادیت کو ہوور اور دیگر ریاستوں کے ساتھ استعمال کیا جا سکتا ہے تاکہ صارف کے تعامل پر مرئیت میں تبدیلی کی جا سکے۔ مرئیت کی افادیت کے تحت تین کلاسیں ہیں یعنی ' نظر آنے والا '،' پوشیدہ '، اور ' گرنے ' آئیے بہتر تفہیم کے لیے ذیل کی مثالوں میں ہوور سٹیٹس کے ساتھ کچھ مرئیت کی کلاسوں کو ضم کرتے ہیں۔
مثال 1: 'غیر مرئی' کلاس کے ساتھ ہوور اسٹیٹ کا اطلاق کرنا
اس صورت میں، منتخب عنصر کو اس وقت چھپایا جائے گا جب صارف کا کرسر عنصر پر منڈلاتا ہے، کوڈ نیچے دکھایا گیا ہے:
< جسم >
< div کلاس = 'grid grid-cols-3 gap-4 my-4 mx-4' >
< div کلاس = 'bg-blue-500 p-3 گول ٹیکسٹ سینٹر' > 01 < / div >
< div کلاس = 'bg-blue-500 p-3 ہوور: پوشیدہ گول ٹیکسٹ سینٹر' > 02 < / div >
< div کلاس = 'bg-blue-500 p-3 گول ٹیکسٹ سینٹر' > 03 < / div >
< / div >
< / جسم >
مندرجہ بالا کوڈ کی وضاحت:
- سب سے پہلے، پیرنٹ ڈیو بنایا گیا ہے جو ایک تین کالم گرڈ لے آؤٹ بناتا ہے جس میں ہر کالم اور مارجن کے درمیان ایک جگہ ہوتی ہے۔ 4px ' Tailwind CSS کا استعمال کرتے ہوئے ' گرڈ '،' grid-cols-3 '،' خلا '،' میرا '، اور ' mx 'بالترتیب کلاسز۔
- اگلا، تین بچے' div عناصر بنائے جاتے ہیں اور بنیادی اسٹائل ان پر لاگو ہوتے ہیں۔
- پھر ' ہوور 'سی ایس ایس میں ریاست یا سلیکٹر کو دوسرے 'div' اور 'کو تفویض کیا گیا ہے۔ پوشیدہ 'اس کو بڑی آنت سے الگ کیا گیا ہے' : 'نشان۔ جب ماؤس اس پر منڈلاتا ہے تو یہ دوسری تقسیم کو پوشیدہ بنا دیتا ہے۔
عمل درآمد کے مرحلے کے بعد ویب پیج کا پیش نظارہ:
مندرجہ بالا gif ظاہر کرتا ہے کہ دوسرا div ماؤس ہور پر پوشیدہ ہوتا جا رہا ہے۔
مثال 2: 'غیر مرئی' کلاس کے ساتھ فعال حالت کا اطلاق کرنا
'فعال' حالت سٹائل کو لاگو کرتی ہے جب صارف ایک مخصوص عنصر کو منتخب کرتا ہے اور نہیں چھوڑتا ہے. ٹیکسٹ بکس کی طرح جب صارف فیلڈ کے اندر ڈیٹا داخل کرنا شروع کرتا ہے، اس وقت فیلڈ ایکٹو ہوتی ہے۔ فعال حالت کے بارے میں مزید واضح تفہیم حاصل کرنے کے لیے اور یہ 'غیر مرئی' کلاس کے ساتھ کیسے کام کرتی ہے، نیچے دیے گئے کوڈ کو دیکھیں:
< جسم >< div کلاس = 'grid grid-cols-3 gap-4 my-4 mx-4' >
< div کلاس = 'bg-blue-500 p-3 گول ٹیکسٹ سینٹر' >01< / div >
< div کلاس = 'bg-blue-500 p-3 فعال: پوشیدہ گول ٹیکسٹ سینٹر' >02< / div >
< div کلاس = 'bg-blue-500 p-3 گول ٹیکسٹ سینٹر' >03< / div >
< / div >
< / جسم >
مندرجہ بالا کوڈ میں، 'کی کلاس پوشیدہ 'کو تفویض کیا گیا ہے' فعال 'دوسرے کے لیے ریاست' div دوسرے div عنصر کو منتخب کرنے پر اسے چھپانے کے لیے عنصر۔
عملدرآمد کے بعد، ویب صفحہ کا پیش نظارہ اس طرح ظاہر ہوتا ہے:
مندرجہ بالا آؤٹ پٹ سے پتہ چلتا ہے کہ جب دوسرا 'div' منتخب کیا جاتا ہے تو عنصر پوشیدہ ہو جاتا ہے۔
نتیجہ
ہوور اور دیگر سٹیٹس جیسے ایکٹیو یا فوکس کو مرئیت یوٹیلیٹی کی طرف سے فراہم کردہ کلاسز کے ساتھ استعمال کیا جا سکتا ہے تاکہ منتخب عناصر کے لیے مرئیت کی خصوصیات میں ترمیم کی جا سکے۔ ماؤس ہور پر عناصر کی مرئیت کو تبدیل کرنے کے لیے، ہوور کلاس کا استعمال مرئیت کی کلاسوں کے ساتھ کیا جاتا ہے جو رنگ سے الگ ہوتے ہیں جیسے ' hover: مرئی 'یا' hover: پوشیدہ ' اس بلاگ نے مرئیت کی افادیت کے ساتھ ہوور اسٹیٹس کو لاگو کرنے کے طریقہ کار کی وضاحت کی ہے۔