டெயில்விண்ட் CSS குரூப் வேரியன்ட்களில் தேர்ச்சி பெறுதல்: டைனமிக் இடைமுகங்களுக்கான பேரண்ட் நிலைகளை வடிவமைத்தல்

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

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

டெயில்விண்ட் CSS குரூப் வேரியன்ட்கள் என்றால் என்ன?

அதன் மையத்தில், டெயில்விண்ட் CSS உங்கள் HTML உறுப்புகளுக்கு நேரடியாக யூட்டிலிட்டி வகுப்புகளைப் பயன்படுத்துதல் என்ற கொள்கையில் செயல்படுகிறது. இருப்பினும், மற்றொரு உறுப்பின் நிலையின் அடிப்படையில் ஒரு உறுப்பை நீங்கள் ஸ்டைல் செய்ய வேண்டியிருக்கும் போது - குறிப்பாக அதன் பெற்றோர் - பாரம்பரிய யூட்டிலிட்டி-ஃபர்ஸ்ட் அணுகுமுறைகள் சிக்கலானதாக மாறும். நீங்கள் தனிப்பயன் CSS வகுப்புகள், ஜாவாஸ்கிரிப்ட் அடிப்படையிலான நிலை மேலாண்மை, அல்லது அதிகப்படியான சிக்கலான செலக்டர் சங்கிலிகளை நாட வேண்டியிருக்கும்.

டெயில்விண்ட் CSS v3.0 இல் அறிமுகப்படுத்தப்பட்ட குரூப் வேரியன்ட்கள் ஒரு நேர்த்தியான தீர்வை வழங்குகின்றன. அவை ஒரு குறிப்பிட்ட பெற்றோர் உறுப்பு சில நிபந்தனைகளை பூர்த்தி செய்யும் போது, அதாவது hover, focus, அல்லது active செய்யப்படும் போது, செயல்படுத்தக்கூடிய தனிப்பயன் வேரியன்ட்களை வரையறுக்க உங்களை அனுமதிக்கின்றன. இதன் பொருள், யூட்டிலிட்டி-ஃபர்ஸ்ட் முன்னுதாரணத்தை விட்டு வெளியேறாமல், பெற்றோரின் நிலைக்கு பதிலளிக்கும் ஸ்டைல்களை உங்கள் HTML மார்க்கப்பில் நேரடியாக எழுதலாம்.

குரூப் வேரியன்ட்களுக்கான தொடரியல் ஒரு யூட்டிலிட்டி வகுப்பிற்கு முன் group- மற்றும் அதன் நிலையைச் சேர்ப்பதை உள்ளடக்கியது. உதாரணமாக, ஒரு பெற்றோர் குரூப் hover செய்யப்படும்போது ஒரு குழந்தை உறுப்பின் பின்னணி நிறத்தை மாற்ற விரும்பினால், குழந்தை உறுப்பில் group-hover:bg-blue-500 பயன்படுத்துவீர்கள். பெற்றோர் உறுப்பு group வகுப்பைப் பயன்படுத்துவதன் மூலம் ஒரு "குழு" என்று நியமிக்கப்பட வேண்டும்.

குரூப் வேரியன்ட்களை ஏன் பயன்படுத்த வேண்டும்? அதன் நன்மைகள்

குரூப் வேரியன்ட்களை ஏற்றுக்கொள்வது முன்பக்க டெவலப்பர்கள் மற்றும் வடிவமைப்பாளர்களுக்கு பல குறிப்பிடத்தக்க நன்மைகளை வழங்குகிறது:

