এই লেখাটি চিত্রিত করবে:
Tailwind এ কিভাবে 'ওভারফ্লো-অটো' ব্যবহার করবেন?
দ্য ' ওভারফ্লো-অটো ” ক্লাস স্বয়ংক্রিয়ভাবে স্ক্রলবার যোগ করে যখন বিষয়বস্তু ওভারফ্লো হয়। বিষয়বস্তু ওভারফ্লো না হলে এটি স্ক্রলবার দেখায় না। টেলউইন্ডে 'ওভারফ্লো-অটো' ব্যবহার করতে, একটি HTML প্রোগ্রাম তৈরি করুন এবং যোগ করুন ' ওভারফ্লো-অটো HTML প্রোগ্রামের পছন্দসই উপাদানের জন্য ইউটিলিটি ক্লাস।
বাক্য গঠন
< উপাদান ক্লাস = 'ওভারফ্লো-অটো...' > ... উপাদান >
উদাহরণ
এই উদাহরণে, আমরা প্রয়োগ করব 'ওভারফ্লো-অটো' উপযোগিতা
ধারক: < শরীর >
< div ক্লাস = 'ওভারফ্লো-অটো bg-বেগুনি-300 p-4 mx-16 mt-5 h-32 text-justify' >
Tailwind CSS বিভিন্ন 'ওভারফ্লো' ইউটিলিটি প্রদান করে, যেমন 'ওভারফ্লো-অটো', 'ওভারফ্লো-স্ক্রোল', 'ওভারফ্লো-হিডেন', 'ওভারফ্লো-দৃশ্যমান' ইত্যাদি। আকার প্রতিটি ইউটিলিটি অনন্য কার্যকারিতা প্রদান করে, তবে, তাদের শেষ লক্ষ্য একই থাকে, যেমন নির্বাচিত উপাদানের ওভারফ্লো আচরণ নিয়ন্ত্রণ করা।
< / div >
< / শরীর >
- 'ওভারফ্লো-অটো' ক্লাসে স্ক্রলবার যোগ করতে ব্যবহৃত হয় ধারক এবং স্ক্রোল করার প্রয়োজন হলেই তাদের দেখান।
- 'বিজি-বেগুনি-300' ক্লাস পাত্রের পটভূমির রঙে বেগুনি রঙ সেট করে।
- 'p-4' ক্লাস কন্টেইনারের সব দিকে প্যাডিংয়ের 4 ইউনিট সেট করে।
- 'mx-16' ক্লাস ধারকটির x-অক্ষে মার্জিনের 16 একক প্রয়োগ করে।
- 'mt-5' ক্লাসটি কন্টেইনারের শীর্ষে মার্জিনের 5 ইউনিট প্রয়োগ করে।
- 'h-32' ক্লাস ধারকটির উচ্চতা 32 ইউনিটে সেট করে।
- 'টেক্সট-জাস্টিফাই' ক্লাস কন্টেইনারের ভিতরের বিষয়বস্তুর পাঠ্যকে ন্যায়সঙ্গত করে।
আউটপুট
উপরের আউটপুটটি একটি উল্লম্ব স্ক্রলবার দেখায় যখন টেক্সট ওভারফ্লো হয়। এটি নির্দেশ করে যে 'ওভারফ্লো-অটো' ইউটিলিটি উপাদানটিতে সফলভাবে প্রয়োগ করা হয়েছে।
Tailwind এ কিভাবে 'ওভারফ্লো-স্ক্রোল' ব্যবহার করবেন?
এই ইউটিলিটি কন্টেইনারে স্ক্রলবার যোগ করে এবং স্ক্রল করার প্রয়োজন না হলেও সর্বদা সেগুলি দেখায়। এটি সব দিকে স্ক্রল করার অনুমতি দেয়। Tailwind-এ 'ওভারফ্লো-স্ক্রোল' ব্যবহার করতে, একটি HTML প্রোগ্রাম তৈরি করুন এবং যোগ করুন 'ওভারফ্লো-স্ক্রোল' এইচটিএমএল প্রোগ্রামের নির্দিষ্ট উপাদানের ইউটিলিটি ক্লাস।
বাক্য গঠন
< উপাদান ক্লাস = 'ওভারফ্লো-স্ক্রোল...' > ... উপাদান > উদাহরণ
এই উদাহরণে, আমরা প্রয়োগ করব 'ওভারফ্লো-স্ক্রোল' উপযোগিতা
< div ক্লাস = 'ওভারফ্লো-স্ক্রোল bg-বেগুনি-300 p-4 mx-16 mt-5 h-32 text-justify' >
Tailwind CSS বিভিন্ন 'ওভারফ্লো' ইউটিলিটি প্রদান করে, যেমন 'ওভারফ্লো-অটো', 'ওভারফ্লো-স্ক্রোল', 'ওভারফ্লো-হিডেন', 'ওভারফ্লো-দৃশ্যমান' ইত্যাদি। আকার প্রতিটি ইউটিলিটি অনন্য কার্যকারিতা প্রদান করে, তবে, তাদের শেষ লক্ষ্য একই থাকে, যেমন নির্বাচিত উপাদানের ওভারফ্লো আচরণ নিয়ন্ত্রণ করা।
< / div >
< / শরীর >
এখানে 'ওভারফ্লো-স্ক্রোল' ক্লাসে স্ক্রলবার যোগ করতে ব্যবহৃত হয়
ধারক এবং সর্বদা তাদের দেখায়।আউটপুট
উপরের আউটপুটে, উল্লম্ব এবং অনুভূমিক উভয় স্ক্রলবার দেখা যায়। এটি নির্দেশ করে যে 'ওভারফ্লো-স্ক্রোল' ইউটিলিটি উপাদানটিতে সফলভাবে প্রয়োগ করা হয়েছে।
উপসংহার
টেলউইন্ডে 'ওভারফ্লো-অটো' এবং 'ওভারফ্লো-স্ক্রোল' ব্যবহার করতে, এটি যোগ করতে হবে 'ওভারফ্লো-অটো' এবং 'ওভারফ্লো-স্ক্রোল' এইচটিএমএল প্রোগ্রামের পছন্দসই উপাদানগুলিতে ইউটিলিটি ক্লাস। উভয় ইউটিলিটি ক্লাসই নির্দিষ্ট উপাদানগুলিতে স্ক্রলবার যুক্ত করে। যাইহোক, 'ওভারফ্লো-অটো' ক্লাস শুধুমাত্র তখনই স্ক্রলবার দেখায় যখন স্ক্রল করা প্রয়োজন হয় যখন 'ওভারফ্লো-স্ক্রোল' ক্লাস সবসময় সেগুলি দেখায় এমনকি স্ক্রলিং প্রয়োজনীয় না হলেও। এই লেখাটি টেলউইন্ডে 'ওভারফ্লো-অটো' এবং 'ওভারফ্লো-স্ক্রোল' ব্যবহার করার পদ্ধতিগুলিকে চিত্রিত করেছে৷