M

MLOG

தமிழ்

Tailwind CSS peer வகைகளின் ஆற்றலை பயன்படுத்தி மற்ற உறுப்புகளின் நிலையின் அடிப்படையில் உடன்பிறப்பு உறுப்புகளை வடிவமைக்கவும். இந்த விரிவான வழிகாட்டி ஆக்கப்பூர்வமான மற்றும் பதிலளிக்கக்கூடிய பயனர் இடைமுகத்தை உருவாக்க ஆழமான உதாரணங்கள் மற்றும் நடைமுறை பயன்பாட்டு நிகழ்வுகளை வழங்குகிறது.

Tailwind CSS Peer வகைகள்: உடன்பிறப்பு உறுப்பு வடிவமைப்பில் தேர்ச்சி பெறுதல்

Tailwind CSS, ஸ்டைலிங் செயல்முறையை துரிதப்படுத்தும் பயன்பாட்டு-முதல் அணுகுமுறையை வழங்குவதன் மூலம் முன்-இறுதி மேம்பாட்டில் புரட்சியை ஏற்படுத்தியுள்ளது. Tailwind இன் முக்கிய அம்சங்கள் சக்திவாய்ந்ததாக இருந்தாலும், அதன் peer வகைகள் அவர்களின் உடன்பிறப்புகளின் நிலையின் அடிப்படையில் உறுப்பு வடிவமைப்பின் மீது மேம்பட்ட கட்டுப்பாட்டை வழங்குகின்றன. இந்த வழிகாட்டி peer வகைகளின் நுணுக்கங்களை ஆராய்ந்து, டைனமிக் மற்றும் ஊடாடும் பயனர் இடைமுகங்களை உருவாக்க அவற்றை எவ்வாறு திறம்பட பயன்படுத்துவது என்பதை நிரூபிக்கிறது.

Peer வகைகளைப் புரிந்துகொள்வது

Peer வகைகள், உடன்பிறப்பு உறுப்பின் நிலையின் (எ.கா., hover, focus, checked) அடிப்படையில் ஒரு உறுப்பை வடிவமைக்க உங்களை அனுமதிக்கின்றன. Tailwind இன் peer வகுப்பை மற்ற நிலை அடிப்படையிலான வகைகளான peer-hover, peer-focus மற்றும் peer-checked உடன் இணைந்து பயன்படுத்துவதன் மூலம் இது அடையப்படுகிறது. இந்த வகைகள் தொடர்புடைய கூறுகளை இலக்காகக் கொண்டு வடிவமைக்க CSS உடன்பிறப்பு சேர்க்கைகளைப் பயன்படுத்துகின்றன.

அடிப்படையில், peer வகுப்பு ஒரு மார்க்கராக செயல்படுகிறது, இது குறிக்கப்பட்ட உறுப்பைப் பின்பற்றும் DOM மரத்தில் உள்ள உடன்பிறப்பு கூறுகளை இலக்காகக் கொள்ள பீர் அடிப்படையிலான வகைகளை அனுமதிக்கிறது.

முக்கிய கருத்துக்கள்

அடிப்படை தொடரியல் மற்றும் பயன்பாடு

Peer வகைகளைப் பயன்படுத்துவதற்கான அடிப்படை தொடரியல் தூண்டுதல் உறுப்புக்கு peer வகுப்பைப் பயன்படுத்துவதும், இலக்கு உறுப்பில் peer-* வகைகளைப் பயன்படுத்துவதும் அடங்கும்.

உதாரணம்: ஒரு தேர்வுப்பெட்டி சரிபார்க்கப்படும்போது ஒரு பத்தியை வடிவமைத்தல்


<label class="flex items-center space-x-2">
  <input type="checkbox" class="peer" />
  <span>இருண்ட பயன்முறையை இயக்கு</span>
</label>
<p class="hidden peer-checked:block text-gray-700">
  இருண்ட பயன்முறை இப்போது இயக்கப்பட்டது.
</p>

இந்த எடுத்துக்காட்டில், peer வகுப்பு <input type="checkbox"/> உறுப்புக்கு பயன்படுத்தப்படுகிறது. தேர்வுப்பெட்டிக்கு உடன்பிறப்பான பத்தி உறுப்பு, peer-checked:block வகுப்பைக் கொண்டுள்ளது. இதன் பொருள் தேர்வுப்பெட்டி சரிபார்க்கப்படும்போது, பத்தியின் காட்சி hidden இலிருந்து block ஆக மாறும்.

