ধরুন একজন ব্যবহারকারীকে তাদের ওয়েবপৃষ্ঠার জন্য আইটেমগুলির একটি তালিকা তৈরি করতে হবে। ডিজাইনিং প্রক্রিয়া সহজতর করার জন্য, Tailwind বিভিন্ন তালিকা-শৈলীর ক্লাস প্রদান করে যা তালিকার উপাদানগুলির ধরন, অবস্থান এবং প্রান্তিককরণ পরিবর্তনের জন্য ব্যবহার করা যেতে পারে।
এই নিবন্ধটি Tailwind-এ তালিকা শৈলীর ধরন সেট করার পদ্ধতি প্রদান করবে।
কিভাবে Tailwind এ তালিকা শৈলীর ধরন সেট করবেন?
Tailwind তিনটি ডিফল্ট তালিকা শৈলী প্রকার প্রদান করে। তারা প্রদান করতে ব্যবহৃত হয় ' চিহ্নিতকারী তালিকা আইটেম জন্য শৈলী. তিনটি ডিফল্ট তালিকা শৈলী টাইপ ক্লাস নিম্নরূপ বর্ণনা করা হয়েছে:
- তালিকা-ডিস্ক: এই ক্লাসটি তালিকা চিহ্নিতকারী হিসাবে রাউন্ড বুলেট পয়েন্ট প্রদান করবে।
- তালিকা-দশমিক: এই শ্রেণীটি তালিকা চিহ্নিতকারী হিসাবে দশমিক সংখ্যা প্রদান করবে।
- তালিকা-কোনটি নয়: এই ক্লাসটি আইটেমগুলি থেকে যেকোনো তালিকা চিহ্নিতকারীকে সরিয়ে দেবে।
তালিকা শৈলী প্রকারগুলি ব্যবহার করার জন্য সিনট্যাক্স নিম্নরূপ:
< উল ক্লাস = 'তালিকা-{স্টাইল}' > < / উল >
আরও ভালভাবে বোঝার জন্য, নীচের-প্রদত্ত প্রদর্শনটি আইটেমগুলিকে তালিকাভুক্ত করতে বিভিন্ন মার্কার শৈলী প্রদান করতে উপরে-সংজ্ঞায়িত বাক্য গঠন ব্যবহার করবে। এই উদাহরণে, Tailwind-এ ডিফল্ট তালিকা শৈলী ক্লাস ব্যবহার করে তিনটি তালিকা উপাদান তৈরি করা হবে এবং বিভিন্ন মার্কার শৈলীর সাথে প্রদান করা হবে:
< পি ক্লাস = 'টেক্সট-সেন্টার টেক্সট-এক্সএল ফন্ট-বোল্ড' > ডিফল্ট ভিন্ন তালিকা শৈলী টেইলউইন্ডে প্রকারগুলি< / পি >
< br >
< div ক্লাস = 'flex justify-center space-x-20 bg-slate-100 rounded-lg mx-4 p-2' >
< উল ক্লাস = 'তালিকা-ডিস্ক' >
তালিকা # 1
< যে >এটি প্রথম আইটেম< / যে >
< যে >এটি দ্বিতীয় আইটেম< / যে >
< যে >এটি তৃতীয় আইটেম< / যে >
< / উল >
< উল ক্লাস = 'তালিকা-দশমিক' >
তালিকা # 2
< যে >এটি প্রথম আইটেম< / যে >
< যে >এটি দ্বিতীয় আইটেম< / যে >
< যে >এটি তৃতীয় আইটেম< / যে >
< / উল >
< উল ক্লাস = 'তালিকা-কিছুই নয়' >
তালিকা # 3
< যে >এটি প্রথম আইটেম< / যে >
< যে >এটি দ্বিতীয় আইটেম< / যে >
< যে >এটি তৃতীয় আইটেম< / যে >
< / উল >
< / div >
উপরের কোডের ব্যাখ্যা নিম্নরূপ:
- একটি ' ' উপাদান একটি ' দিয়ে তৈরি করা হয় xl 'ফন্টের আকার এবং একটি' সাহসী হরফের ওজন। উপাদানটির পাঠ্য বিষয়বস্তু কেন্দ্রে ' ব্যবহার করে অবস্থান করা হয় পাঠ্য কেন্দ্র 'শ্রেণী।
- একটি লাইন বিরতির পরে, একটি ' ' উপাদান তৈরি করা হয় এবং একটি ' ফ্লেক্স 'শ্রেণী। এটি একটি ধারক তৈরি করবে যা শিশু আইটেমগুলিকে অনুভূমিকভাবে সারিবদ্ধ করবে।
- দ্য ' ন্যায্যতা-কেন্দ্র ” ক্লাস আইটেমগুলিকে পাত্রের কেন্দ্রে রাখবে।
- দ্য ' স্পেস-এক্স-{সাইজ} ” ক্লাস আইটেমগুলির মধ্যে অনুভূমিক স্থান প্রদান করে।
- দ্য ' bg-{color}-{number} ” ক্লাস নির্দিষ্ট রঙে ধারকটির পটভূমি সেট করে।
- দ্য ' বৃত্তাকার-lg ” ক্লাস পাত্রের কোণগুলিকে বৃত্তাকার করে তোলে।
- দ্য ' mx-4 ” ক্লাস ফ্লেক্স পাত্রে অনুভূমিক মার্জিন প্রদান করে।
- দ্য ' p-2 ” ক্লাস ফ্লেক্স পাত্রে প্যাডিং প্রদান করে।
- এরপরে, তিনটি তালিকা উপাদান তৈরি করা হয় এবং বিভিন্ন তালিকা শৈলীর ধরন দিয়ে দেওয়া হয় “ তালিকা-{টাইপ} 'শ্রেণী।
আউটপুট:
নীচের আউটপুট থেকে, এটি দেখা যায় যে প্রথম তালিকাটি বুলেট পয়েন্ট ব্যবহার করে, দ্বিতীয়টি দশমিক সংখ্যা ব্যবহার করে এবং তৃতীয়টি কোনও আইটেম মার্কার ব্যবহার করে না।
টেলউইন্ডে স্টেট ভেরিয়েন্টের সাথে লিস্ট স্টাইল ক্লাস ব্যবহার করা
ডিজাইনটিকে আরও গতিশীল করতে Tailwind-এ ডিফল্ট স্টেট ভেরিয়েন্টের সাথে তালিকা শৈলী ক্লাস ব্যবহার করা যেতে পারে। হোভার, ফোকাস, এবং সক্রিয় অবস্থা ভেরিয়েন্ট ব্যবহার করে, ব্যবহারকারী যখনই নির্দিষ্ট অবস্থা ট্রিগার হয় তখনই তালিকা আইটেমগুলির মার্কার শৈলী পরিবর্তন করতে পারে। স্টেট ভেরিয়েন্টের সাথে লিস্ট স্টাইল ক্লাস ব্যবহার করার জন্য সিনট্যাক্স নিম্নরূপ:
< উল ক্লাস = '{state}:list-{style}...' > < / উল >এখানে একটি 'হোভার' অবস্থার সাথে তালিকা শৈলী টাইপ ব্যবহার করার একটি উদাহরণ রয়েছে, যেখানে ব্যবহারকারী তালিকা ব্লকের উপর ঘোরার মাধ্যমে মার্কার শৈলী পরিবর্তন করতে পারেন:
< পি ক্লাস = 'টেক্সট-সেন্টার টেক্সট-এক্সএল ফন্ট-বোল্ড' >মার্কার স্টাইল পরিবর্তন করতে তালিকা ব্লকের উপরে কার্সারটি ঘোরান< / পি >
< br >
< div ক্লাস = 'flex justify-center space-x-20 bg-slate-100 rounded-lg mx-4 p-2' >
< উল ক্লাস = 'তালিকা-ডিস্ক হোভার: তালিকা-দশমিক' >
তালিকা # 1
< যে >এটি প্রথম আইটেম< / যে >
< যে >এটি দ্বিতীয় আইটেম< / যে >
< যে >এটি তৃতীয় আইটেম< / যে >
< / উল >
< / div >উপরের কোডে, তালিকাটি ' তালিকা-ডিস্ক ” ডিফল্ট তালিকা শৈলী টাইপ হিসাবে ক্লাস। যাইহোক, ব্যবহার করে ' হোভার:তালিকা-দশমিক ” ক্লাস, ব্যবহারকারী যখন তালিকা ব্লকের উপর মাউস কার্সার ঘোরায় তখন তালিকা শৈলীর ধরন পরিবর্তন করা হবে।
আউটপুট:
নীচের আউটপুটটি দেখায় যে তালিকার ধরন শৈলী বুলেটযুক্ত তালিকা থেকে একটি সংখ্যাযুক্ত তালিকায় পরিবর্তিত হয় যখন কার্সারটি তালিকা ব্লকের উপর ঘোরে।
টেলউইন্ডে ব্রেকপয়েন্ট সহ তালিকা শৈলী ক্লাস ব্যবহার করা
ব্রেকপয়েন্টগুলি বিভিন্ন স্ক্রিনের আকারের জন্য লেআউটের প্রতিক্রিয়াশীল ডিজাইনের জন্য ব্যবহৃত হয়। Tailwind দ্বারা প্রদত্ত পাঁচটি ডিফল্ট ব্রেকপয়েন্ট হল sm, md, lg, xl এবং 2xl। নিম্নলিখিত সিনট্যাক্স একটি ব্রেকপয়েন্ট সহ তালিকা প্রকার শৈলী ক্লাস প্রদানের জন্য ব্যবহৃত হয়:
< উল ক্লাস = '{breakpoint}:list-{style}...' > < / উল >এখানে একটি 'এর সাথে তালিকা শৈলী টাইপ ব্যবহার করার একটি উদাহরণ রয়েছে মো ” ব্রেকপয়েন্ট, যেখানে স্ক্রীনের আকার “md” ব্রেকপয়েন্টে পৌঁছালে মার্কার শৈলী পরিবর্তন হবে:
< পি ক্লাস = 'টেক্সট-সেন্টার টেক্সট-এক্সএল ফন্ট-বোল্ড' > স্ক্রীন বাড়ান আকার মার্কার স্টাইল পরিবর্তন করতে< / পি >
< br >
< div ক্লাস = 'flex justify-center space-x-20 bg-slate-100 rounded-lg mx-4 p-2' >
< উল ক্লাস = 'তালিকা-ডিস্ক এমডি:তালিকা-দশমিক' >
তালিকা # 1
< যে >এটি প্রথম আইটেম< / যে >
< যে >এটি দ্বিতীয় আইটেম< / যে >
< যে >এটি তৃতীয় আইটেম< / যে >
< / উল >
< / div >উপরের কোডে, তালিকাটি ' তালিকা-ডিস্ক ” ডিফল্ট শৈলী হিসাবে ক্লাস। যাইহোক, ব্যবহার করে ' md:তালিকা-দশমিক ” ক্লাস লিস্ট স্টাইল টাইপ “md” স্ক্রীন সাইজের জন্য পরিবর্তিত হবে।
আউটপুট:
আপনি নীচের আউটপুটে দেখতে পাচ্ছেন, যখন স্ক্রীনের আকার “এ পৌঁছায় তখন তালিকা শৈলীর ধরন ডিস্ক থেকে দশমিকে পরিবর্তিত হয়। মো 'ব্রেকপয়েন্ট।
তা হল Tailwind-এ লিস্ট স্টাইল টাইপ সেট করা।
উপসংহার
Tailwind একটি উপাদানের তালিকা শৈলী পরিবর্তন করার জন্য তিনটি পূর্ব-সংজ্ঞায়িত তালিকা শৈলী ধরনের ক্লাস প্রদান করে। দ্য ' তালিকা-ডিস্ক ” ক্লাস আইটেম তালিকাভুক্ত করার জন্য বুলেট পয়েন্ট প্রদান করে। দ্য ' তালিকা-দশমিক ” ক্লাস আইটেম তালিকার জন্য নম্বর প্রদান করে. দ্য ' তালিকা-কোনটি নয় ” ক্লাস একটি তালিকা তৈরি করে যা কোনো আইটেম মার্কার ব্যবহার করে না। এই নিবন্ধটি Tailwind-এ তালিকা শৈলীর ধরন সেট করার পদ্ধতি প্রদান করেছে।