மேம்படுத்தப்பட்ட வாசிப்புத்திறன் மற்றும் பராமரிப்பு: நிலையைச் சார்ந்த ஸ்டைலிங்கை உங்கள் HTML க்குள் வைத்திருப்பதன் மூலம், தனி CSS கோப்புகள் அல்லது சிக்கலான ஜாவாஸ்கிரிப்ட் தர்க்கத்திற்கான தேவையை நீங்கள் குறைக்கிறீர்கள். இது உங்கள் குறியீட்டுத் தளத்தைப் புரிந்துகொள்வதையும் பராமரிப்பதையும் எளிதாக்குகிறது, குறிப்பாக பெரிய மற்றும் சிக்கலான திட்டங்களுக்கு.
குறைக்கப்பட்ட CSS தடம்: ஒவ்வொரு நிலை சேர்க்கைக்கும் தனிப்பயன் வகுப்புகளை உருவாக்குவதற்கு பதிலாக (எ.கா., .parent-hover .child-visible), குரூப் வேரியன்ட்கள் டெயில்விண்டின் தற்போதைய யூட்டிலிட்டி வகுப்புகளைப் பயன்படுத்துகின்றன, இது ஒரு மெலிதான CSS வெளியீட்டிற்கு வழிவகுக்கிறது.
நெறிப்படுத்தப்பட்ட மேம்பாட்டு பணி ஓட்டம்: டெயில்விண்டின் யூட்டிலிட்டி-ஃபர்ஸ்ட் தன்மை பாதுகாக்கப்படுகிறது. டெவலப்பர்கள் தங்களுக்குத் தேவையான இடங்களில் நேரடியாக ஸ்டைல்களைப் பயன்படுத்தலாம், கட்டுப்பாட்டை இழக்காமல் மேம்பாட்டு செயல்முறையை வேகப்படுத்தலாம்.
மேம்படுத்தப்பட்ட அணுகல்தன்மை: குரூப் வேரியன்ட்கள் பயனர்களுக்கான ஊடாடும் நிலைகளை பார்வைக்குக் குறிக்கப் பயன்படுத்தப்படலாம், இது நிலையான ஃபோகஸ் மற்றும் ஹோவர் நிலைகளை நிறைவுசெய்து ஒட்டுமொத்த பயனர் அனுபவத்தை மேம்படுத்துகிறது.
எளிமைப்படுத்தப்பட்ட காம்போனென்ட் வடிவமைப்பு: மீண்டும் பயன்படுத்தக்கூடிய காம்போனென்ட்களை உருவாக்கும்போது, குரூப் வேரியன்ட்கள் பெற்றோர் ஊடாடல்களுக்கு பதிலளிக்கும் வகையில் குழந்தை உறுப்புகள் எவ்வாறு செயல்பட வேண்டும் என்பதை வரையறுப்பதை எளிதாக்குகின்றன, இது உங்கள் பயன்பாடு முழுவதும் நிலைத்தன்மையை ஊக்குவிக்கிறது.

முக்கிய குரூப் வேரியன்ட் கருத்துக்கள்

குரூப் வேரியன்ட்களை திறம்பட பயன்படுத்த, சில அடிப்படைக் கருத்துகளைப் புரிந்துகொள்வது முக்கியம்:

1. `group` வகுப்பு

குரூப் வேரியன்ட்களின் அடித்தளம் group வகுப்பு. உங்கள் நிலை-அடிப்படையிலான ஸ்டைலிங்கிற்கான தூண்டுதலாக செயல்பட விரும்பும் பெற்றோர் உறுப்புக்கு இந்த வகுப்பைப் பயன்படுத்த வேண்டும். பெற்றோர் மீது group வகுப்பு இல்லாமல், குழந்தை உறுப்புகளில் உள்ள எந்த group-* முன்னொட்டுகளும் எந்த விளைவையும் ஏற்படுத்தாது.

2. `group-*` முன்னொட்டு

இந்த முன்னொட்டு நிலையான டெயில்விண்ட் யூட்டிலிட்டி வகுப்புகளுக்குப் பயன்படுத்தப்படுகிறது. இது பெற்றோர் உறுப்பு (group வகுப்புடன் குறிக்கப்பட்டது) ஒரு குறிப்பிட்ட நிலையில் இருக்கும்போது மட்டுமே யூட்டிலிட்டி பயன்படுத்தப்பட வேண்டும் என்பதைக் குறிக்கிறது. பொதுவான முன்னொட்டுகள் பின்வருமாறு:

group-hover:: பெற்றோர் குழு hover செய்யப்படும்போது ஸ்டைல்களைப் பயன்படுத்துகிறது.
group-focus:: பெற்றோர் குழு ஃபோகஸைப் பெறும்போது ஸ்டைல்களைப் பயன்படுத்துகிறது (எ.கா., கீபோர்டு வழிசெலுத்தல் மூலம்).
group-active:: பெற்றோர் குழு செயல்படுத்தப்படும்போது ஸ்டைல்களைப் பயன்படுத்துகிறது (எ.கா., ஒரு பொத்தான் கிளிக்).
group-visited:: பெற்றோர் குழுவிற்குள் உள்ள ஒரு இணைப்பு பார்க்கப்பட்டவுடன் ஸ்டைல்களைப் பயன்படுத்துகிறது.
group-disabled:: பெற்றோர் குழுவிற்கு disabled பண்பு இருக்கும்போது ஸ்டைல்களைப் பயன்படுத்துகிறது.
group-enabled:: பெற்றோர் குழு இயக்கப்பட்டிருக்கும்போது ஸ்டைல்களைப் பயன்படுத்துகிறது.
group-checked:: பெற்றோர் குழுவிற்குள் ஒரு உள்ளீட்டு உறுப்பு சரிபார்க்கப்படும்போது ஸ்டைல்களைப் பயன்படுத்துகிறது.
group-selected:: பெற்றோர் குழுவிற்குள் ஒரு உறுப்பு தேர்ந்தெடுக்கப்படும்போது ஸ்டைல்களைப் பயன்படுத்துகிறது (பெரும்பாலும் தனிப்பயன் உறுப்புகள் அல்லது ஜாவாஸ்கிரிப்ட்-இயங்கும் நிலைகளுடன் பயன்படுத்தப்படுகிறது).

