டெயில்விண்டில் உள்ள 'அலைன்-ஐட்டம்ஸ்' யூட்டிலிட்டிகளில் ஹோவரை எவ்வாறு பயன்படுத்துவது?

Teyilvintil Ulla Alain Aittams Yuttilittikalil Hovarai Evvaru Payanpatuttuvatu



டெயில்விண்ட் CSS வழங்குகிறது ' align-பொருட்கள் கொள்கலனின் குறுக்கு அச்சில் உள்ள நெகிழ்வு மற்றும் கட்டப் பொருட்களின் நிலையைக் கட்டுப்படுத்தும் பயன்பாடுகள். இது 'பொருட்கள்-தொடக்கம்', 'உருப்படிகள்-மையம்', 'பொருட்கள்-முடிவு', 'உருப்படிகள்-அடிப்படை', போன்ற பல்வேறு பயன்பாட்டு வகுப்புகளைக் கொண்டுள்ளது. மேலும், பயனர்கள் 'பொருட்கள்-<மதிப்பு> உடன் ஹோவர் சொத்தை பயன்படுத்தலாம். ” மிதவையில் கொள்கலனின் குறுக்கு அச்சில் நெகிழ்வு அல்லது கட்டம் உருப்படியின் நிலையை மாற்ற பயன்பாட்டு வகுப்புகள்.

டெயில்விண்ட் CSS இல் உள்ள align-items” பயன்பாடுகளில் மிதவையைப் பயன்படுத்துவதற்கான முறையை இந்தக் கட்டுரை எடுத்துக்காட்டுகிறது.







டெயில்விண்டில் உள்ள 'அலைன்-ஐட்டம்ஸ்' யூட்டிலிட்டிகளில் ஹோவரை எவ்வாறு பயன்படுத்துவது?

டெயில்விண்டில் உள்ள 'அலைன்-ஐட்டம்ஸ்' யூட்டிலிட்டிகளில் ஹோவரைப் பயன்படுத்த, ஒரு HTML கட்டமைப்பை உருவாக்கி, '' மிதவை 'விரும்பினால் பயன்பாட்டு வகுப்பு' பொருட்கள்-<மதிப்பு> கொள்கலனில் உள்ள பயன்பாடு. அடுத்து, HTML வலைப்பக்கத்தைப் பார்த்து, மாற்றங்களைச் சரிபார்க்க, குறிப்பிட்ட உறுப்பில் சுட்டியைக் கொண்டு செல்லவும்.



தொடரியல்



< உறுப்பு வர்க்கம் = 'மிடுதல்:பொருட்கள்-<மதிப்பு> ...' > ... உறுப்பு >


ஐ பின்வரும் விருப்பங்களில் ஒன்றை மாற்றவும்: 'தொடக்கம்', 'மையம்', 'முடிவு', 'அடிப்படை' அல்லது 'நீட்டு'.





உதாரணமாக

இந்த எடுத்துக்காட்டில், 'பொருட்கள்-தொடக்க' பண்புடன் ஒரு நெகிழ்வு கொள்கலனை உருவாக்குவோம். பின்னர், '' ஐப் பயன்படுத்துவோம் மிதவை:பொருட்கள்-மையம் 'வகுப்பில்'

”உறுப்பு. இது ஃப்ளெக்ஸ் பொருட்களை கொள்கலனின் குறுக்கு அச்சின் மையத்தில் மிதவையில் சீரமைக்கும்:



< உடல் >

< div வர்க்கம் = 'flex items-start hover:items-center justify- around text-center h-44 m-3 bg-pink-300 gap-4' >
< div வர்க்கம் = 'bg-pink-600 py-4 w-40' > 1 div >
< div வர்க்கம் = 'bg-pink-600 py-12 w-40' > 2 div >
< div வர்க்கம் = 'bg-pink-600 py-8 w-40' > 3 div >
div >

உடல் >


இங்கே:

    • ' பொருட்கள்-தொடக்கம் 'வகுப்பு ஃப்ளெக்ஸ் பொருட்களை கொள்கலனின் தொடக்கத்தில் செங்குத்தாக சீரமைக்கிறது.
    • ' மிதவை:பொருட்கள்-மையம் ” கிளாஸ் ஃப்ளெக்ஸ் பொருட்களை சுட்டி அவற்றின் மீது வட்டமிடும்போது கொள்கலனின் மையத்தில் செங்குத்தாக சீரமைக்கிறது.

வெளியீடு


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

முடிவுரை

டெயில்விண்டில் உள்ள 'அலைன்-ஐட்டம்ஸ்' பயன்பாடுகளில் ஹோவர் விளைவைப் பயன்படுத்த, ' மிதவை 'குறிப்பிட்ட பயன்பாட்டு வகுப்பு' பொருட்கள்-<மதிப்பு> 'ஃப்ளெக்ஸ் அல்லது கிரிட் கொள்கலனில் உள்ள பயன்பாடு. சரிபார்ப்புக்கு, வலைப்பக்கத்தில் குறிப்பிட்ட கொள்கலனில் சுட்டியை நகர்த்தவும். இந்தக் கட்டுரை டெயில்விண்டில் உள்ள 'அலைன்-ஐட்டம்ஸ்' பயன்பாடுகளில் ஹோவர் விளைவைப் பயன்படுத்துவதற்கான எடுத்துக்காட்டுகளை விளக்கியுள்ளது.