இந்தக் கட்டுரை டெயில்விண்டில் பட்டியல் தொகுதியின் பட்டியல்-பாணி படத்தை அமைப்பதற்கான செயல்முறையை வழங்கும்.
டெயில்விண்டில் பட்டியல் பாணி பட வகுப்பை எவ்வாறு அமைப்பது?
டெயில்விண்டில் ஒரு படத்தை பட்டியல் மார்க்கராக வழங்க, பட்டியல் பாணி பட வகுப்பு பயன்படுத்தப்படுகிறது. இயல்பாக, டெயில்விண்ட் ' பட்டியல்-படம்-இல்லை பட்டியலுக்காக முன்னர் அமைக்கப்பட்ட படக் குறிப்பானை அகற்றுவதற்கு மட்டுமே பயன்படுத்தப்படும் வகுப்பு.
தொடரியல்
டெயில்விண்டில் பட்டியல் பாணி பட வகுப்பைப் பயன்படுத்துவதற்கான தொடரியல் பின்வருமாறு:
< உல் வர்க்கம் = 'list-image-[url({Image Url})]' > < / உல் >
இந்த தொடரியல் பட்டியல் உறுப்புக்கான குறிப்பானாக குறிப்பிட்ட படத்தை வழங்குகிறது.
< உல் வர்க்கம் = 'பட்டியல்-படம்-இல்லை' > < / உல் >
இந்த தொடரியல் பட்டியல் உறுப்புக்கான குறிப்பானாக முன்னர் அமைக்கப்பட்ட படங்களை நீக்குகிறது.
வரிசைப்படுத்தப்படாத பட்டியலில் ஒரு படத்தை குறிப்பானாகப் பயன்படுத்த மேலே வரையறுக்கப்பட்ட தொடரியல் பயன்படுத்துவோம். இந்த ஆர்ப்பாட்டத்தில், பயனர் ஒரு படத்தைக் கொண்டுள்ளார் “ handpointer.png ” அதே டெயில்விண்ட் திட்ட கோப்புறையில் உள்ளது. படம் வேறு ஏதேனும் கோப்புறையில் இருந்தால், பயனர் பட்டியல் பாணி பட வகுப்பிற்கு முழு பாதையையும் வழங்க வேண்டும். 'list-image' வகுப்பைப் பயன்படுத்தி அந்தப் படத்தை பட்டியல் மார்க்கராகப் பயன்படுத்துவோம்.
< div வர்க்கம் = 'ஃப்ளெக்ஸ் ஜஸ்டிஃபை-சென்டர்' >
< உல் வர்க்கம் = ' list-inside list-image-[url(handpointer.png)] space-y-2 rounded-md bg-green-400 p-2' >
மாதிரி பட்டியல்
< அந்த >இது முதல் உருப்படி< / அந்த >
< அந்த >இது இரண்டாவது உருப்படி< / அந்த >
< அந்த >இது மூன்றாவது உருப்படி< / அந்த >
< / உல் >
< / div >
மேலே உள்ள குறியீட்டின் விளக்கம் பின்வருமாறு:
- ஒரு ' 'உறுப்பு உருவாக்கப்பட்டது மற்றும் வழங்கப்படுகிறது' நெகிழ்வு ஒரு கொள்கலனில் பொருட்களை கிடைமட்டமாக சீரமைக்கும் வகுப்பு.
- ' நியாயப்படுத்த-மையம் ” வகுப்பு குழந்தை பொருட்களை கொள்கலனின் மையத்தில் சீரமைக்கிறது.
- அடுத்து, '
- இது ' பட்டியல்-உள்ளே ” வகுப்பானது குறிப்பிட்ட பட்டியல் உருப்படியை பட்டியல் தொகுதிக்குள் வைக்கும்.
- ' list-image-[url({Image Url})] 'உறுப்புக்கு பட்டியல் உருப்படி குறிப்பானாக ஒரு படத்தை வழங்குவதற்கு வகுப்பு பயன்படுத்தப்படுகிறது.
- ' இடம்-y-{எண்} 'வகுப்பு பட்டியல் உருப்படிகளுக்கு இடையே செங்குத்து இடைவெளியை வழங்குகிறது.
- ' வட்டமான-எம்.டி 'வகுப்பு பட்டியல் தொகுதியின் மூலைகளை வட்டமாக்குகிறது.
- ' bg-{color}-{number} பட்டியல் தொகுதிக்கு பின்னணி வண்ணத்தை வழங்குவதற்கு வகுப்பு பயன்படுத்தப்படுகிறது.
- ' ப-2 'வகுப்பு பட்டியல் உறுப்புக்கான எல்லையை வழங்குகிறது.
- ''ஐப் பயன்படுத்தி மூன்று பட்டியல் உருப்படிகள் உருவாக்கப்படுகின்றன <அது> ' குறிச்சொற்கள்.
வெளியீடு:
பட்டியல் உருப்படிகளுக்கான குறிப்பானாக ஒரு கை சுட்டி படம் அமைக்கப்பட்டிருப்பதை வெளியீட்டில் காணலாம்:
டெயில்விண்டில் லிஸ்ட் ஸ்டைல் இமேஜ் கிளாஸுடன் மாநில மாறுபாடுகளைப் பயன்படுத்துதல்
டெயில்விண்ட் ஹோவர், ஃபோகஸ் மற்றும் ஆக்டிவ் போன்ற பல்வேறு நிலை மாறுபாடுகளை வழங்குகிறது, இது ஊடாடும் வடிவமைப்புகளை உருவாக்க உதவுகிறது. இந்த நிலைகளுடன் பட்டியல்-பாணி பட வகுப்பைப் பயன்படுத்த, பின்வரும் தொடரியல் பயன்படுத்தப்படுகிறது:
< உல் வர்க்கம் = '{state}:list-image-{none or image url}' > < / உல் >பட்டியல்-பாணி பட சொத்தை '' உடன் பயன்படுத்த மேலே வரையறுக்கப்பட்ட தொடரியல் பயன்படுத்துவோம் மிதவை ” மாநிலம் டெயில்விண்ட். இந்த ஆர்ப்பாட்டத்தில், பட்டியல் குறிப்பானாக ஒரு படத்துடன் பட்டியல் வழங்கப்படும். இருப்பினும், ' மிதவை ” நிலையில், படம் அகற்றப்படும்.
< div வர்க்கம் = 'ஃப்ளெக்ஸ் ஜஸ்டிஃபை-சென்டர்' >
< உல் வர்க்கம் = ' list-inside list-image-[url(handpointer.png)] hover:list-image-none space-y-2 rounded-md bg-green-400 p-2' >
மாதிரி பட்டியல்
< அந்த >இது முதல் உருப்படி< / அந்த >
< அந்த >இது இரண்டாவது உருப்படி< / அந்த >
< அந்த >இது மூன்றாவது உருப்படி< / அந்த >
< / உல் >
< / div >மேலே உள்ள குறியீட்டில், ' மிதவை: பட்டியல்-படம்-இல்லை 'கிளாஸ் பட்டியல் மார்க்கராக முன்பு அமைக்கப்பட்ட படத்தை நீக்குகிறது.
வெளியீடு:
கீழே உள்ள வெளியீட்டில், பட்டியல்-பாணி படத்தை மீட்டமைக்கிறது ' எதுவும் இல்லை ” பயனர் மவுஸ் கர்சரை அதன் மேல் வைத்திருக்கும் போது. இதன் காரணமாக, பட்டியல் குறிப்பானாகப் பயன்படுத்தப்பட்ட படம் அகற்றப்பட்டது.
டெயில்விண்டில் லிஸ்ட் ஸ்டைல் இமேஜ் கிளாஸுடன் பிரேக் பாயின்ட்களைப் பயன்படுத்துதல்
பிரேக் பாயிண்ட்ஸ் என்பது டெயில்விண்டில் உள்ள உறுப்புகளுக்கு முன்பே அமைக்கப்பட்ட மீடியா வினவல்கள். பல்வேறு திரை அளவுகளுக்கு வடிவமைப்பை பதிலளிக்க அவை பயன்படுத்தப்படுகின்றன. இந்த முறிவுப் புள்ளிகளில் sm, md, lg, xl மற்றும் 2xl ஆகியவை அடங்கும். பிரேக் பாயிண்ட் உடன் பட்டியல்-பாணி பட வகுப்பைப் பயன்படுத்த, பின்வரும் தொடரியல் பயன்படுத்தப்படுகிறது:
< உல் வர்க்கம் = '{breakpoint}:list-image-{none அல்லது image url}' > < / உல் >மேலே வரையறுக்கப்பட்ட தொடரியலைப் பயன்படுத்தி பட்டியல் மார்க்கரை '' இலிருந்து மாற்றலாம் படம் ” முதல் ” எதுவும் இல்லை ” ஒரு பிரேக் பாயிண்ட் பயன்படுத்தி. இந்த எடுத்துக்காட்டில், திரையின் அளவு 'இன் அகலத்தை அதிகரித்தவுடன் பட மார்க்கர் அகற்றப்படும். எம்டி 'பிரேக் பாயிண்ட்:
< div வர்க்கம் = 'ஃப்ளெக்ஸ் ஜஸ்டிஃபை-சென்டர்' >
< உல் வர்க்கம் = ' list-inside list-image-[url(handpointer.png)] md:list-image-none space-y-2 rounded-md bg-green-400 p-2' >
மாதிரி பட்டியல்
< அந்த >இது முதல் உருப்படி< / அந்த >
< அந்த >இது இரண்டாவது உருப்படி< / அந்த >
< அந்த >இது மூன்றாவது உருப்படி< / அந்த >
< / உல் >
< / div >மேலே உள்ள குறியீட்டில், ' md:list-image-இல்லை திரை அளவு 'ஐ அடையும் போது 'வகுப்பு பட பட்டியல் மார்க்கரை நீக்குகிறது' எம்டி ” முறிவு புள்ளி.
வெளியீடு:
கீழே உள்ள வெளியீட்டில், திரை அளவு md பிரேக் பாயிண்டை அடையும் போது பட மார்க்கர் அகற்றப்படும்:
டெயில்விண்டில் பட்டியல்-பாணி படத்தை அமைப்பது தான்.
முடிவுரை
டெயில்விண்ட் இரண்டு முன் வரையறுக்கப்பட்ட பட்டியல்-பாணி பட வகுப்புகளைக் கொண்டுள்ளது. ' list-image-[url({Image Url})] ” class ஆனது குறிப்பிட்ட படத்தை பட்டியல் மார்க்கராக வழங்குகிறது. ' பட்டியல்-படம்-இல்லை 'கிளாஸ் பட்டியல் மார்க்கராக முன்னர் வழங்கப்பட்ட எந்தப் படத்தையும் நீக்குகிறது. இந்தக் கட்டுரை டெயில்விண்டில் பட்டியல் பாணி வகையை அமைப்பதற்கான செயல்முறையை வழங்குகிறது.