3. குழுக்களை ஒன்றுகூட்டுதல் (`group/` முன்னொட்டு)

டெயில்விண்ட் CSS கூடுகட்டிய குழுக்கள் மீது மேலும் நுணுக்கமான கட்டுப்பாட்டை அனுமதிக்கிறது. ஒரு பெரிய கட்டமைப்பிற்குள் "குழுக்கள்" என்று கருதப்படக்கூடிய பல உறுப்புகள் உங்களிடம் இருந்தால், group/<identifier> தொடரியலைப் பயன்படுத்தி அவற்றுக்கு குறிப்பிட்ட அடையாளங்காட்டிகளை ஒதுக்கலாம். குழந்தை உறுப்புகள் பின்னர் group-<identifier>-* முன்னொட்டுகளைப் பயன்படுத்தி இந்த குறிப்பிட்ட பெற்றோர் குழுக்களை இலக்காகக் கொள்ளலாம். இது சிக்கலான தளவமைப்புகளில் எதிர்பாராத ஸ்டைலிங் பக்க விளைவுகளைத் தவிர்க்க மிகவும் பயனுள்ளதாக இருக்கும்.

உதாரணமாக:

<div class="group/card group-hover:scale-105 transition-transform duration-300">
  <!-- Card Content -->
  <div class="group-hover/card:text-blue-600">
    Card Title
  </div>
</div>

இந்த எடுத்துக்காட்டில், group/card இந்த குறிப்பிட்ட div-ஐ ஒரு "கார்டு" குழுவாகக் குறிக்கிறது. கார்டு குழுவே hover செய்யப்படும்போது (group-hover:scale-105), முழு கார்டும் அளவிடப்படுகிறது. கூடுதலாக, குறிப்பிட்ட group/card hover செய்யப்படும்போது (group-hover/card:text-blue-600), அதற்குள் உள்ள உரை மட்டும் நிறம் மாறுகிறது. இந்த அளவிலான தனித்தன்மை சிக்கலான UI-களுக்கு முக்கியமானது.

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

பல்வேறு கூறுகள் மற்றும் சூழ்நிலைகளில் டெயில்விண்ட் CSS குரூப் வேரியன்ட்களின் சில நிஜ உலகப் பயன்பாடுகளை ஆராய்வோம், உலகளாவிய பார்வையாளர்களை மனதில் கொண்டு.

எடுத்துக்காட்டு 1: ஊடாடும் கார்டுகள்

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

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

<div class="group relative cursor-pointer overflow-hidden rounded-xl bg-white p-8 shadow-sm transition-shadow duration-300 hover:shadow-lg"
     >
  <!-- கார்டு படம் -->
  <div class="mb-4 h-48 w-full object-cover"
       >
    <img src="/images/placeholder-image.jpg" alt="தயாரிப்புப் படம்" class="w-full h-full rounded-md" 
         >
  </div>
  
  <!-- கார்டு உள்ளடக்கம் -->
  <h3 class="mb-2 text-xl font-bold text-gray-900"
      >
    உலகளாவிய கண்டுபிடிப்புகள் உச்சிமாநாடு
  </h3>
  <p class="mb-4 text-gray-600"
     >
    புதிய தொழில்நுட்பங்களைக் கண்டறிந்து, உலகெங்கிலும் உள்ள தொழில் தலைவர்களுடன் இணையுங்கள்.
  </p>
  
  <!-- செயல்பாட்டு பொத்தான் -->
  <button class="inline-block rounded-lg px-4 py-2 text-sm font-medium transition duration-300"
          >
    <span class="group-hover:text-white"
          >மேலும் அறிக</span>
    <span class="group-hover:bg-white"
          ></span>
  </button>
</div>

விளக்கம்:

வெளிப்புற div-இல் group வகுப்பு உள்ளது, இது அதை பெற்றோர் உறுப்பாக ஆக்குகிறது.
hover:shadow-lg கார்டிலேயே முதன்மை hover விளைவை வழங்குகிறது.
கார்டுக்குள் உள்ள button group-hover:text-white ஐப் பயன்படுத்துகிறது. இதன் பொருள் பெற்றோர் div (குழு) hover செய்யப்படும்போது மட்டுமே பொத்தானின் உரை நிறம் வெள்ளையாக மாறும்.
பெற்றோர் மீது உள்ள transition-shadow duration-300 நிழல் மாற்றத்திற்கு ஒரு மென்மையான காட்சி மாற்றத்தை உறுதி செய்கிறது.

எடுத்துக்காட்டு 2: வழிசெலுத்தல் மெனுக்கள் மற்றும் டிராப்டவுன்கள்

பதிலளிக்கக்கூடிய வழிசெலுத்தல் எந்தவொரு வலைத்தளத்திலும் பயனர் அனுபவத்திற்கு முக்கியமானது. குரூப் வேரியன்ட்கள் hover-இல் வெளிப்படும் டிராப்டவுன்கள் அல்லது துணைமெனுக்களை செயல்படுத்துவதை எளிதாக்க முடியும்.

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

<nav class="bg-gray-800 p-4"
     >
  <ul class="flex space-x-6"
      >
    <li class="group relative"
        >
      <a href="#" class="text-gray-300 hover:text-white px-3 py-2 rounded-md text-sm font-medium transition duration-300"
         >
        சேவைகள்
        <span class="group-hover:w-full"
              ></span>
      </a>
      
      <!-- டிராப்டவுன் மெனு -->
      <div class="absolute left-0 z-10 mt-2 w-48 origin-top-left scale-95 transform rounded-md bg-white shadow-lg ring-1 ring-black ring-opacity-5 transition duration-300 ease-out group-hover:scale-100 group-hover:opacity-100"
           >
        <div class="py-1"
             >
          <a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100"
             >
            உலகளாவிய ஆலோசனை
          </a>
          <a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100"
             >
            சந்தை ஆராய்ச்சி
          </a>
          <a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100"
             >
            டிஜிட்டல் உருமாற்றம்
          </a>
        </div>
      </div>
    </li>
    <li>
      <a href="#" class="text-gray-300 hover:text-white px-3 py-2 rounded-md text-sm font-medium transition duration-300"
         >
        எங்களை பற்றி
      </a>
    </li>
    <li>
      <a href="#" class="text-gray-300 hover:text-white px-3 py-2 rounded-md text-sm font-medium transition duration-300"
         >
        தொடர்புக்கு
      </a>
    </li>
  </ul>
</nav>

விளக்கம்:

"சேவைகள்" இணைப்பைக் கொண்ட li உறுப்பு group வகுப்பைக் கொண்டுள்ளது.
"சேவைகள்" இணைப்பிற்குள் உள்ள span group-hover:w-full ஐப் பயன்படுத்துகிறது. இது span ஆரம்பத்தில் மறைக்கப்பட்டிருக்கிறது அல்லது 0 அகலம் கொண்டது என்று கருதுகிறது, மேலும் பெற்றோர் பட்டியல் உருப்படி hover செய்யப்படும்போது மட்டுமே அது முழு அகலத்திற்கு விரிவடைகிறது (ஒரு அடிக்கோட்டை உருவாக்குகிறது).
டிராப்டவுன் div group-hover:scale-100 group-hover:opacity-100 ஐப் பயன்படுத்துகிறது. இது பெற்றோர் குழு hover செய்யப்படும்போது மட்டுமே டிராப்டவுனை 95% லிருந்து 100% ஆக அளவிடவும் மற்றும் முழுமையாக ஒளிபுகா தன்மையை அடையவும் செய்கிறது. group-hover:opacity-100 ஆரம்ப opacity-0 உடன் இணைந்து பயன்படுத்தப்படுகிறது (scale-95 மற்றும் ஆரம்ப நிலைக்கான transition மூலம் மறைமுகமாக).
டிராப்டவுனில் உள்ள transition duration-300 ease-out ஒரு மென்மையான வெளிப்படும் விளைவை உறுதி செய்கிறது.

எடுத்துக்காட்டு 3: படிவ உள்ளீட்டு நிலைகள் மற்றும் லேபிள்கள்

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

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

