এই নিবন্ধটি Tailwind-এ একটি তালিকা ব্লকের তালিকা-স্টাইল চিত্র সেট করার পদ্ধতি প্রদান করবে।
Tailwind-এ লিস্ট স্টাইল ইমেজ ক্লাস কিভাবে সেট করবেন?
টেইলউইন্ডে তালিকা চিহ্নিতকারী হিসাবে একটি চিত্র প্রদানের জন্য তালিকা শৈলী চিত্র ক্লাস ব্যবহার করা হয়। ডিফল্টরূপে, Tailwind শুধুমাত্র ' তালিকা-ছবি-কোনটি নয় ” ক্লাস যা শুধুমাত্র একটি তালিকার জন্য পূর্বে সেট করা কোনো ইমেজ মার্কার সরানোর জন্য ব্যবহার করা যেতে পারে।
বাক্য গঠন
Tailwind-এ তালিকা শৈলী চিত্র শ্রেণী ব্যবহার করার জন্য বাক্য গঠন নিম্নরূপ:
< উল ক্লাস = 'তালিকা-চিত্র-[url({চিত্রের URL})]' > < / উল >
এই সিনট্যাক্স তালিকা উপাদানের জন্য একটি মার্কার হিসাবে নির্দিষ্ট চিত্র প্রদান করে।
< উল ক্লাস = 'তালিকা-চিত্র-কোনটিই নয়' > < / উল >
এই সিনট্যাক্স একটি তালিকা উপাদানের জন্য চিহ্নিতকারী হিসাবে পূর্বে সেট করা কোনো ছবি সরিয়ে দেয়।
একটি ক্রমবিহীন তালিকায় একটি চিত্রকে মার্কার হিসাবে ব্যবহার করতে উপরে-সংজ্ঞায়িত সিনট্যাক্স ব্যবহার করা যাক। এই প্রদর্শনীতে, ব্যবহারকারীর 'নামক একটি চিত্র রয়েছে handpointer.png ” একই Tailwind প্রোজেক্ট ফোল্ডারের ভিতরে উপস্থিত। যদি ছবিটি অন্য কোনও ফোল্ডারে উপস্থিত থাকে তবে ব্যবহারকারীকে তালিকা শৈলী চিত্র শ্রেণীর সম্পূর্ণ পথ প্রদান করতে হবে। আমরা 'লিস্ট-ইমেজ' ক্লাস ব্যবহার করে সেই চিত্রটিকে একটি তালিকা চিহ্নিতকারী হিসাবে ব্যবহার করব।
< div ক্লাস = 'ফ্লেক্স জাস্টিফাই সেন্টার' >
< উল ক্লাস = ' তালিকার ভিতরে তালিকা-চিত্র-[url(handpointer.png)] স্থান-y-2 বৃত্তাকার-md bg-green-400 p-2' >
নমুনা তালিকা
< যে >এটি প্রথম আইটেম< / যে >
< যে >এটি দ্বিতীয় আইটেম< / যে >
< যে >এটি তৃতীয় আইটেম< / যে >
< / উল >
< / div >
উপরের কোডের ব্যাখ্যা নিম্নরূপ:
- একটি ' ' উপাদান তৈরি করা হয় এবং প্রদান করা হয় ' ফ্লেক্স ” ক্লাস যা একটি পাত্রে আইটেমগুলিকে অনুভূমিকভাবে সারিবদ্ধ করে।
- দ্য ' ন্যায্যতা-কেন্দ্র ” ক্লাস চাইল্ড আইটেমগুলিকে পাত্রের কেন্দ্রে সারিবদ্ধ করে।
- পরবর্তী, '
- এটি প্রদান করা হয় ' তালিকা-ভিতরে ” ক্লাস যা তালিকা ব্লকের ভিতরে নির্দিষ্ট তালিকা আইটেম মার্কার স্থাপন করবে।
- দ্য ' list-image-[url({Image Url})] ” ক্লাসটি উপাদানটিতে একটি তালিকা আইটেম চিহ্নিতকারী হিসাবে একটি চিত্র প্রদানের জন্য ব্যবহৃত হয়।
- দ্য ' স্থান-y-{সংখ্যা} ” ক্লাস তালিকা আইটেমগুলির মধ্যে উল্লম্ব স্থান প্রদান করে।
- দ্য ' rounded-md ” ক্লাস তালিকা ব্লকের কোণগুলিকে বৃত্তাকার করে তোলে।
- দ্য ' bg-{color}-{number} তালিকা ব্লকে ব্যাকগ্রাউন্ড কালার প্রদানের জন্য ” ক্লাস ব্যবহার করা হয়।
- দ্য ' p-2 ” ক্লাস তালিকা উপাদানের সীমানা প্রদান করে।
- তিনটি তালিকা আইটেম ব্যবহার করে তৈরি করা হয় ' <তা> ' ট্যাগ.
আউটপুট:
এটি আউটপুটে দেখা যায় যে একটি হ্যান্ড পয়েন্টার ইমেজ তালিকা আইটেমগুলির জন্য চিহ্নিতকারী হিসাবে সেট করা হয়েছে:
Tailwind-এ লিস্ট স্টাইল ইমেজ ক্লাস সহ স্টেট ভেরিয়েন্ট ব্যবহার করা
Tailwind বিভিন্ন স্টেট ভেরিয়েন্ট প্রদান করে যেমন হোভার, ফোকাস এবং সক্রিয় যা ইন্টারেক্টিভ ডিজাইন তৈরি করতে সাহায্য করে। এই রাজ্যগুলির সাথে একটি তালিকা-শৈলী চিত্র শ্রেণী ব্যবহার করতে, নিম্নলিখিত সিনট্যাক্স ব্যবহার করা হয়:
< উল ক্লাস = '{state}:list-image-{none OR image url}' > < / উল >আসুন 'এর সাথে তালিকা-শৈলী চিত্র সম্পত্তি ব্যবহার করতে উপরে-সংজ্ঞায়িত সিনট্যাক্স ব্যবহার করুন হোভার টেলউইন্ডে রাজ্য। এই প্রদর্শনীতে, তালিকা চিহ্নিতকারী হিসাবে একটি চিত্র সহ তালিকা প্রদান করা হবে। যাইহোক, ব্যবহার করে ' হোভার ” স্টেট, ছবি সরিয়ে ফেলা হবে।
< div ক্লাস = 'ফ্লেক্স জাস্টিফাই সেন্টার' >
< উল ক্লাস = 'লিস্ট-ভিতরে তালিকা-চিত্র-[url(handpointer.png)] হোভার:লিস্ট-ইমেজ-কোনও স্পেস-y-2 বৃত্তাকার-md bg-green-400 p-2' >
নমুনা তালিকা
< যে >এটি প্রথম আইটেম< / যে >
< যে >এটি দ্বিতীয় আইটেম< / যে >
< যে >এটি তৃতীয় আইটেম< / যে >
< / উল >
< / div >উপরের কোডে, ' হোভার:তালিকা-ছবি-কোনটি নয় ” ক্লাস তালিকা চিহ্নিতকারী হিসাবে পূর্বে সেট করা চিত্রটিকে সরিয়ে দেয়।
আউটপুট:
নীচের আউটপুটে, তালিকা-শৈলী চিত্রটি 'এ রিসেট করে কোনটি ” যখন ব্যবহারকারী এটির উপর মাউস কার্সার ঘোরায়। এই কারণে, তালিকা চিহ্নিতকারী হিসাবে যে ছবিটি ব্যবহার করা হচ্ছিল তা সরিয়ে ফেলা হয়েছে।
Tailwind-এ লিস্ট স্টাইল ইমেজ ক্লাস সহ ব্রেকপয়েন্ট ব্যবহার করা
ব্রেকপয়েন্টগুলি হল Tailwind-এর উপাদানগুলির জন্য পূর্বনির্ধারিত মিডিয়া কোয়েরি৷ তারা বিভিন্ন স্ক্রীন আকারের জন্য নকশা প্রতিক্রিয়াশীল করতে ব্যবহার করা হয়. এই ব্রেকপয়েন্টগুলির মধ্যে রয়েছে sm, md, lg, xl, এবং 2xl। একটি ব্রেকপয়েন্ট সহ একটি তালিকা-শৈলী চিত্র শ্রেণী ব্যবহার করতে, নিম্নলিখিত সিনট্যাক্স ব্যবহার করা হয়:
< উল ক্লাস = '{breakpoint}:list-image-{none OR image url}' > < / উল >আসুন একটি ' থেকে তালিকা চিহ্নিতকারী পরিবর্তন করতে উপরে-সংজ্ঞায়িত সিনট্যাক্স ব্যবহার করুন ইমেজ ' প্রতি ' কোনটি একটি ব্রেকপয়েন্ট ব্যবহার করে। এই উদাহরণে, স্ক্রীনের আকার “এর প্রস্থ বাড়ালে ইমেজ মার্কারটি সরানো হবে মো 'ব্রেকপয়েন্ট:
< div ক্লাস = 'ফ্লেক্স জাস্টিফাই সেন্টার' >
< উল ক্লাস = ' তালিকার ভিতরে তালিকা-চিত্র-[url(handpointer.png)] md:list-image-none space-y-2 rounded-md bg-green-400 p-2' >
নমুনা তালিকা
< যে >এটি প্রথম আইটেম< / যে >
< যে >এটি দ্বিতীয় আইটেম< / যে >
< যে >এটি তৃতীয় আইটেম< / যে >
< / উল >
< / div >উপরের কোডে, ' md:তালিকা-ছবি-কোনটি নয় যখন পর্দার আকার '-এ পৌঁছায় তখন ক্লাস চিত্র তালিকা চিহ্নিতকারীকে সরিয়ে দেয়' মো 'ব্রেকপয়েন্ট।
আউটপুট:
নীচের আউটপুটে, যখন পর্দার আকার md ব্রেকপয়েন্টে পৌঁছায় তখন চিত্র চিহ্নিতকারীটি সরানো হয়:
এটি Tailwind-এ তালিকা-শৈলীর চিত্র সেট করার বিষয়ে।
উপসংহার
টেইলউইন্ডের দুটি পূর্ব-নির্ধারিত তালিকা-শৈলীর চিত্র ক্লাস রয়েছে যা একটি চিত্রে একটি উপাদানের তালিকা চিহ্নিতকারীকে অপসারণ বা সেট করার জন্য। দ্য ' list-image-[url({Image Url})] ” ক্লাস তালিকা চিহ্নিতকারী হিসাবে নির্দিষ্ট চিত্র প্রদান করে। দ্য ' তালিকা-ছবি-কোনটি নয় ” ক্লাস তালিকা চিহ্নিতকারী হিসাবে পূর্বে প্রদত্ত যে কোনও চিত্রকে সরিয়ে দেয়। এই নিবন্ধটি Tailwind-এ তালিকা শৈলীর ধরন সেট করার পদ্ধতি প্রদান করেছে।