நடைமுறை எடுத்துக்காட்டுகள் மற்றும் பயன்பாட்டு நிகழ்வுகள்

Peer வகைகள் டைனமிக் மற்றும் ஊடாடும் UI கூறுகளை உருவாக்குவதற்கான பரந்த அளவிலான சாத்தியக்கூறுகளைத் திறக்கின்றன. அவற்றின் பல்துறைத்திறனை நிரூபிக்கும் சில நடைமுறை எடுத்துக்காட்டுகள் இங்கே:

1. ஊடாடும் படிவ லேபிள்கள்

தொடர்புடைய உள்ளீட்டு புலங்கள் கவனம் செலுத்தும் போது படிவ லேபிள்களை காட்சிக்கு ஹைலைட் செய்வதன் மூலம் பயனர் அனுபவத்தை மேம்படுத்தவும்.


<div>
  <label for="name" class="block text-gray-700 font-bold mb-2 peer-focus:text-blue-500 transition-colors duration-200">
    பெயர்:
  </label>
  <input type="text" id="name" class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline peer" />
</div>

இந்த எடுத்துக்காட்டில், peer வகுப்பு உள்ளீட்டு புலத்திற்கு பயன்படுத்தப்படுகிறது. உள்ளீட்டு புலம் கவனம் செலுத்தும் போது, லேபிளில் உள்ள peer-focus:text-blue-500 வகுப்பு லேபிளின் உரை நிறத்தை நீலமாக மாற்றும், இது பயனருக்கு காட்சி குறிப்பை வழங்கும்.

2. Accordion/மடக்கக்கூடிய பிரிவுகள்

ஹெடரை கிளிக் செய்தால் கீழே உள்ள உள்ளடக்கம் விரிவாக்கப்படும் அல்லது சுருக்கப்படும் Accordion பிரிவுகளை உருவாக்கவும்.


<div>
  <button class="w-full text-left py-2 px-4 bg-gray-100 hover:bg-gray-200 focus:outline-none peer">
    பிரிவு தலைப்பு
  </button>
  <div class="hidden peer-focus:block bg-white py-2 px-4">
    <p>பிரிவின் உள்ளடக்கம்.</p>
  </div>
</div>

இங்கே, peer வகுப்பு பொத்தானுக்கு பயன்படுத்தப்படுகிறது. உள்ளடக்க div hidden peer-focus:block வகுப்புகளைக் கொண்டுள்ளது. இந்த எடுத்துக்காட்டு 'focus' நிலையைப் பயன்படுத்தினாலும், உண்மையான உலகில் அணுகல்தன்மை மற்றும் மேம்பட்ட செயல்பாட்டிற்காக முறையான ARIA பண்புக்கூறுகள் (எ.கா., `aria-expanded`) மற்றும் JavaScript தேவைப்படலாம் என்பதைக் கவனத்தில் கொள்ள வேண்டும். விசைப்பலகை வழிசெலுத்தல் மற்றும் ஸ்கிரீன் ரீடர் இணக்கத்தன்மையைக் கவனியுங்கள்.

3. டைனமிக் பட்டியல் ஸ்டைலிங்

Peer வகைகளைப் பயன்படுத்தி hover அல்லது focus இல் பட்டியல் உருப்படிகளை முன்னிலைப்படுத்தவும்.


<ul>
  <li>
    <a href="#" class="block py-2 px-4 hover:bg-gray-100 focus:outline-none peer">உருப்படி 1</a>
    <span class="hidden peer-hover:inline peer-focus:inline text-gray-500 ml-2">(விவரங்கள்)</span>
  </li>
  <li>
    <a href="#" class="block py-2 px-4 hover:bg-gray-100 focus:outline-none peer">உருப்படி 2</a>
    <span class="hidden peer-hover:inline peer-focus:inline text-gray-500 ml-2">(விவரங்கள்)</span>
  </li>
</ul>

இந்த வழக்கில், peer வகுப்பு ஒவ்வொரு பட்டியல் உருப்படிக்கும் உள்ளே anchor டேக்கிற்கு பயன்படுத்தப்படுகிறது. anchor டேக் hover செய்யப்பட்டாலோ அல்லது கவனம் செலுத்தப்பட்டாலோ, அருகிலுள்ள span உறுப்பு காட்டப்படும், இது கூடுதல் விவரங்களை வழங்குகிறது.

