یہ بلاگ Tailwind میں متعدد عناصر کے درمیان مساوی جگہ تفویض کرنے کا خیال فراہم کرے گا۔
Tailwind میں متعدد عناصر کے درمیان مساوی جگہ کیسے تفویض کی جائے؟
صارفین 'کا استعمال کرکے عناصر کے درمیان مساوی جگہیں تفویض کرسکتے ہیں۔ space-{x/y}-{size} 'یوٹیلٹی کلاس. صارف ایک عددی قدر بتا کر x یا y-axis پر جگہ شامل کر سکتے ہیں۔ وقفہ کاری کی افادیت ضروری ہے کیونکہ یہ ویب صفحہ کو پرکشش بناتی ہے۔ اگر کسی ویب پیج میں عناصر کے درمیان مناسب وقفہ نہیں ہے، تو یہ صارفین کو اپنی طرف متوجہ نہیں کرے گا۔
آئیے گرڈ عناصر کے درمیان مساوی جگہ تفویض کرنے کے لیے کوڈ کی مثال لیں۔
طریقہ 1: ایکس محور پر جگہ تفویض کرنا۔
ایکس محور پر تفویض کردہ مساوی جگہ عنصر کے دائیں اور بائیں برابر جگہ بناتی ہے۔ ایکس محور پر جگہ تفویض کرنے کے لیے درج ذیل نحو کا استعمال کریں:
جگہ - ایکس - { سائز }
سائز کوئی بھی عددی قدر ہو سکتا ہے۔
ایکس محور پر مساوی جگہ تفویض کرنے کے لیے نیچے دیے گئے کوڈ پر غور کریں:
< جسم >< div کلاس = 'mx-4 grid grid-cols-4 space-x-4' >
< div کلاس = 'bg-green-400 h-16 rounded-lg بارڈر-2 بارڈر-سبز-800' > 1 div >
< div کلاس = 'bg-green-400 h-16 rounded-lg بارڈر-2 بارڈر-سبز-800' > 2 div >
< div کلاس = 'bg-green-400 h-16 rounded-lg بارڈر-2 بارڈر-سبز-800' > 3 div >
< div کلاس = 'bg-green-400 h-16 rounded-lg بارڈر-2 بارڈر-سبز-800' > 4 div >
div >
جسم >
اس کوڈ میں:
- ' mx-4 ” x-axis (دائیں اور بائیں) پر 4 px کا مارجن شامل کرتا ہے۔
- ' گرڈ کلاس ایک گرڈ بناتی ہے۔
- ' grid-cols-4 گرڈ میں 4 کالم بنائیں۔
- ' space-x-4 ” گرڈ کے عناصر کے درمیان 4px جگہ کا اضافہ کرتا ہے۔
- ' bg-green-400 ” پس منظر کا رنگ سبز پر سیٹ کرتا ہے۔
- ' h-16 ” اونچائی کو 16px پر سیٹ کرتا ہے۔
- ' گول-ایل جی ” کونے کو گول بناتا ہے اور سرحد کا رداس بڑا ہوتا ہے۔
- ' بارڈر-2 عنصر کے گرد 2px بارڈر بناتا ہے۔
- ' بارڈر گرین 800 سرحد کو گہرا سبز بنا دیتا ہے۔
آؤٹ پٹ
مندرجہ بالا کوڈ کے ذریعہ تخلیق کردہ آؤٹ پٹ کا جائزہ لیں:
یہ دیکھا جا سکتا ہے کہ عناصر کے درمیان ایک 4px فاصلہ تفویض کیا گیا ہے۔
طریقہ 2: y-axis پر جگہ تفویض کرنا۔
اوپر والے کوڈ میں چھوٹی تبدیلیوں کے ذریعے، اوپر والے طریقہ کی طرح y-axis پر وقفہ کاری کو تفویض کیا جا سکتا ہے۔ یہ y-axis (اوپر اور نیچے) کے ساتھ جگہیں تفویض کرتا ہے۔ اس کی ترکیب یہ ہے:
ذیل کے کوڈ کو y-axis کے ساتھ خالی جگہوں کو شامل کرنے کے لیے لاگو کیا جا سکتا ہے:
< جسم >< div کلاس = 'mx-4 my-4 space-y-4' >
< div کلاس = 'bg-green-400 h-16 rounded-lg بارڈر-2 بارڈر-سبز-800' > 1 div >
< div کلاس = 'bg-green-400 h-16 rounded-lg بارڈر-2 بارڈر-سبز-800' > 2 div >
< div کلاس = 'bg-green-400 h-16 rounded-lg بارڈر-2 بارڈر-سبز-800' > 3 div >
< div کلاس = 'bg-green-400 h-16 rounded-lg بارڈر-2 بارڈر-سبز-800' > 4 div >
div >
جسم >
اس کوڈ میں:
- ' mx-4 آؤٹ پٹ کو مزید بہتر بنانے کے لیے عناصر کے بائیں اور دائیں جانب 4px مارجن شامل کرتا ہے۔
- ' my-4 ” y-axis (اوپر اور نیچے) پر 4px مارجن کا اضافہ کرتا ہے۔
- ' space-y-4 ” y-axis (اوپر اور نیچے) پر 4px کی جگہ کا اضافہ کرتا ہے۔
آؤٹ پٹ
مندرجہ بالا کوڈ کو محفوظ کریں اور اس کے ذریعہ بنائے گئے ویب پیج کا پیش نظارہ کریں تاکہ اسپیسنگ کو دیکھیں:
یہ سب عناصر کے درمیان مساوی جگہ تفویض کرنے کے بارے میں ہے۔
نتیجہ
Tailwind میں متعدد عناصر کے درمیان مساوی جگہ تفویض کرنے کے لیے، صارف استعمال کر سکتے ہیں ' space-{x/y}-{size} یوٹیلیٹی کلاس اور ضرورت کے مطابق سائز کے طور پر ایک عددی قدر کی وضاحت کریں۔ عناصر کے درمیان مساوی فاصلہ آؤٹ پٹ کو زیادہ قابل توسیع بناتا ہے اور ناظرین ویب پیج کے ساتھ مصروف رہتے ہیں۔ اس پوسٹ نے Tailwind میں متعدد عناصر کے درمیان مساوی جگہ تفویض کرنے کا طریقہ فراہم کیا ہے۔