এই নিবন্ধটি টেইলউইন্ডে অবস্থান বৈশিষ্ট্য সহ হোভার, ফোকাস এবং অন্যান্য রাজ্যের ব্যবহার চিত্রিত করে।
টেলউইন্ডে অবস্থান সম্পত্তি সহ হোভার, ফোকাস এবং অন্যান্য রাজ্যগুলি কীভাবে ব্যবহার করবেন?
Tailwind-এর হোভার, ফোকাস এবং অন্যান্য স্টেটগুলিকে Tailwind-এ একটি আকর্ষণীয় এবং ব্যবহারকারী-বান্ধব ইন্টারফেস এবং ব্যবহারকারীদের আকর্ষক অভিজ্ঞতা উপস্থাপন করার জন্য স্টাইল উপাদানগুলি ব্যবহার করা হয়। কখনও কখনও, অবস্থান সম্পত্তি তার সর্বোচ্চ মান অভিজ্ঞতা বজায় রাখার জন্য প্রয়োগ করা হয়.
পদ্ধতি 1: অবস্থান সম্পত্তির সাথে হোভার ভেরিয়েন্ট ব্যবহার করা
হোভার ভেরিয়েন্টটি নির্বাচিত উপাদানগুলিকে শৈলীতে ব্যবহার করা হয় যখন ব্যবহারকারী সেই নির্বাচিত উপাদানটির উপর কার্সারটি সরান। দ্য ' অবস্থান ' বৈশিষ্ট্য 'এর সাথে একত্রে ব্যবহার করা যেতে পারে হোভার হভারের আগে এবং পরে অবস্থান সেট করতে। এই জুটি ব্যবহারকারীর জন্য একটি আকর্ষক অভিজ্ঞতা তৈরি করতে ব্যবহৃত হয়।
ধাপ 1: HTML এ অবস্থান সহ হোভার প্রপার্টি যোগ করুন
নীচের কোডে, হোভার প্রপার্টি 'এ অবস্থান সম্পত্তি বরাবর প্রয়োগ করা হয় বোতাম 'উপাদান:
< শরীর >
< বোতাম ক্লাস = 'আপেক্ষিক w-40 h-12 bg-blue-500 hover: absolute hover:translate-x-4 hover:translate-y-4' >
< পি ক্লাস = 'পাঠ্য-সাদা পাঠ্য কেন্দ্র' > হোভার মি < / পি >
< / বোতাম >
< / শরীর >
এই কোডে:
- দ্য ' আপেক্ষিক ” ক্লাস মূল পৃষ্ঠার সাথে সম্পর্কিত বোতাম সেট করে।
- ' w-40 ” প্রস্থ 40px সেট করে।
- ' h-12 ” উচ্চতা 12px এ সেট করে।
- ' bg-নীল-500 ” ব্যাকগ্রাউন্ডের রঙকে নীলে সেট করে।
- ' hover: পরম ” বোতামের আপেক্ষিক অবস্থানকে পরিবর্তিত করে যখন মাউস কার্সার এটির উপর চলে যায়।
- ' হোভার: অনুবাদ-x-4 ” বোতামটিকে x অক্ষের ডানে 4px এবং একই সময়ে 4px নিচে নিয়ে যায় “ হোভার: অনুবাদ-y-4 ”
- পাঠ্যটিকে কেন্দ্রে সারিবদ্ধ করা হয়েছে ' দ্বারা পাঠ্য কেন্দ্র ”
ধাপ 2: যাচাইকরণ
উপরের কোড দ্বারা তৈরি ওয়েবপৃষ্ঠাটির পূর্বরূপ দেখুন, যা এইরকম দেখাচ্ছে:
আউটপুট দেখায় যে উপাদানটি 4px দ্বারা ডান এবং নীচের দিকে সরানো হয়েছে।
পদ্ধতি 2: অবস্থান সম্পত্তির সাথে ফোকাস ভেরিয়েন্ট ব্যবহার করা
ফোকাস ভেরিয়েন্টটি ব্যবহারকারীর দৃষ্টি আকর্ষণ করতে এবং কিছু উপাদানের উপর জোর দেওয়ার জন্য HTML উপাদানগুলিকে স্টাইল করতে ব্যবহৃত হয়। অবস্থানটি মূল পৃষ্ঠার সাথে বস্তুর আপেক্ষিক বা পরম অবস্থানের জন্য একত্রে প্রয়োগ করা যেতে পারে। এটি ব্যবহারকারীকে নিযুক্ত রাখার জন্য করা হয়।
ধাপ 1: HTML এ অবস্থান সহ ফোকাস প্রপার্টি যোগ করুন
একটি HTML ফাইল তৈরি করুন এবং একটি উপযুক্ত অবস্থানের সাথে ফোকাস সম্পত্তি প্রয়োগ করুন। উদাহরণস্বরূপ, আপেক্ষিক অবস্থান নীচের কোডে একটি ইনপুট বাক্সে প্রয়োগ করা হয়েছে:
< / শরীর >
এই কোডে:
- এর অবস্থান নির্ধারণ করুন ' ইনপুট ' উপাদান থেকে ' আপেক্ষিক ”
- ' ফোকাস: অনুবাদ-x-4 ” বোতামটিকে x অক্ষের ডানে 4px এবং একই সময়ে 4px নিচে নিয়ে যায় “ ফোকাস: অনুবাদ-y-4 ” যখন ব্যবহারকারী ইনপুট বক্সে ক্লিক করে।
- ' ফোকাস: রূপরেখা-2 ” ব্যবহারকারীর দ্বারা ক্লিক করা হলে পাঠ্য বাক্সের চারপাশে একটি রূপরেখা তৈরি করে৷
ধাপ 2: আউটপুট যাচাই করুন
পরিবর্তনটি লক্ষ্য করতে কোড দ্বারা তৈরি ওয়েবপৃষ্ঠাটির পূর্বরূপ দেখুন:
উপরের আউটপুটটি দেখায় যে স্টাইলটি নির্বাচিত উপাদানটিতে প্রয়োগ করা হয়েছে যখন এটি ফোকাস করা হয়।
অবস্থান সম্পত্তির সাথে সক্রিয় ভেরিয়েন্ট ব্যবহার করা।
সক্রিয় ভেরিয়েন্টটি এইচটিএমএল উপাদানগুলির স্টাইল করার জন্য ব্যবহৃত হয় যখন ব্যবহারকারী একটি বোতাম বা অন্য কোনো উপাদান ক্লিক করে এবং ধরে রাখে। পজিশন প্রপার্টি আউটপুটকে আরও বেশি গতিশীল অভিজ্ঞতা তৈরি করে ব্যবহারকারীদের জন্য আরও আকর্ষক করে তুলতে পারে।
ধাপ 1: HTML এ অবস্থান সহ হোভার প্রপার্টি যোগ করুন
একটি HTML ফাইল তৈরি করুন এবং অবস্থান সম্পত্তির সাথে একত্রে সক্রিয় বৈকল্পিক প্রয়োগ করুন। উদাহরণস্বরূপ, এই বৈশিষ্ট্যগুলি নীচের কোড উদাহরণে একটি বোতামে প্রয়োগ করা হয়েছে:
< বোতাম ক্লাস = 'আপেক্ষিক w-48 h-12 bg-নীল-500 সক্রিয়:translate-y-2 সক্রিয়:bg-সবুজ-400' >
< স্প্যান ক্লাস = 'পাঠ্য-সাদা' >আমাকে ক্লিক করুন< / স্প্যান >
< / বোতাম >
< / শরীর >
উপরের কোডে:
- এর অবস্থান নির্ধারণ করুন ' বোতাম ' উপাদান থেকে ' আপেক্ষিক ”
- ' bg-নীল-500 ” বোতামের পটভূমির রঙকে নীল করে সেট করে।
- ' সক্রিয়: অনুবাদ-y-2 ” বোতামটি 2px নিচের দিকে নিয়ে যায় এবং বোতামের রঙ সবুজে পরিবর্তন করে “ সক্রিয়: বিজি-সবুজ-400 ”
ধাপ 2: আউটপুট যাচাই করুন
উপরের কোড দ্বারা তৈরি ওয়েবপৃষ্ঠাটির পূর্বরূপ দেখুন এবং পরিবর্তনটি দেখতে বোতামটি ক্লিক করুন এবং ধরে রাখুন:
উপরের জিআইএফটি দেখায় যে নির্বাচিত বোতাম উপাদানটির স্টাইলিং সক্রিয় হয়ে গেলে পরিবর্তন হয়ে যায়।
টেলউইন্ডে অবস্থান সম্পত্তি সহ হোভার, ফোকাস এবং অন্যান্য রাজ্যগুলি প্রয়োগ করার জন্য এটিই।
উপসংহার
হোভার, ফোকাস, এবং অন্যান্য স্টেটগুলি হোভার, ফোকাস এবং অন্যান্য স্টেটের পূর্বনির্ধারিত ক্লাস ব্যবহার করে অবস্থানের বৈশিষ্ট্যের সাথে ব্যবহার করা যেতে পারে তারপরে 'এর মতো অবস্থান শ্রেণীর বৈশিষ্ট্যগুলি প্রয়োগ করে পরম ', ' আপেক্ষিক ” এবং তাই একযোগে। এই ব্লগে দেখানো হয়েছে কিভাবে টেইলউইন্ডে অবস্থান উপযোগীতার সাথে হোভার, ফোকাস এবং অন্যান্য স্টেট ব্যবহার করতে হয়।