عمودی اور افقی سکرولنگ ماؤس، ٹچ پیڈ، یا انگلی کا استعمال کرتے ہوئے ویب صفحہ کو نیویگیٹ کرنے کے طریقے ہیں۔ عمودی سکرولنگ کا استعمال اس وقت کیا جاتا ہے جب کسی عنصر کا مواد کنٹینر کی اونچائی سے زیادہ ہو۔ جب کہ افقی اسکرولنگ کا استعمال اس وقت کیا جاتا ہے جب کسی عنصر کے اندر موجود مواد کنٹینر کی چوڑائی سے زیادہ ہو۔ عمودی سکرولنگ صارفین کو ویب صفحہ کو اوپر اور نیچے منتقل کرنے کے قابل بناتی ہے جبکہ افقی سکرولنگ صفحہ کو بائیں اور دائیں منتقل کرنے کی اجازت دیتی ہے۔ Tailwind CSS ویب صفحات پر عمودی اور افقی سکرولنگ کو فعال کرنے کے لیے یوٹیلیٹی کلاسز فراہم کرتا ہے۔
یہ مضمون مثال دے گا:
Tailwind میں عمودی سکرولنگ کو کیسے فعال کیا جائے؟
Tailwind میں عمودی سکرولنگ کو فعال کرنے کے لیے، ' overflow-y-scroll HTML پروگرام میں مطلوبہ عنصر کے ساتھ یوٹیلیٹی کلاس۔ یہ عمودی اسکرولنگ کی اجازت دیتا ہے اور ہمیشہ اسکرول بار دکھاتا ہے جب تک کہ صارف نے اپنے سسٹم کی ترتیبات میں 'ہمیشہ دکھائی دینے والے' اسکرول بار کو غیر فعال نہ کر دیا ہو۔
نحو
< عنصر کلاس = 'overflow-y-scroll...' > ... عنصر >
مثال: عمودی سکرولنگ کو فعال کرنا
اس مثال میں، ہم کالم میں کچھ فلیکس آئٹمز کے ساتھ ایک فلیکس کنٹینر بنائیں گے اور ' overflow-y-scroll اس کی افادیت:
< جسم >
< div کلاس = 'flex flex-col overflow-y-scroll bg-purple-700 p-4 mx-14 mt-5 h-36' >
< div کلاس = 'bg-yellow-400 p-2 m-2' > 1 div >
< div کلاس = 'bg-yellow-400 p-2 m-2' > 2 div >
< div کلاس = 'bg-yellow-400 p-2 m-2' > 3 div >
< div کلاس = 'bg-yellow-400 p-2 m-2' > 4 div >
< div کلاس = 'bg-yellow-400 p-2 m-2' > 5 div >
< div کلاس = 'bg-yellow-400 p-2 m-2' > 6 div >
div >
جسم >
یہاں، والدین میں
- ' فلیکس کلاس کا استعمال ایک لچکدار ترتیب بنا کر دستیاب جگہ کی بنیاد پر چائلڈ عنصر کے سائز کو ایڈجسٹ کرنے کے لیے کیا جاتا ہے۔
- ' flex-col کلاس کنٹینر کی فلیکس سمت کو کالم پر سیٹ کرتی ہے۔
- ' overflow-y-scroll کلاس عمودی سکرولنگ کو قابل بناتی ہے۔
- ' bg-purple-700 'کلاس جامنی رنگ کو کنٹینر کے پس منظر پر سیٹ کرتی ہے۔
- ' p-4 کلاس کنٹینر کے چاروں طرف پیڈنگ کے 4 یونٹ سیٹ کرتی ہے۔
- ' mx-14 کلاس کنٹینر کے ایکس محور پر مارجن کی 14 اکائیوں کا اطلاق کرتی ہے۔
- ' mt-5 کلاس کنٹینر کے اوپری حصے پر مارجن کی 5 اکائیوں کا اطلاق کرتی ہے۔
- ' h-36 کلاس کنٹینر کی اونچائی کو 36 یونٹس پر سیٹ کرتی ہے۔
بچے میں
- ' bg-yellow-400 کلاس گرڈ آئٹمز کے پس منظر کو پیلے رنگ پر سیٹ کرتی ہے۔
- ' p-2 ” کلاس فلیکس آئٹمز کے اندر موجود مواد میں پیڈنگ کے 3 یونٹس کا اضافہ کرتی ہے۔
- ' m-2 کلاس 2 یونٹ مارجن کو فلیکس آئٹمز پر سیٹ کرتی ہے۔
آؤٹ پٹ
مندرجہ بالا آؤٹ پٹ میں، یہ دیکھا جا سکتا ہے کہ عمودی سکرولنگ کو کامیابی سے فعال کیا گیا ہے.
ٹیل ونڈ میں افقی اسکرولنگ کو کیسے فعال کیا جائے؟
Tailwind میں افقی سکرولنگ کو فعال کرنے کے لیے، ' overflow-x-scroll HTML پروگرام میں مخصوص عنصر کے ساتھ یوٹیلیٹی کلاس۔ یہ افقی اسکرولنگ کو قابل بناتا ہے اور ہمیشہ اسکرول بار دکھاتا ہے جب تک کہ صارف نے اپنے سسٹم سیٹنگز میں 'ہمیشہ دکھائی دینے والے' اسکرول بار کو غیر فعال نہ کر دیا ہو۔
نحو
< عنصر کلاس = 'اوور فلو-ایکس اسکرول ...' > ... عنصر >
مثال: افقی سکرولنگ کو فعال کرنا
اس مثال میں، ہم لگاتار کچھ فلیکس اشیاء کے ساتھ ایک فلیکس کنٹینر بنائیں گے اور ' overflow-x-scroll اس کی افادیت:
< جسم >< div کلاس = 'flex flex-row overflow-x-scroll space-x-24 bg-purple-700 p-4 mx-14 mt-5 h-36' >
< div کلاس = 'bg-yellow-400 p-2 m-2' > 1 div >
< div کلاس = 'bg-yellow-400 p-2 m-2' > 2 div >
< div کلاس = 'bg-yellow-400 p-2 m-2' > 3 div >
< div کلاس = 'bg-yellow-400 p-2 m-2' > 4 div >
< div کلاس = 'bg-yellow-400 p-2 m-2' > 5 div >
< div کلاس = 'bg-yellow-400 p-2 m-2' > 6 div >
div >
جسم >
یہاں والدین
آؤٹ پٹ
مندرجہ بالا آؤٹ پٹ اس بات کی نشاندہی کرتا ہے کہ افقی سکرولنگ کو کامیابی سے فعال کر دیا گیا ہے۔
نتیجہ
Tailwind میں عمودی اور افقی سکرولنگ کو فعال کرنے کے لیے، ' overflow-y-scroll 'اور' overflow-x-scroll یوٹیلیٹی کلاسز بالترتیب استعمال ہوتے ہیں۔ یہ افادیتیں HTML پروگرام میں مطلوبہ عناصر پر لاگو ہوتی ہیں تاکہ عمودی اور افقی اسکرولنگ کو فعال کیا جا سکے اور ہمیشہ اسکرول بارز دکھائی جائیں۔ اس مضمون نے Tailwind میں عمودی اور افقی اسکرولنگ کو فعال کرنے کا طریقہ دکھایا ہے۔