Tailwind CSS میں، تبدیل شدہ عناصر وہ عناصر ہیں جن کے مواد کو کسی بیرونی وسائل، جیسے کہ تصاویر اور ویڈیوز سے تبدیل کیا جاتا ہے۔ بعض اوقات، صارفین کو کنٹینر کے اندر تبدیل شدہ عنصر کو پوزیشن میں رکھنے کے لیے چیلنج کا سامنا کرنا پڑتا ہے۔ اس کی وجہ یہ ہے کہ یہ عناصر کنٹینر کو اوور فلو کر سکتے ہیں اگر ان کا سائز دستیاب جگہ سے بڑا ہو۔ Tailwind CSS یہ کنٹرول کرنے کے لیے یوٹیلیٹی کلاسز فراہم کرتا ہے کہ تبدیل کیے گئے عنصر کے مواد کو کنٹینر کے اندر کس طرح پوزیشن اور سیدھ میں رکھا جاتا ہے۔
یہ مضمون Tailwind CSS میں کنٹینر کے اندر تبدیل شدہ عناصر کی پوزیشن کے طریقہ کار کی وضاحت کرے گا۔
ٹیل ونڈ میں کنٹینر کے اندر تبدیل شدہ عناصر کو کیسے رکھا جائے؟
Tailwind میں ایک کنٹینر کے اندر تبدیل شدہ عناصر کو پوزیشن میں رکھنے کے لیے، ایک HTML پروگرام بنائیں اور ' اعتراض-
نحو
< عنصر کلاس = 'آبجیکٹ-<پوزیشن ...' > ... عنصر >
مثال
اس مثال میں، ہم ایک کنٹینر بنائیں گے اور تمام ' اعتراض- ' (تصویر) عناصر کنٹینر کے اندر اپنی تبدیل شدہ پوزیشن کی وضاحت کرنے کے لیے:
< جسم >
< div کلاس = 'bg-sky-300 grid grid-rows-3 grid-flow-col m-5 space-y-4 p-4 جواز-درمیان' >
< img کلاس = 'آبجیکٹ-کوئی چیز-بائیں-اوپر w-24 h-24 my-4' src = 'https://cdn.pixabay.com/photo/2015/04/23/22/01/mountains-736886_1280.jpg' >
< img کلاس = 'آبجیکٹ-کوئی نہیں آبجیکٹ-بائیں w-24 h-24' src = 'https://cdn.pixabay.com/photo/2015/04/23/22/01/mountains-736886_1280.jpg' >
< img کلاس = 'آبجیکٹ-کوئی نہیں آبجیکٹ-بائیں-نیچے w-24 h-24' src = 'https://cdn.pixabay.com/photo/2015/04/23/22/01/mountains-736886_1280.jpg' >
< img کلاس = 'آبجیکٹ-کوئی نہیں آبجیکٹ ٹاپ w-24 h-24' src = 'https://cdn.pixabay.com/photo/2015/04/23/22/01/mountains-736886_1280.jpg' >
< img کلاس = 'آبجیکٹ-کوئی نہیں آبجیکٹ سینٹر w-24 h-24' src = 'https://cdn.pixabay.com/photo/2015/04/23/22/01/mountains-736886_1280.jpg' >
< img کلاس = 'آبجیکٹ-کوئی نہیں آبجیکٹ-نیچے w-24 h-24' src = 'https://cdn.pixabay.com/photo/2015/04/23/22/01/mountains-736886_1280.jpg' >
< img کلاس = 'آبجیکٹ-کوئی نہیں آبجیکٹ-دائیں ٹاپ w-24 h-24' src = 'https://cdn.pixabay.com/photo/2015/04/23/22/01/mountains-736886_1280.jpg' >
< img کلاس = 'آبجیکٹ-کوئی نہیں آبجیکٹ-دائیں w-24 h-24' src = 'https://cdn.pixabay.com/photo/2015/04/23/22/01/mountains-736886_1280.jpg' >
< img کلاس = 'آبجیکٹ-کوئی نہیں آبجیکٹ-دائیں-نیچے w-24 h-24' src = 'https://cdn.pixabay.com/photo/2015/04/23/22/01/mountains-736886_1280.jpg' >
div >
جسم >
یہاں، پیرنٹ
- ' bg-sky-300 کلاس کنٹینر کے پس منظر کا رنگ آسمان پر سیٹ کرتی ہے۔
- ' گرڈ کلاس ایک گرڈ لے آؤٹ کو قابل بناتی ہے۔
- ' grid-rows-3 کلاس گرڈ میں قطاروں کی تعداد کو 3 پر سیٹ کرتی ہے۔
- ' grid-flow-col کلاس کالموں میں گرڈ آئٹمز کے بہاؤ کی وضاحت کرتی ہے۔
- ' m-5 کلاس کنٹینر کے ارد گرد مارجن کے 5 یونٹس کا اضافہ کرتی ہے۔
- ' space-y-4 کلاس کنٹینر کے اندر چائلڈ
عناصر کے درمیان 4 اکائیوں کی عمودی وقفہ کاری کا اضافہ کرتی ہے۔
- ' p-4 کلاس کنٹینر کے اندر موجود مواد میں پیڈنگ کے 4 یونٹس کا اضافہ کرتی ہے۔
- ' جواز فراہم کرنا کلاس کنٹینر کے اندر چائلڈ عناصر کو سیدھ میں لاتی ہے اور انہیں یکساں طور پر تقسیم کرتی ہے۔
عناصر میں:
- ' اعتراض-کوئی نہیں۔ 'کلاس عنصر پر کسی بھی پوزیشن کا اطلاق نہیں کرتا ہے اور عنصر کو کنٹینر میں اپنی ڈیفالٹ پوزیشن پر دکھاتا ہے۔
- ' آبجیکٹ-بائیں-اوپر کلاس
عنصر کو اپنے کنٹینر کے اوپری بائیں کونے میں رکھتی ہے۔
- ' آبجیکٹ بائیں ” کلاس عنصر کو کنٹینر کے بائیں کنارے پر سیدھ میں کرتا ہے اور اسے عمودی طور پر مرکز میں رکھتا ہے۔
- ' آبجیکٹ-بائیں-نیچے ” کلاس
عنصر کو اپنے کنٹینر کے نیچے بائیں کونے میں رکھتا ہے۔
- ' آبجیکٹ ٹاپ ” کلاس عنصر کو اپنے کنٹینر کے اوپری کنارے پر رکھتا ہے اور اسے افقی طور پر مرکز میں سیٹ کرتا ہے۔
- ' آبجیکٹ سینٹر کلاس عنصر کو کنٹینر کے مرکز میں رکھتی ہے اور اسے افقی اور عمودی طور پر مرکز میں رکھتی ہے۔
- ' آبجیکٹ کے نیچے ” کلاس عنصر کو اپنے کنٹینر کے نچلے کنارے پر رکھتا ہے اور اسے افقی طور پر مرکز میں رکھتا ہے۔
- ' آبجیکٹ-دائیں-اوپر کلاس
عنصر کو کنٹینر کے اوپری دائیں کونے میں رکھتی ہے۔
- ' اعتراض-دائیں ” کلاس عنصر کو اپنے کنٹینر کے دائیں کنارے پر رکھتا ہے اور اسے عمودی طور پر مرکز میں رکھتا ہے۔
- ' آبجیکٹ-دائیں-نیچے کلاس عنصر کو اپنے کنٹینر کے نیچے دائیں کونے میں رکھتی ہے۔
آؤٹ پٹ
مندرجہ بالا ویب صفحہ میں، یہ دیکھا جا سکتا ہے کہ تمام تبدیل شدہ عنصر کے مواد کو کامیابی کے ساتھ پوزیشن میں رکھا گیا ہے۔
نتیجہ
ٹیل ونڈ میں کنٹینر کے اندر تبدیل شدہ عناصر کو پوزیشن میں رکھنے کے لیے، ' اعتراض-
” افادیت کو مطلوبہ عناصر کے ساتھ استعمال کیا جاتا ہے، جیسے کہ تصاویر۔ صارفین کو تبدیل شدہ عناصر کو پوزیشن دینے کے لیے 'آبجیکٹ- ' یوٹیلیٹی میں مخصوص پوزیشن یا سائیڈ یعنی بائیں، دائیں، یا مرکز کی وضاحت کرنے کی ضرورت ہے۔ اس مضمون نے Tailwind CSS میں کنٹینر کے اندر تبدیل شدہ عناصر کو پوزیشن میں رکھنے کے طریقہ کار کی وضاحت کی ہے۔