4. உள்ளீட்டு செல்லுபடிநிலையின் அடிப்படையில் ஸ்டைலிங்

படிவ புலங்களில் உள்ளீட்டின் செல்லுபடிநிலையின் அடிப்படையில் பயனர்களுக்கு காட்சி பின்னூட்டத்தை வழங்கவும்.


<div>
  <label for="email" class="block text-gray-700 font-bold mb-2">மின்னஞ்சல்:</label>
  <input type="email" id="email" required class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline peer" />
  <p class="hidden peer-invalid:block text-red-500 text-sm mt-1">சரியான மின்னஞ்சல் முகவரியை உள்ளிடவும்.</p>
</div>

இங்கே, நாங்கள் :invalid போலி-வகுப்பை (உள்ளமைக்கப்பட்ட பிரவுசர்களால் ஆதரிக்கப்படுகிறது) மற்றும் peer-invalid வகையைப் பயன்படுத்துகிறோம். மின்னஞ்சல் உள்ளீடு தவறானது என்றால், பிழை செய்தி காட்டப்படும்.

5. தனிப்பயன் ரேடியோ பொத்தான்கள் மற்றும் தேர்வுப்பெட்டிகள்

தனிப்பயன் குறிகாட்டிகளை வடிவமைக்க peer வகைகளைப் பயன்படுத்தி பார்வைக்கு ஈர்க்கும் மற்றும் ஊடாடும் ரேடியோ பொத்தான்கள் மற்றும் தேர்வுப்பெட்டிகளை உருவாக்கவும்.


<label class="inline-flex items-center">
  <input type="radio" class="form-radio h-5 w-5 text-blue-600 peer" name="radio" value="option1" />
  <span class="ml-2 text-gray-700 peer-checked:text-blue-600">விருப்பம் 1</span>
  <span class="ml-2 hidden peer-checked:inline-block w-5 h-5 rounded-full bg-blue-600"></span>
</label>

இந்த எடுத்துக்காட்டில், ரேடியோ பொத்தான் சரிபார்க்கப்படும்போது லேபிள் உரை மற்றும் தனிப்பயன் காட்டி (நிற span) இரண்டையும் வடிவமைக்க peer-checked வகை பயன்படுத்தப்படுகிறது.

மேம்பட்ட நுட்பங்கள் மற்றும் கருத்தில் கொள்ள வேண்டியவை

மற்ற வகைகளுடன் Peer வகைகளை இணைத்தல்

Peer வகைகளை hover, focus மற்றும் active போன்ற பிற Tailwind வகைகளுடன் இணைத்து இன்னும் சிக்கலான மற்றும் நுணுக்கமான ஊடாடல்களை உருவாக்கலாம்.


<button class="peer bg-gray-200 hover:bg-gray-300 focus:outline-none focus:bg-gray-300"
        >
  என் மீது Hover செய்யவும்
</button>
<p class="hidden peer-hover:block peer-focus:block">இது hover அல்லது focus இல் காண்பிக்கும்</p>

பொத்தான் hover செய்யப்பட்டாலோ அல்லது கவனம் செலுத்தப்பட்டாலோ இந்த எடுத்துக்காட்டு பத்தியைக் காண்பிக்கும்.

பொது உடன்பிறப்பு சேர்க்கைகளைப் பயன்படுத்துதல் (~)

அருகிலுள்ள உடன்பிறப்பு சேர்க்கை (+) மிகவும் பொதுவானதாக இருந்தாலும், இலக்கு உறுப்பு peer உறுப்புக்கு உடனடியாக அருகாமையில் இல்லாத சில சூழ்நிலைகளில் பொதுவான உடன்பிறப்பு சேர்க்கை (~) பயனுள்ளதாக இருக்கும்.

உதாரணம்: தேர்வுப்பெட்டிக்கு பிறகு அனைத்து அடுத்தடுத்த பத்திகளையும் வடிவமைத்தல்.


<input type="checkbox" class="peer" />
<p>பத்தி 1</p>
<p class="peer-checked:text-green-500">பத்தி 2</p>
<p class="peer-checked:text-green-500">பத்தி 3</p>

