یہ مضمون ان افادیت کو ظاہر کرے گا جو ویب صفحہ پر پوزیشن والے عناصر کی جگہ کو کنٹرول کرنے کے لیے استعمال کی جا سکتی ہیں۔
ٹیل ونڈ یوٹیلیٹیز کو پوزیشن شدہ عناصر کی جگہ کو کنٹرول کرنے کے لیے استعمال کیا جاتا ہے؟
Tailwind CSS یوٹیلیٹی جو خاص طور پر افقی یا عمودی دونوں محور میں پوزیشن والے عناصر کی جگہ کے ساتھ کام کرتی ہے ' اوپر | صحیح | نیچے | بائیں ' دیگر افادیت کی طرح، یہ مختلف کلاسز بھی فراہم کرتا ہے جو مختلف جگہوں پر پوزیشن والے عنصر کو سیٹ کر سکتے ہیں، ان میں سے کچھ کلاسیں ذیل میں بیان کی گئی ہیں:
- inset-{placementValue}
- start-{placementValue}
- ٹاپ-{placementValue}
- end-{placementValue}
- نیچے-{placementValue}
- بائیں-{placementValue}
- دائیں-{placementValue}
اب، آئیے ان کلاسوں میں سے کچھ کو بہتر طور پر سمجھنے کے لیے استعمال کرنے کے لیے ایک عملی مثال دیتے ہیں۔
مثال: Tailwind CSS یوٹیلٹیز کا استعمال کرتے ہوئے پوزیشن شدہ عنصر کی جگہ کا تعین
اس مثال میں، اوپر بیان کردہ افادیت کا استعمال ویب صفحہ پر مختلف جگہوں پر پوزیشن والے عنصر کو رکھنے کے لیے کیا جائے گا، جیسا کہ ذیل میں دکھایا گیا ہے:
< جسم کلاس = 'grid grid-cols-3' >
< div کلاس = 'رشتہ دار h-32 w-32 bg-اورنج-200 p-4 m-4 ٹیکسٹ سنٹر جواز فراہم کرنے والا گول گول' >
< div کلاس = 'مطلق بائیں-0 ٹاپ-0 h-16 w-16 bg-blue-400 گول p-4' > آئٹم 1 < / div >
< / div >
< div کلاس = 'رشتہ دار h-32 w-32 bg-اورنج-200 p-4 m-4 ٹیکسٹ سنٹر جواز فراہم کرنے والا گول گول' >
< div کلاس = 'مطلق inset-x-0 top-0 h-16 bg-blue-400 rounded p-4' > آئٹم 2 < / div >
< / div >
< div کلاس = 'رشتہ دار h-32 w-32 bg-اورنج-200 p-4 m-4 ٹیکسٹ سنٹر جواز فراہم کرنے والا گول گول' >
< div کلاس = 'مطلق انسیٹ-0 bg-blue-400 گول p-4' > آئٹم 3 < / div >
< / div >
< div کلاس = 'رشتہ دار h-32 w-32 bg-اورنج-200 p-4 m-4 ٹیکسٹ سنٹر جواز فراہم کرنے والا گول گول' >
< div کلاس = 'مطلق inset-y-0 right-0 w-16 bg-blue-400 rounded p-4' > آئٹم 4 < / div >
< / div >
< div کلاس = 'رشتہ دار h-32 w-32 bg-اورنج-200 p-4 m-4 ٹیکسٹ سنٹر جواز فراہم کرنے والا گول گول' >
< div کلاس = 'مطلق نیچے-0 دائیں-0 h-16 w-16 bg-نیلا-400 گول p-4' > آئٹم 5 < / div >
< / div >
< / جسم >
مندرجہ بالا کوڈ کی تفصیل:
- پہلے پانچ والدین بنائیں div ” عناصر اور متعلقہ پوزیشن، اونچائی، چوڑائی، پس منظر، پیڈنگ، مارجن وغیرہ سیٹ کرنے کے لیے مختلف Tailwind CSS کلاسز کا اطلاق کریں۔
- اگلا، ایک نیسٹڈ بنائیں ' div ہر والدین کے اندر عنصر 'div'۔ اس گھریلو 'div' عنصر کے لیے جگہ کا تعین کیا جائے گا۔
- پھر، 'کی ٹیل ونڈ سی ایس ایس کلاسز کا اطلاق کریں مطلق '،' h '،' میں '،' bg ”، ص '، اور ' گول 'گھوںسلا کو اسٹائل کرنا' div ' عنصر.
- اس کے بعد، nested div ایک سے پانچ تک شروع کرتے ہوئے، 'کی نئی کلاسیں تفویض کریں۔ بائیں-0 ٹاپ-0 '،' inset-x-0 '،' inset-0 '،' inset-y-0 right-0 '، اور ' نیچے-0 دائیں-0 'بالترتیب.
- یہ کلاسیں اوپری بائیں کونے میں نیسٹڈ div عناصر کی پوزیشن سیٹ کرتی ہیں، اوپر کی پوزیشن کو کور کرتی ہیں، پوری پیرنٹ اسپیس کا احاطہ کرتی ہیں، دائیں جانب کو ڈھانپتی ہیں، اور بالترتیب نیچے سے بائیں پوزیشن کا احاطہ کرتی ہیں۔
پھانسی کے بعد، div عناصر کا پیش نظارہ اس طرح لگتا ہے:
آؤٹ پٹ سے پتہ چلتا ہے کہ پوزیشن شدہ عناصر مطلوبہ پوزیشنوں پر رکھے گئے ہیں۔
نتیجہ
' اوپر | صحیح | نیچے | بائیں ٹیل ونڈ یوٹیلیٹی کا استعمال ویب پیج پر عناصر کی جگہ کو کنٹرول کرنے کے لیے کیا جاتا ہے۔ یہ ہر پوزیشن کو نشانہ بنانے کے لیے کئی کلاسز کا استعمال کرتا ہے اور پھر منتخب عنصر کو ضروریات کے مطابق اس جگہ منتقل کرتا ہے۔ یہ کلاسیں بنیادی طور پر پوزیشن والے عناصر کو بائیں، دائیں، نیچے اور اوپر رکھتی ہیں۔ وہ پورے علاقے کا احاطہ کرنے، مخصوص سمتوں جیسے بائیں یا اوپر، وغیرہ کا احاطہ کرنے میں مدد کر سکتے ہیں۔ اس مضمون نے کامیابی کے ساتھ ان افادیت کی وضاحت کی ہے جو پوزیشن شدہ عناصر کی جگہ کو کنٹرول کرنے کے لیے استعمال کی جا سکتی ہیں۔