Tailwind میں 'overflow-auto' اور 'overflow-scroll' کا استعمال کیسے کریں؟

مثال
اس مثال میں، ہم لاگو کریں گے 'اوور فلو آٹو' کی افادیت

• 'اوور فلو آٹو' کلاس کو اسکرول بار کو شامل کرنے کے لیے استعمال کیا جاتا ہے۔ کنٹینر اور انہیں صرف اس وقت دکھائیں جب اسکرولنگ ضروری ہو۔
• 'bg-purple-300' کلاس جامنی رنگ کو کنٹینر کے پس منظر کے رنگ پر سیٹ کرتا ہے۔
• 'p-4' کلاس کنٹینر کے چاروں طرف پیڈنگ کے 4 یونٹ سیٹ کرتی ہے۔
• 'mx-16' کلاس کنٹینر کے ایکس محور پر مارجن کی 16 اکائیوں کا اطلاق کرتی ہے۔
• 'mt-5' کلاس کنٹینر کے اوپری حصے پر مارجن کی 5 اکائیوں کا اطلاق کرتی ہے۔
• 'h-32' کلاس کنٹینر کی اونچائی کو 32 یونٹس پر سیٹ کرتی ہے۔
• 'متن کا جواز' کلاس کنٹینر کے اندر موجود مواد کے متن کا جواز پیش کرتا ہے۔

آؤٹ پٹ


---





---

مندرجہ بالا آؤٹ پٹ ایک عمودی اسکرول بار دکھاتا ہے جب ٹیکسٹ اوور فلو ہوتا ہے۔ یہ اشارہ کرتا ہے کہ 'اوور فلو آٹو' افادیت کو عنصر پر کامیابی سے لاگو کیا گیا ہے۔

Tailwind میں 'overflow-scroll' کا استعمال کیسے کریں؟

یہ افادیت اسکرول بار کو کنٹینر میں شامل کرتی ہے اور ہمیشہ انہیں دکھاتی ہے چاہے اسکرولنگ ضروری نہ ہو۔ یہ تمام سمتوں میں طومار کرنے کی بھی اجازت دیتا ہے۔ Tailwind میں 'overflow-scroll' استعمال کرنے کے لیے، ایک HTML پروگرام بنائیں اور شامل کریں۔ 'اوور فلو سکرول' HTML پروگرام میں مخصوص عنصر کے لیے یوٹیلیٹی کلاس۔





نحو

< عنصر کلاس = 'اوور فلو سکرول ...' > ... عنصر >

مثال
اس مثال میں، ہم لاگو کریں گے 'اوور فلو سکرول' کی افادیت

کنٹینر: < جسم >

< div کلاس = 'overflow-scroll bg-purple-300 p-4 mx-16 mt-5 h-32 text-justify' >

Tailwind CSS مختلف 'اوور فلو' یوٹیلیٹیز فراہم کرتا ہے، جیسے 'اوور فلو-آٹو'، 'اوور فلو-اسکرول'، 'اوور فلو-ہیڈن'، 'اوور فلو-دیکھنے والا' وغیرہ۔ یہ یوٹیلیٹیز اس بات کا تعین کرتی ہیں کہ ایک مخصوص عنصر کنٹینر سے زیادہ مواد کو کس طرح ہینڈل کرتا ہے۔ سائز ہر یوٹیلیٹی منفرد فعالیت پیش کرتی ہے، تاہم، ان کا آخری مقصد ایک ہی رہتا ہے، یعنی منتخب عنصر کے اوور فلو رویے کو کنٹرول کرنا۔

< / div >

< / جسم >

یہاں، دی 'اوور فلو سکرول' کلاس کو اسکرول بار کو شامل کرنے کے لیے استعمال کیا جاتا ہے۔

کنٹینر اور ہمیشہ انہیں دکھاتا ہے۔

آؤٹ پٹ



مندرجہ بالا آؤٹ پٹ میں، دونوں عمودی اور افقی اسکرول بار دیکھے جا سکتے ہیں۔ یہ اشارہ کرتا ہے کہ 'اوور فلو سکرول' افادیت کو عنصر پر کامیابی سے لاگو کیا گیا ہے۔

نتیجہ

Tailwind میں 'overflow-auto' اور 'overflow-scroll' کو استعمال کرنے کے لیے، اسے شامل کرنے کی ضرورت ہے 'اوور فلو آٹو' اور 'اوور فلو سکرول' HTML پروگرام میں مطلوبہ عناصر کے لیے یوٹیلیٹی کلاسز۔ دونوں یوٹیلیٹی کلاسز مخصوص عناصر میں اسکرول بار شامل کرتی ہیں۔ تاہم، 'اوور فلو-آٹو' کلاس اسکرول بارز کو صرف اس وقت دکھاتی ہے جب اسکرولنگ ضروری ہو جبکہ 'اوور فلو-اسکرول' کلاس انہیں ہمیشہ دکھاتی ہے چاہے اسکرولنگ ضروری نہ ہو۔ اس تحریر نے Tailwind میں 'overflow-auto' اور 'overflow-scroll' استعمال کرنے کے طریقوں کی وضاحت کی ہے۔