<div class="border border-gray-300 p-4 rounded-lg group/input-group"
     >
  <h3 class="text-lg font-semibold text-gray-800 mb-3"
      >
    விருப்பத்தேர்வுகள்
  </h3>
  
  <div class="space-y-3"
       >
    <div class="flex items-center"
         >
      <input type="checkbox" id="notifications" class="form-checkbox h-5 w-5 text-blue-600"
             >
      <label for="notifications" class="ml-2 block text-sm text-gray-700 cursor-pointer"
             >
        மின்னஞ்சல் அறிவிப்புகளை இயக்கு
      </label>
    </div>
    
    <div class="flex items-center"
         >
      <input type="checkbox" id="updates" class="form-checkbox h-5 w-5 text-blue-600"
             >
      <label for="updates" class="ml-2 block text-sm text-gray-700 cursor-pointer"
             >
        தயாரிப்பு புதுப்பிப்புகளைப் பெறு
      </label>
    </div>
  </div>
  
  <!-- குழு நிலையின் அடிப்படையில் ஸ்டைலிங் பயன்படுத்தப்படுகிறது -->
  <label for="notifications" class="group-checked:text-green-700 group-checked:font-medium"
         ></label>
  <label for="updates" class="group-checked:text-green-700 group-checked:font-medium"
         ></label>
  
  <div class="group-checked:border-green-500 group-checked:ring-1 group-checked:ring-green-500 mt-4 border-t border-gray-300 pt-4"
       >
    <p class="text-sm text-gray-500"
       >
      உங்கள் அறிவிப்பு விருப்பத்தேர்வுகள் சேமிக்கப்பட்டன.
    </p>
  </div>
</div>

விளக்கம்:

group/input-group வகுப்புடன் கூடிய வெளிப்புற div படிவ உறுப்புகளுக்கான முக்கிய கொள்கலன் ஆகும்.
input உறுப்புகளுக்கு group வகுப்பு தேவையில்லை. அதற்கு பதிலாக, group-checked: முன்னொட்டு label உறுப்புகளுக்கு பயன்படுத்தப்படுகிறது. ஏனெனில் group-checked வேரியன்ட் சரிபார்க்கப்பட்ட உள்ளீட்டுடன் கட்டமைப்புரீதியாக தொடர்புடைய உறுப்புகளுக்கு, பெரும்பாலும் லேபிளுக்கே, பயன்படுத்தப்படும்போது சிறப்பாக செயல்படுகிறது.
"உங்கள் அறிவிப்பு விருப்பத்தேர்வுகள் சேமிக்கப்பட்டன" என்ற செய்தியைக் கொண்ட div group-checked:border-green-500 group-checked:ring-1 group-checked:ring-green-500 ஐப் பயன்படுத்துகிறது. இது பெற்றோர் group/input-group க்குள் உள்ள எந்தவொரு சரிபார்ப்புப் பெட்டி சரிபார்க்கப்படும்போதும் ஒரு பச்சை பார்டர் மற்றும் ரிங்கைப் பயன்படுத்துகிறது.
சரிபார்ப்புப் பெட்டி நிலையின் அடிப்படையில் லேபிளுக்கு ஸ்டைல்களைப் பயன்படுத்த, நாம் group-checked: வேரியன்ட்களை label உறுப்புகளுக்குப் பயன்படுத்துகிறோம். உதாரணமாக, group-checked:text-green-700 group-checked:font-medium தொடர்புடைய சரிபார்ப்புப் பெட்டி சரிபார்க்கப்படும்போது லேபிளின் உரை நிறத்தை மாற்றி தடிமனாக்கும்.
குறிப்பு: `form-checkbox` என்பது ஒரு தனிப்பயன் கூறு வகுப்பு ஆகும், இது உண்மையான ஸ்டைலிங்கிற்காக டெயில்விண்ட் UI கிட் மூலம் வரையறுக்கப்பட வேண்டும் அல்லது வழங்கப்பட வேண்டும். இந்த எடுத்துக்காட்டில், நாம் குரூப் வேரியன்ட் பயன்பாட்டில் கவனம் செலுத்துகிறோம்.

எடுத்துக்காட்டு 4: அக்கார்டியன்கள் மற்றும் விரிவாக்கக்கூடிய பிரிவுகள்

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

சூழ்நிலை: ஒரு அக்கார்டியன் உருப்படியின் தலைப்பு நிறம் மாற வேண்டும் மற்றும் பிரிவு விரிவாக்கப்படும்போது ஒரு ஐகான் சுழல வேண்டும்.