இந்த எடுத்துக்காட்டில், தேர்வுப்பெட்டி சரிபார்க்கப்படும்போது அனைத்து அடுத்தடுத்த பத்திகளின் உரை நிறம் பச்சை நிறமாக மாற்றப்படும்.

அணுகல்தன்மை கருத்தில் கொள்ள வேண்டியவை

Peer வகைகளைப் பயன்படுத்தும் போது அணுகல்தன்மையைக் கருத்தில் கொள்வது அவசியம். நீங்கள் உருவாக்கும் ஊடாடல்கள் குறைபாடுகள் உள்ளவர்களால் பயன்படுத்தக்கூடியதாகவும் புரிந்துகொள்ளக்கூடியதாகவும் இருப்பதை உறுதிப்படுத்தவும். இது பின்வருவனவற்றை உள்ளடக்குகிறது:

செயல்திறன் கருத்தில் கொள்ள வேண்டியவை

Peer வகைகள் உடன்பிறப்பு உறுப்புகளை வடிவமைக்க ஒரு சக்திவாய்ந்த வழியை வழங்கினாலும், செயல்திறனை மனதில் கொள்வது அவசியம். Peer வகைகளை அதிகமாகப் பயன்படுத்துவது, குறிப்பாக சிக்கலான ஸ்டைல்களுடன் அல்லது அதிக எண்ணிக்கையிலான உறுப்புகளுடன், பக்க செயல்திறனை பாதிக்கலாம். பின்வரும் மேம்படுத்தல் உத்திகளைக் கவனியுங்கள்:

பொதுவான சிக்கல்களை சரிசெய்தல்

Peer வகைகளுடன் பணிபுரியும் போது நீங்கள் சந்திக்கக்கூடிய சில பொதுவான சிக்கல்கள் மற்றும் அவற்றை எவ்வாறு சரிசெய்வது என்பது இங்கே:

Peer வகைகளுக்கு மாற்றுகள்

Peer வகைகள் ஒரு சக்திவாய்ந்த கருவியாக இருந்தாலும், சில சந்தர்ப்பங்களில் பயன்படுத்தக்கூடிய மாற்று அணுகுமுறைகள் உள்ளன. உங்கள் திட்டத்தின் குறிப்பிட்ட தேவைகளைப் பொறுத்து இந்த மாற்றுகள் மிகவும் பொருத்தமானதாக இருக்கலாம்.

முடிவுரை

Tailwind CSS Peer வகைகள் மற்றொரு உறுப்பின் நிலையின் அடிப்படையில் உடன்பிறப்பு உறுப்புகளை வடிவமைக்க ஒரு சக்திவாய்ந்த மற்றும் நேர்த்தியான வழியை வழங்குகின்றன. Peer வகைகளில் தேர்ச்சி பெறுவதன் மூலம், பயனர் அனுபவத்தை மேம்படுத்தும் டைனமிக் மற்றும் ஊடாடும் பயனர் இடைமுகங்களை உருவாக்கலாம். Peer வகைகளைப் பயன்படுத்தும் போது அணுகல்தன்மை மற்றும் செயல்திறனைக் கருத்தில் கொள்ள நினைவில் கொள்ளுங்கள், மேலும் பொருத்தமான போது மாற்று அணுகுமுறைகளை ஆராயுங்கள். Peer வகைகளைப் பற்றிய உறுதியான புரிதலுடன், உங்கள் Tailwind CSS திறன்களை அடுத்த கட்டத்திற்கு எடுத்துச் செல்லலாம் மற்றும் உண்மையிலேயே விதிவிலக்கான வலை பயன்பாடுகளை உருவாக்கலாம்.

இந்த வழிகாட்டி Peer வகைகளைப் பற்றிய ஒரு விரிவான கண்ணோட்டத்தை வழங்கியுள்ளது, அடிப்படை தொடரியல் முதல் மேம்பட்ட நுட்பங்கள் மற்றும் கருத்தில் கொள்ள வேண்டியவை அனைத்தையும் உள்ளடக்கியது. வழங்கப்பட்ட எடுத்துக்காட்டுகளுடன் பரிசோதனை செய்து, Peer வகைகள் வழங்கும் பல சாத்தியக்கூறுகளை ஆராயுங்கள். மகிழ்ச்சியான ஸ்டைலிங்!