এই নিবন্ধটি ব্যাখ্যা করবে কিভাবে Tailwind-এ তির্যক ভগ্নাংশ ব্যবহার করতে হয়।
Tailwind CSS এ তির্যক ভগ্নাংশ কিভাবে ব্যবহার করবেন?
টেলউইন্ডে তির্যক ভগ্নাংশের শ্রেণী হল একটি পূর্বনির্ধারিত সাংখ্যিক ফন্টের বৈকল্পিক যা লব এবং হরকে ছোট করে এবং একটি স্ল্যাশ দ্বারা আলাদা করে। এটি ভগ্নাংশ সংখ্যাটিকে বাকি পাঠ্য থেকে স্বতন্ত্র বলে মনে করে।
বাক্য গঠন
ব্যবহার করার সিনট্যাক্স ' তির্যক-ভগ্নাংশ 'শ্রেণীটি নিম্নরূপ:
< div ক্লাস = 'তির্যক-ভগ্নাংশ' >
< div / >
আপনি উপরের সিনট্যাক্স থেকে দেখতে পাচ্ছেন, বিকাশকারীকে 'প্রদান করতে হবে তির্যক-ভগ্নাংশ ' মধ্যে ' ক্লাস ” উপাদানের বৈশিষ্ট্য।
একটি ব্যবহারিক উদাহরণ হিসাবে 'তির্যক-ভগ্নাংশ' শ্রেণীটি ব্যবহার করা যাক। নীচের প্রদর্শনীতে, ব্যবহারকারী সাধারণ ভগ্নাংশ এবং তির্যক ভগ্নাংশের মধ্যে পার্থক্য দেখতে পারেন:
< div ক্লাস = 'bg-slate-200 text-center text-lg' >< পি > স্বাভাবিক ভগ্নাংশ: 3 / 5 6 / 3 6 / 5 < / পি >
< পি ক্লাস = 'তির্যক-ভগ্নাংশ' > তির্যক ভগ্নাংশ: 3 / 5 6 / 3 6 / 5 < / পি >
< / div >
উপরের কোডের ব্যাখ্যা নিম্নরূপ:
- দ্য ' div ' উপাদানটি তৈরি করা হয় এবং পটভূমির রঙ হিসাবে প্রদান করা হয় ' bg-{color}-{number} 'শ্রেণী।
- তারপরে, পাঠ্যটিকে একটি বড় ফন্টের আকার দেওয়া হয় এবং উপাদানটির কেন্দ্রে সারিবদ্ধ করা হয় ' টেক্সট-এলজি ' এবং ' পাঠ্য কেন্দ্র ” যথাক্রমে ক্লাস।
- পরবর্তী, দুই ' ' উপাদানগুলি তৈরি করা হয়, যেখানে দ্বিতীয়টি ' দিয়ে প্রদান করা হয় তির্যক-ভগ্নাংশ 'শ্রেণী।
আউটপুট:
উপরের আউটপুটে তির্যক ভগ্নাংশ এবং সাধারণ ভগ্নাংশের মধ্যে পার্থক্য স্পষ্টভাবে দেখা যায়।
ব্রেকপয়েন্ট সহ তির্যক ভগ্নাংশ শ্রেণী ব্যবহার করা
ব্রেকপয়েন্টগুলিকে টেলউইন্ডে মিডিয়া প্রশ্ন হিসাবে ব্যবহার করা হয়৷ নির্দিষ্ট ন্যূনতম প্রস্থ সহ পাঁচটি ডিফল্ট ব্রেকপয়েন্ট রয়েছে৷ প্রতিক্রিয়াশীল এবং গতিশীল ডিজাইন লেআউট তৈরি করতে এই ব্রেকপয়েন্টগুলি টেলউইন্ডের যে কোনও ক্লাসের সাথে ব্যবহার করা যেতে পারে।
ব্যবহার করতে ' তির্যক-ভগ্নাংশ টেলউইন্ডে একটি ব্রেকপয়েন্ট সহ ক্লাস, নিম্নলিখিত সিনট্যাক্স ব্যবহার করা হয়:
{ ব্রেকপয়েন্ট উপসর্গ } : তির্যক-ভগ্নাংশনীচের টেবিলটি Tailwind-এ বিভিন্ন ব্রেকপয়েন্টের জন্য সর্বনিম্ন প্রস্থ প্রদান করে:
| ব্রেকপয়েন্ট উপসর্গ | ন্যূনতম প্রস্থ |
|---|---|
| sm | 640px |
| মো | 768px |
| এলজি | 1024px |
| xl | 1280px |
| 2xl | 1536px |
এর সাথে ব্রেকপয়েন্ট ব্যবহার করা যাক ' তির্যক-ভগ্নাংশ ব্যবহারিকভাবে তাদের ব্যবহার বুঝতে ক্লাস:
< div ক্লাস = 'bg-slate-200 text-center text-lg md: তির্যক-ভগ্নাংশ' >3/4, 7/8, 5/4, 6/5
< / div >
উপরে প্রদত্ত কোডে, একটি div উপাদান দেওয়া আছে ' md: তির্যক-ভগ্নাংশ ' ক্লাস যা সংখ্যাসূচক ভগ্নাংশের ফন্ট পরিবর্তন করবে যখন ' মো 'ব্রেকপয়েন্টে পৌঁছে গেছে।
আউটপুট
আপনি আউটপুটে দেখতে পাচ্ছেন, ভগ্নাংশের সংখ্যাগুলি তির্যক ভগ্নাংশ ফন্টের সাথে প্রদান করা হয় যখন ' মো 'ব্রেকপয়েন্ট পৌঁছেছে:
টেলউইন্ড স্টেটের সাথে ডায়াগোনাল ফ্র্যাকশন ক্লাস ব্যবহার করা
Tailwind ডিফল্ট প্রদান করে ' রাজ্যগুলি একটি উপাদানের নকশা বৈশিষ্ট্য প্রদান করার জন্য যখন সেই নির্দিষ্ট অবস্থাটি ট্রিগার হয়। এটি ডিজাইন লেআউটটিকে আরও আকর্ষণীয় এবং গতিশীল করে তোলে। টেইলউইন্ডে একটি রাষ্ট্রের সাথে 'তির্যক-ভগ্নাংশ' শ্রেণী ব্যবহার করার জন্য, নিম্নলিখিত সিনট্যাক্স ব্যবহার করা হয়:
{ অবস্থা } : তির্যক-ভগ্নাংশTailwind দ্বারা প্রদত্ত ডিফল্ট অবস্থা নিম্নরূপ:
- হোভার: যখন ব্যবহারকারী উপাদানটির উপর কার্সার ঘোরায়।
- ফোকাস: যখন ব্যবহারকারী এটিতে নেভিগেট করে একটি উপাদানের উপর ফোকাস করে।
- সক্রিয়: ব্যবহারকারী যখন এটিতে ক্লিক করে একটি উপাদান সক্রিয় করে।
- অক্ষম করুন: যখন ব্যবহারকারীকে একটি উপাদান সক্রিয় করার অনুমতি দেওয়া হয় না।
নীচের প্রদর্শনটি ব্যবহার করার একটি বাস্তব উদাহরণ প্রদান করে ' তির্যক-ভগ্নাংশ 'এর সাথে ক্লাস' হোভার 'টেইলউইন্ডে রাজ্য:
< div ক্লাস = 'bg-slate-200 text-center text-lg hover: তির্যক-ভগ্নাংশ' >3/4, 7/8, 5/4, 6/5
< / div >
দ্য ' div 'উপরের কোডের উপাদান একটি দ্বারা প্রদান করা হয়' হোভার: তির্যক-ভগ্নাংশ ” ক্লাস যা ভগ্নাংশ সংখ্যার স্বাভাবিক ফন্টকে তির্যক ভগ্নাংশ ফন্টে পরিবর্তন করবে।
আউটপুট
আপনি আউটপুটে দেখতে পাচ্ছেন, ভগ্নাংশ সংখ্যার সাংখ্যিক ফন্ট পরিবর্তিত হয় যখন ব্যবহারকারী এটির উপর মাউস কার্সার ঘোরায়:
এটি হল Tailwind CSS-এ তির্যক ভগ্নাংশ শ্রেণী ব্যবহার করার বিষয়ে।
উপসংহার
Tailwind CSS-এ তির্যক ভগ্নাংশ ব্যবহার করতে, ' তির্যক-ভগ্নাংশ 'শ্রেণী। এই শ্রেণীটি একটি স্ল্যাশ দিয়ে লব এবং হরকে আলাদা করবে এবং তাদের ছোট করবে। ব্যবহারকারীরা ডিজাইনটিকে আরও গতিশীল করতে টেইলউইন্ডে ডিফল্ট ব্রেকপয়েন্ট এবং স্টেট সহ 'তির্যক-ভগ্নাংশ' ক্লাস ব্যবহার করতে পারেন। এই নিবন্ধটি Tailwind-এ তির্যক ভগ্নাংশ ব্যবহার করার পদ্ধতি প্রদান করেছে।