<div class="border border-gray-200 rounded-lg mb-4"
     >
  <button class="group w-full text-left px-6 py-4 flex justify-between items-center"
          >
    <span class="text-lg font-semibold text-gray-700"
          >
      உலகளாவிய சந்தைப் போக்குகள்
    </span>
    
    <!-- ஐகான் -->
    <svg class="w-6 h-6 text-gray-400 group-focus:text-blue-500 group-hover:text-blue-500 transition duration-300"
         fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"
         >
      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"
            ></path>
    </svg>
  </button>
  
  <!-- அக்கார்டியன் உள்ளடக்கம் -->
  <div class="px-6 pb-4 text-gray-600"
       >
    <p class="text-sm"
       >
      தற்போதைய உலகளாவிய பொருளாதார மாற்றங்கள், நுகர்வோர் நடத்தை மற்றும் வளர்ந்து வரும் சந்தை வாய்ப்புகளை பகுப்பாய்வு செய்யுங்கள்.
    </p>
  </div>
</div>

<!-- நிலைக்காக வேறுபட்ட அணுகுமுறையுடன் எடுத்துக்காட்டு -->
<div class="border border-gray-200 rounded-lg mb-4"
     >
  <button class="group/acc-header w-full text-left px-6 py-4 flex justify-between items-center"
          >
    <span class="text-lg font-semibold text-gray-700 group-focus/acc-header:text-blue-700"
          >
      தொழில்நுட்ப முன்னேற்றங்கள்
    </span>
    
    <!-- ஐகான் -->
    <svg class="w-6 h-6 text-gray-400 group-focus/acc-header:text-blue-700 group-hover/acc-header:rotate-180 transition duration-300"
         fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"
         >
      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"
            ></path>
    </svg>
  </button>
  
  <!-- அக்கார்டியன் உள்ளடக்கம் -->
  <div class="px-6 pb-4 text-gray-600"
       >
    <p class="text-sm"
       >
      உலகளவில் வணிகங்களை பாதிக்கும் AI, பிளாக்செயின் மற்றும் நிலையான தொழில்நுட்பத்தில் சமீபத்தியவற்றை ஆராயுங்கள்.
    </p>
  </div>
</div>

விளக்கம்:

button உறுப்பு ஊடாடும் தலைப்பாக செயல்படுகிறது மற்றும் group வகுப்புடன் குறிக்கப்பட்டுள்ளது.
பொத்தானுக்குள் உள்ள span group-focus:text-blue-500 மற்றும் group-hover:text-blue-500 ஐப் பயன்படுத்துகிறது. இது பொத்தான் (குழு) ஃபோகஸ் செய்யப்படும்போது அல்லது hover செய்யப்படும்போது உரையின் நிறத்தை மாற்றுகிறது.
svg ஐகான் அனிமேஷனுக்காக transition duration-300 ஐப் பயன்படுத்துகிறது. பெற்றோர் குழு hover செய்யப்படும்போது ஐகானைச் சுழற்ற நாம் group-hover:rotate-180 ஐப் பயன்படுத்தலாம் (நாம் ஒரு `rotate-180` வகுப்பை வரையறுத்தால் அல்லது டெயில்விண்டின் தன்னிச்சையான மதிப்புகளைப் பயன்படுத்தினால்). இரண்டாவது எடுத்துக்காட்டில், group-focus/acc-header:text-blue-700 மற்றும் group-hover/acc-header:rotate-180 ஆகியவை ஸ்டைலிங்கிற்காக குறிப்பிட்ட கூடுகட்டிய குழுக்களை இலக்காகக் காட்டுவதை நிரூபிக்கின்றன.
ஒரு உண்மையான அக்கார்டியனில், நீங்கள் பொதுவாக ஜாவாஸ்கிரிப்ட் மூலம் பெற்றோர் குழுவில் ஒரு வகுப்பை (எ.கா., `is-open`) மாற்றுவீர்கள், பின்னர் `group-open:rotate-180` அல்லது ஒத்த தனிப்பயன் வேரியன்ட்களைப் பயன்படுத்துவீர்கள். இருப்பினும், எளிமையான hover/focus ஊடாடல்களுக்கு, குரூப் வேரியன்ட்கள் மட்டுமே போதுமானது.

மேம்பட்ட நுட்பங்கள் மற்றும் தனிப்பயனாக்கம்

முக்கிய செயல்பாடு நேரடியானது என்றாலும், குரூப் வேரியன்ட்கள் மேம்பட்ட பயன்பாட்டிற்கு இடம் அளிக்கின்றன:

1. குரூப் வேரியன்ட்களை இணைத்தல்

சிக்கலான ஊடாடல்களை உருவாக்க நீங்கள் பல குரூப் வேரியன்ட்களை அடுக்கலாம். உதாரணமாக, பெற்றோர் hover செய்யப்படும்போது *மற்றும்* சரிபார்க்கப்படும்போது மட்டுமே ஒரு உறுப்பை ஸ்டைல் செய்வது:

<div class="group/item checked:bg-blue-100 border p-4 rounded-md"
     >
  <div class="group-hover:scale-105 group-checked:scale-110 transition-transform"
       >
    உருப்படி உள்ளடக்கம்
  </div>
</div>

இங்கே, group-hover:scale-105 பெற்றோர் hover செய்யப்படும்போது பொருந்தும், மற்றும் group-checked:scale-110 பெற்றோர் சரிபார்க்கப்படும்போது பொருந்தும். group-checked வேலை செய்ய, பெற்றோர் உறுப்பு ஒரு சரிபார்க்கப்பட்ட நிலையைப் பிரதிபலிக்க ஒரு வழிமுறை தேவைப்படும், இது பெரும்பாலும் ஜாவாஸ்கிரிப்ட் மூலம் ஒரு வகுப்பை மாற்றுவதன் மூலம் செய்யப்படுகிறது.

2. `tailwind.config.js` இல் வேரியன்ட்களை தனிப்பயனாக்குதல்

டெயில்விண்ட் CSS மிகவும் விரிவாக்கக்கூடியது. உங்கள் tailwind.config.js கோப்பில் உங்கள் சொந்த தனிப்பயன் வேரியன்ட்களை, குரூப் வேரியன்ட்கள் உட்பட, வரையறுக்கலாம். இது மீண்டும் பயன்படுத்தக்கூடிய, திட்ட-குறிப்பிட்ட நிலை மாற்றிகளை உருவாக்க உங்களை அனுமதிக்கிறது.

உதாரணமாக, ஒரு group-data-* வேரியன்ட்டை உருவாக்க:

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      // ... மற்ற உள்ளமைவுகள்
    },
  },
  plugins: [
    // ... மற்ற செருகுநிரல்கள்
    require('tailwindcss-data-attributes')({ // இந்த செருகுநிரலை நிறுவ வேண்டும்
      attribute: 'data',
      variants: ['group-data'], // group-data-* வேரியன்ட்களை உருவாக்குகிறது
    })
  ],
}

இந்த உள்ளமைவுடன், நீங்கள் பின்னர் பயன்படுத்தலாம்:

<div class="group data-[state=active]:bg-purple-200"
     data-state="active"
     >
  இந்த div செயலில் உள்ளது.
</div>

<div class="group group-data-[state=active]:text-purple-600"
     data-state="active"
     >
  மற்றொரு உறுப்பு
</div>

இது தரவு பண்புகளைப் பயன்படுத்தி நிலையை நிர்வகிக்கும் ஜாவாஸ்கிரிப்ட் கட்டமைப்புகளுடன் ஒருங்கிணைக்க குறிப்பாக சக்தி வாய்ந்தது.

3. அணுகல்தன்மை பரிசீலனைகள்

குரூப் வேரியன்ட்களைப் பயன்படுத்தும்போது, ஊடாடும் நிலைகள் சொற்பொருள் HTML மற்றும் நிலையான அணுகல்தன்மை நடைமுறைகள் மூலமாகவும் தெரிவிக்கப்படுவதை எப்போதும் உறுதிப்படுத்திக் கொள்ளுங்கள். உதாரணமாக, கீபோர்டு பயனர்களுக்கு ஃபோகஸ் நிலைகள் தெளிவாக இருப்பதை உறுதிசெய்து, வண்ண வேறுபாடு விகிதங்கள் பராமரிக்கப்படுவதை உறுதிப்படுத்திக் கொள்ளுங்கள். குரூப் வேரியன்ட்கள் அடிப்படை அணுகல்தன்மை நடவடிக்கைகளை மேம்படுத்த வேண்டுமே தவிர, மாற்றக்கூடாது.

ஊடாடும் ஆனால் சொந்த ஊடாடும் நிலைகள் இல்லாத உறுப்புகளுக்கு (கிளிக் செய்யக்கூடிய கார்டாக செயல்படும் ஒரு நான்-பட்டன் div போன்றவை), நீங்கள் ARIA ரோல்களை (எ.கா., role="button", tabindex="0") சேர்ப்பதையும் மற்றும் கீபோர்டு நிகழ்வுகளை முறையாகக் கையாள்வதையும் உறுதிப்படுத்திக் கொள்ளுங்கள்.

பொதுவான தவறுகள் மற்றும் அவற்றை தவிர்ப்பது எப்படி

சக்தி வாய்ந்ததாக இருந்தாலும், குரூப் வேரியன்ட்கள் சில நேரங்களில் குழப்பத்தின் ஆதாரமாக இருக்கலாம்:

