উল্লম্ব এবং অনুভূমিক স্ক্রোলিং হল একটি মাউস, একটি টাচপ্যাড বা একটি আঙুল ব্যবহার করে একটি ওয়েব পৃষ্ঠা নেভিগেট করার উপায়। উল্লম্ব স্ক্রোলিং ব্যবহার করা হয় যখন একটি উপাদানের বিষয়বস্তু পাত্রের উচ্চতা অতিক্রম করে। অনুভূমিক স্ক্রোলিং ব্যবহার করা হয় যখন একটি উপাদানের মধ্যে বিষয়বস্তু কন্টেইনারের প্রস্থ অতিক্রম করে। উল্লম্ব স্ক্রোলিং ব্যবহারকারীদের ওয়েব পৃষ্ঠাটিকে উপরে এবং নীচে সরাতে সক্ষম করে যখন অনুভূমিক স্ক্রোলিং পৃষ্ঠাটিকে বাম এবং ডানে সরানোর অনুমতি দেয়। টেলউইন্ড সিএসএস ওয়েব পৃষ্ঠাগুলিতে উল্লম্ব এবং অনুভূমিক স্ক্রলিং সক্ষম করতে ইউটিলিটি ক্লাস সরবরাহ করে।
এই নিবন্ধটি উদাহরণ দেবে:
কিভাবে Tailwind এ উল্লম্ব স্ক্রোলিং সক্ষম করবেন?
Tailwind এ উল্লম্ব স্ক্রোলিং সক্ষম করতে, ' overflow-y-স্ক্রোল HTML প্রোগ্রামে পছন্দসই উপাদান সহ ইউটিলিটি ক্লাস। এটি উল্লম্ব স্ক্রল করার অনুমতি দেয় এবং সর্বদা স্ক্রলবার দেখায় যদি না ব্যবহারকারী তাদের সিস্টেম সেটিংসে 'সর্বদা-দৃশ্যমান' স্ক্রলবারগুলি নিষ্ক্রিয় না করে থাকে।
বাক্য গঠন
< উপাদান ক্লাস = 'ওভারফ্লো-ওয়াই-স্ক্রোল ...' > ... উপাদান >
উদাহরণ: উল্লম্ব স্ক্রোলিং সক্ষম করা
এই উদাহরণে, আমরা একটি কলামে কিছু ফ্লেক্স আইটেম সহ একটি ফ্লেক্স কন্টেইনার তৈরি করব এবং ' overflow-y-স্ক্রোল 'এর উপযোগিতা:
< শরীর >
< div ক্লাস = 'flex flex-col overflow-y-scroll bg-purple-700 p-4 mx-14 mt-5 h-36' >
< div ক্লাস = 'bg-হলুদ-400 p-2 m-2' > 1 div >
< div ক্লাস = 'bg-হলুদ-400 p-2 m-2' > 2 div >
< div ক্লাস = 'bg-হলুদ-400 p-2 m-2' > 3 div >
< div ক্লাস = 'bg-হলুদ-400 p-2 m-2' > 4 div >
< div ক্লাস = 'bg-হলুদ-400 p-2 m-2' > 5 div >
< div ক্লাস = 'bg-হলুদ-400 p-2 m-2' > 6 div >
div >
শরীর >
এখানে, অভিভাবক
- ' ফ্লেক্স ” ক্লাসটি একটি নমনীয় লেআউট তৈরি করে উপলব্ধ স্থানের ভিত্তিতে শিশু উপাদানের আকারগুলি সামঞ্জস্য করতে ব্যবহৃত হয়।
- ' flex-col ” ক্লাস কন্টেইনারের ফ্লেক্স-দিক একটি কলামে সেট করে।
- ' overflow-y-স্ক্রোল ” ক্লাস উল্লম্ব স্ক্রোলিং সক্ষম করে।
- ' bg-বেগুনি-700 ” ক্লাস পাত্রের পটভূমিতে বেগুনি রঙ সেট করে।
- ' p-4 ” ক্লাস কন্টেইনারের সব দিকে প্যাডিংয়ের 4 ইউনিট সেট করে।
- ' mx-14 ” ক্লাস ধারকটির x-অক্ষে মার্জিনের 14 একক প্রয়োগ করে।
- ' mt-5 ” ক্লাসটি পাত্রের শীর্ষে মার্জিনের 5 ইউনিট প্রয়োগ করে।
- ' h-36 ” ক্লাস ধারকটির উচ্চতা 36 ইউনিটে সেট করে।
সন্তানের মধ্যে
- ' bg-হলুদ-400 ” ক্লাস গ্রিড আইটেমগুলির পটভূমিকে হলুদে সেট করে।
- ' p-2 ” ক্লাস ফ্লেক্স আইটেমগুলির ভিতরে সামগ্রীতে প্যাডিংয়ের 3 ইউনিট যোগ করে।
- ' m-2 ” ক্লাস ফ্লেক্স আইটেমগুলিতে 2 ইউনিট মার্জিন সেট করে।
আউটপুট
উপরের আউটপুটে, এটি দেখা যায় যে উল্লম্ব স্ক্রোলিং সফলভাবে সক্ষম করা হয়েছে।
কিভাবে Tailwind এ অনুভূমিক স্ক্রোলিং সক্ষম করবেন?
টেলউইন্ডে অনুভূমিক স্ক্রলিং সক্ষম করতে, ' ওভারফ্লো-এক্স-স্ক্রোল HTML প্রোগ্রামে নির্দিষ্ট উপাদান সহ ইউটিলিটি ক্লাস। এটি অনুভূমিক স্ক্রলিং সক্ষম করে এবং সর্বদা স্ক্রলবার দেখায় যদি না ব্যবহারকারী তাদের সিস্টেম সেটিংসে 'সর্বদা-দৃশ্যমান' স্ক্রলবারগুলি নিষ্ক্রিয় না করে থাকে।
বাক্য গঠন
< উপাদান ক্লাস = 'ওভারফ্লো-এক্স-স্ক্রোল ...' > ... উপাদান >
উদাহরণ: অনুভূমিক স্ক্রোলিং সক্ষম করা
এই উদাহরণে, আমরা একটি সারিতে কিছু ফ্লেক্স আইটেম সহ একটি ফ্লেক্স কন্টেইনার তৈরি করব এবং প্রয়োগ করব “ ওভারফ্লো-এক্স-স্ক্রোল 'এর উপযোগিতা:
< শরীর >< div ক্লাস = 'ফ্লেক্স ফ্লেক্স-সারি ওভারফ্লো-x-স্ক্রোল স্পেস-x-24 bg-বেগুনি-700 p-4 mx-14 mt-5 h-36' >
< div ক্লাস = 'bg-হলুদ-400 p-2 m-2' > 1 div >
< div ক্লাস = 'bg-হলুদ-400 p-2 m-2' > 2 div >
< div ক্লাস = 'bg-হলুদ-400 p-2 m-2' > 3 div >
< div ক্লাস = 'bg-হলুদ-400 p-2 m-2' > 4 div >
< div ক্লাস = 'bg-হলুদ-400 p-2 m-2' > 5 div >
< div ক্লাস = 'bg-হলুদ-400 p-2 m-2' > 6 div >
div >
শরীর >
এখানে অভিভাবক
আউটপুট
উপরের আউটপুটটি নির্দেশ করে যে অনুভূমিক স্ক্রোলিং সফলভাবে সক্ষম করা হয়েছে।
উপসংহার
Tailwind এ উল্লম্ব এবং অনুভূমিক স্ক্রলিং সক্ষম করতে, ' overflow-y-স্ক্রোল ' এবং ' ওভারফ্লো-এক্স-স্ক্রোল ” ইউটিলিটি ক্লাস যথাক্রমে ব্যবহৃত হয়। উল্লম্ব এবং অনুভূমিক স্ক্রলিং সক্ষম করতে এবং সর্বদা স্ক্রলবারগুলি দেখাতে এই ইউটিলিটিগুলি HTML প্রোগ্রামের পছন্দসই উপাদানগুলিতে প্রয়োগ করা হয়। এই নিবন্ধটি Tailwind-এ উল্লম্ব এবং অনুভূমিক স্ক্রলিং সক্ষম করার পদ্ধতি প্রদর্শন করেছে।