দ্য ' h-স্ক্রিন ” Tailwind-এ ক্লাস একটি HTML উপাদানে ভিউপোর্টের উচ্চতা নির্ধারণ করতে ব্যবহৃত হয়। ভিউপোর্ট হল ক্লায়েন্টের স্ক্রীন সাইজের আরেকটি নাম। বিকাশকারী সহজেই এটির সাহায্যে পুরো ভিউপোর্টটি নির্বাচন করতে পারে ' h-স্ক্রিন ” ক্লাস এবং তারপর সেই অনুযায়ী বেশ কয়েকটি টেলউইন্ড ক্লাস প্রয়োগ করুন।
এই নিবন্ধটি ' h-স্ক্রিন 'শ্রেণী।
টেলউইন্ডে 'এইচ-স্ক্রিন' ক্লাস ব্যবহার করে কীভাবে একটি উপাদানের ভিউপোর্ট উচ্চতা সেট করবেন?
যদি একটি উপাদান ব্যবহার করে ভিউপোর্ট উচ্চতা বরাদ্দ করা হয় ' h-স্ক্রিন ” ক্লাস, এটি স্বয়ংক্রিয়ভাবে ক্লায়েন্টের স্ক্রীন অনুযায়ী এর উচ্চতা সম্পত্তি সামঞ্জস্য করবে। টেইলউইন্ডে ভিউপোর্টের উচ্চতা ব্যবহার করার জন্য, নীচের প্রদত্ত নিয়ম অনুসরণ করুন:
< div ক্লাস = 'এইচ-স্ক্রিন' > হ্যালো < / div >
উপরের প্রদর্শন থেকে এটা স্পষ্ট যে ' h-স্ক্রিন লেআউট ডিজাইন করার জন্য অন্যান্য বিভিন্ন Tailwind ক্লাসের সাথে উপাদানটির ক্লাস অ্যাট্রিবিউটে ” ব্যবহার করা হয়।
আসুন একটি ডামি ড্যাশবোর্ড তৈরি করি এবং ড্যাশবোর্ড স্ক্রিনের সাইডবারে একটি ভিউপোর্ট উচ্চতা দিন।
< div ক্লাস = 'ফ্লেক্স' >
< div ক্লাস = 'w-56 h-স্ক্রীন গোলাকার-lg bg-নীল-600 পাঠ্য-কেন্দ্র পাঠ-সায়ান-50 py-6 পাঠ্য-2xl ফন্ট-বোল্ড' > ড্যাশবোর্ড
< উল ক্লাস = 'টেক্সট-এলজি py-8 স্পেস-y-7' >
< যে >দল < / যে >
< যে >প্রকল্প< / যে >
< যে >প্রতিবেদন < / যে >
< যে > নথি < / যে >
< / উল >
< / div >
< div ক্লাস = 'টেক্সট-সেন্টার টেক্সট-3xl py-8 ps-5' >ড্যাশবোর্ডে স্বাগতম!< / div >
< / div >
কোডের ব্যাখ্যা:
- প্রথমত, একটি ' div 'এলিমেন্ট তৈরি করা হয় 'এর ক্লাস নিয়ে ফ্লেক্স ”, এই শ্রেণীটি আবাসিক আইটেমগুলিকে একটি অনুভূমিক রেখায় সারিবদ্ধ করে।
- এর পরে, আরেকটি তৈরি করুন ' div 8px উপরের এবং নীচের প্যাডিং ব্যবহার করে py-2 ” ক্লাস করুন এবং এটি ব্যবহার করে একটি নির্দিষ্ট প্রস্থ বরাদ্দ করুন w-56 'শ্রেণী। এরপরে, উপাদানটির উচ্চতা ভিউপোর্ট উচ্চতায় সেট করুন ' h-স্ক্রিন 'শ্রেণী। পাত্রের কোণগুলি বৃত্তাকারে সেট করা হয়।
- দ্য ' bg-{color}-{number} ” ক্লাসটি ধারকটিতে একটি পটভূমির রঙ প্রদান করতে ব্যবহৃত হয়। দ্য ' পাঠ্য কেন্দ্র ” ক্লাস পাঠ্য বিষয়বস্তুকে কেন্দ্রে সারিবদ্ধ করে। পাঠ্যের জন্য ফন্ট-ওজন সেট করা হয়েছে “ সাহসী ', এবং ফন্টের আকার হল ' 2xl ”
- এরপরে, একটি ক্রমবিহীন তালিকা “< উল >' বড় ফন্ট সাইজ দিয়ে তৈরি করা হয়েছে এবং একটি ' 48px 'স্পেস-ওয়াই' টেইলউইন্ড ক্লাস ব্যবহার করে মার্জিন-টপ।
- তারপর, “< ব্যবহার করে চারটি তালিকা আইটেম তৈরি করা হয় যে >' ট্যাগ।
- আরেকটি ' div ' উপাদানটি 32px টপ-বটম এবং 20px ইনলাইন-স্টার্ট প্যাডিং দিয়ে তৈরি করা হয়েছে ' py' এবং 'ps ” ক্লাস।
উপরে বর্ণিত কোডের আউটপুট নিম্নরূপ:
উপরের আউটপুট থেকে, এটা স্পষ্ট যে ড্যাশবোর্ড সাইডবারে স্ক্রিনের ভিউপোর্ট উচ্চতা রয়েছে। এটি সবই এর উদ্দেশ্য সম্পর্কে ' h-স্ক্রিন টেলউইন্ডে ক্লাস।
উপসংহার
দ্য ' h-স্ক্রিন টেইলউইন্ডের ক্লাসটি ভিউপোর্টের উচ্চতা একটি এলিমেন্টে অর্থাৎ ক্লায়েন্টের স্ক্রিনের উচ্চতা নির্ধারণ করতে ব্যবহৃত হয়। ব্যবহার করে ' h-স্ক্রিন ” ক্লাস, উপাদান স্বয়ংক্রিয়ভাবে পর্দা উচ্চতা উত্তরাধিকারী হবে. Tailwind এ ভিউপোর্ট উচ্চতা ব্যবহার করার জন্য, ' h-স্ক্রিন ' সম্পত্তির মান হিসাবে পাস করতে হবে ' ক্লাস ” বৈশিষ্ট্য যেমন “< ডিভি ক্লাস = 'এইচ-স্ক্রিন ”>”। এই নিবন্ধটি ব্যবহার করার পদ্ধতি প্রদান করেছে ' h-স্ক্রিন টেলউইন্ডে ক্লাস।