`group` வகுப்பை மறப்பது: மிகவும் பொதுவான தவறு. பெற்றோர் உறுப்பில் எப்போதும் group வகுப்பு பயன்படுத்தப்பட்டிருப்பதை உறுதிப்படுத்திக் கொள்ளுங்கள்.
தவறான பெற்றோர்/குழந்தை உறவு: குரூப் வேரியன்ட்கள் group/ அடையாளங்காட்டியைப் பயன்படுத்தும்போது நேரடி அல்லது ஆழமாக கூடுகட்டிய சந்ததியினருக்கு மட்டுமே வேலை செய்யும். அவை உடன்பிறப்பு உறுப்புகளுக்கு அல்லது குழுவின் படிநிலைக்கு வெளியே உள்ள உறுப்புகளுக்கு வேலை செய்யாது.
ஒன்றின் மேல் ஒன்று வரும் குழு நிலைகள்: வெவ்வேறு குழு நிலைகள் எவ்வாறு ஊடாடக்கூடும் என்பதில் கவனமாக இருங்கள். சிக்கலான கட்டமைப்புகளில் தெளிவுக்காக குறிப்பிட்ட குழு அடையாளங்காட்டிகளை (group/identifier) பயன்படுத்தவும்.
அதிகப்படியான மாற்றங்களுடன் செயல்திறன்: மாற்றங்கள் சிறந்தவை என்றாலும், அவற்றை பல பண்புகளில் பல உறுப்புகளுக்குப் பயன்படுத்துவது செயல்திறனை பாதிக்கலாம். உங்கள் மாற்றங்களை விவேகத்துடன் மேம்படுத்தவும்.
நிலை மேலாண்மை சிக்கலானது: சிக்கலான டைனமிக் UI-களுக்கு, நிலை மாற்றங்களுக்கு குரூப் வேரியன்ட்களை மட்டுமே நம்பியிருப்பது (குறிப்பாக எளிய hover/focus க்கு அப்பால் பயனர் ஊடாடலால் இயக்கப்படுபவை) பெற்றோரின் நிலையை நிர்வகிக்க (எ.கா., வகுப்புகளைச் சேர்ப்பது/நீக்குவது) துணை ஜாவாஸ்கிரிப்ட் தேவைப்படலாம்.

முடிவுரை

டெயில்விண்ட் CSS குரூப் வேரியன்ட்கள் அதிநவீன, ஊடாடும் மற்றும் பராமரிக்கக்கூடிய பயனர் இடைமுகங்களை உருவாக்குவதற்கான ஒரு கேம்-சேஞ்சர் ஆகும். உங்கள் HTML க்குள் நேரடியாக பெற்றோர் நிலை ஸ்டைலிங்கை இயக்குவதன் மூலம், அவை மேம்பாட்டை நெறிப்படுத்துகின்றன, CSS அளவைக் குறைக்கின்றன, மற்றும் ஒட்டுமொத்த வடிவமைப்பு செயல்முறையை மேம்படுத்துகின்றன.

நீங்கள் பதிலளிக்கக்கூடிய வழிசெலுத்தல், டைனமிக் கார்டுகள், அல்லது அணுகக்கூடிய படிவ உறுப்புகளை உருவாக்குகிறீர்களானாலும், குரூப் வேரியன்ட்களில் தேர்ச்சி பெறுவது உங்களை மேலும் ஈர்க்கக்கூடிய மற்றும் மெருகூட்டப்பட்ட வலை அனுபவங்களை உருவாக்க அதிகாரம் அளிக்கும். உங்கள் பெற்றோர் உறுப்புகளுக்கு எப்போதும் group வகுப்பைப் பயன்படுத்த நினைவில் கொள்ளுங்கள் மற்றும் பல்வேறு group-* முன்னொட்டுகளை அவற்றின் முழு திறனுக்கும் பயன்படுத்தவும். இன்னும் ಹೆಚ್ಚಿನ கட்டுப்பாட்டிற்கு தனிப்பயன் வேரியன்ட்களை ஆராயுங்கள், மற்றும் உங்கள் வடிவமைப்பு முடிவுகளில் எப்போதும் அணுகல்தன்மையை முன்னணியில் வைத்திருங்கள்.

குரூப் வேரியன்ட்களின் சக்தியைத் தழுவி, உங்கள் டெயில்விண்ட் CSS திட்டங்கள் நேர்த்தியிலும் செயல்பாட்டிலும் புதிய உயரங்களை எட்டுவதைப் பாருங்கள்!