ஒரு பயனர் தனது வலைப்பக்கத்திற்கான உருப்படிகளின் பட்டியலை உருவாக்க வேண்டும் என்று வைத்துக்கொள்வோம். வடிவமைப்பு செயல்முறையை எளிதாக்க, டெயில்விண்ட் பல்வேறு பட்டியல்-பாணி வகுப்புகளை வழங்குகிறது, அவை பட்டியல் உறுப்புகளின் வகை, நிலை மற்றும் சீரமைப்பு ஆகியவற்றை மாற்ற பயன்படுகிறது.
இந்தக் கட்டுரை டெயில்விண்டில் பட்டியல் பாணி வகையை அமைப்பதற்கான செயல்முறையை வழங்கும்.
டெயில்விண்டில் லிஸ்ட் ஸ்டைல் வகையை எப்படி அமைப்பது?
டெயில்விண்ட் மூன்று இயல்புநிலை பட்டியல் பாணி வகைகளை வழங்குகிறது. அவை வழங்குவதற்குப் பயன்படுத்தப்படுகின்றன ' குறிப்பான் பட்டியல் உருப்படிகளுக்கான பாணி. மூன்று இயல்புநிலை பட்டியல் பாணி வகை வகுப்புகள் பின்வருமாறு விவரிக்கப்பட்டுள்ளன:
- பட்டியல்-வட்டு: இந்த வகுப்பு வட்டமான புல்லட் புள்ளிகளை பட்டியல் மார்க்கராக வழங்கும்.
- பட்டியல்-தசமம்: இந்த வகுப்பு தசம எண்களை பட்டியல் மார்க்கராக வழங்கும்.
- பட்டியல்-இல்லை: இந்த வகுப்பு உருப்படிகளில் இருந்து ஏதேனும் பட்டியல் குறிப்பான்களை அகற்றும்.
பட்டியல் பாணி வகைகளைப் பயன்படுத்துவதற்கான தொடரியல் பின்வருமாறு:
< உல் வர்க்கம் = 'list-{style}' > < / உல் >
சிறந்த புரிதலுக்காக, கீழே கொடுக்கப்பட்டுள்ள ஆர்ப்பாட்டமானது, உருப்படிகளை பட்டியலிட வெவ்வேறு மார்க்கர் பாணிகளை வழங்க, மேலே வரையறுக்கப்பட்ட தொடரியல் பயன்படுத்தும். இந்த எடுத்துக்காட்டில், டெயில்விண்டில் உள்ள இயல்புநிலை பட்டியல் பாணி வகுப்புகளைப் பயன்படுத்தி மூன்று பட்டியல் கூறுகள் உருவாக்கப்பட்டு வெவ்வேறு மார்க்கர் பாணிகளுடன் வழங்கப்படும்:
< ப வர்க்கம் = 'உரை-மைய உரை-xl எழுத்துரு-தடித்த' > இயல்புநிலை வேறுபட்ட பட்டியல் உடை டெயில்விண்டில் உள்ள வகைகள்< / ப >
< br >
< div வர்க்கம் = 'ஃப்ளெக்ஸ் ஜஸ்டிஃபை-சென்டர் ஸ்பேஸ்-எக்ஸ்-20 பிஜி-ஸ்லேட்-100 வட்டமான-எல்ஜி எம்எக்ஸ்-4 ப-2' >
< உல் வர்க்கம் = 'பட்டியல்-வட்டு' >
பட்டியல் # 1
< அந்த >இது முதல் உருப்படி< / அந்த >
< அந்த >இது இரண்டாவது உருப்படி< / அந்த >
< அந்த >இது மூன்றாவது உருப்படி< / அந்த >
< / உல் >
< உல் வர்க்கம் = 'பட்டியல்-தசமம்' >
பட்டியல் # 2
< அந்த >இது முதல் உருப்படி< / அந்த >
< அந்த >இது இரண்டாவது உருப்படி< / அந்த >
< அந்த >இது மூன்றாவது உருப்படி< / அந்த >
< / உல் >
< உல் வர்க்கம் = 'பட்டியல்-இல்லை' >
பட்டியல் # 3
< அந்த >இது முதல் உருப்படி< / அந்த >
< அந்த >இது இரண்டாவது உருப்படி< / அந்த >
< அந்த >இது மூன்றாவது உருப்படி< / அந்த >
< / உல் >
< / div >
மேலே உள்ள குறியீட்டின் விளக்கம் பின்வருமாறு:
- ஒரு ' 'உறுப்பு' உடன் உருவாக்கப்பட்டது xl 'எழுத்துரு அளவு மற்றும் ஒரு' தைரியமான ” எழுத்துரு எடை. உறுப்பின் உரை உள்ளடக்கம் 'ஐப் பயன்படுத்தி மையத்தில் நிலைநிறுத்தப்பட்டுள்ளது உரை மையம் ' வர்க்கம்.
- ஒரு வரி இடைவெளிக்குப் பிறகு, ' 'உறுப்பு உருவாக்கப்பட்டது மற்றும் ஒரு' உடன் வழங்கப்படுகிறது நெகிழ்வு ' வர்க்கம். இது குழந்தை பொருட்களை கிடைமட்டமாக சீரமைக்கும் கொள்கலனை உருவாக்கும்.
- ' நியாயப்படுத்த-மையம் ” வகுப்பு பொருட்களை கொள்கலனின் மையத்தில் வைக்கும்.
- ' space-x-{size} 'வகுப்பு உருப்படிகளுக்கு இடையில் கிடைமட்ட இடைவெளியை வழங்குகிறது.
- ' bg-{color}-{number} ” வகுப்பானது கொள்கலனின் பின்னணியை குறிப்பிட்ட நிறத்திற்கு அமைக்கிறது.
- ' வட்டமான-எல்ஜி ” வர்க்கம் கொள்கலனின் மூலைகளை வட்டமாக்கும்.
- ' mx-4 ” வகுப்பு ஃப்ளெக்ஸ் கொள்கலனுக்கு கிடைமட்ட விளிம்பை வழங்குகிறது.
- ' ப-2 'வகுப்பு நெகிழ்வு கொள்கலனுக்கு திணிப்பு வழங்குகிறது.
- அடுத்து, மூன்று பட்டியல் கூறுகள் உருவாக்கப்பட்டு, ''ஐப் பயன்படுத்தி வெவ்வேறு பட்டியல் பாணி வகைகளுடன் வழங்கப்படுகின்றன. பட்டியல்-{வகை} ' வர்க்கம்.
வெளியீடு:
கீழே உள்ள வெளியீட்டில் இருந்து, முதல் பட்டியல் புல்லட் புள்ளிகளைப் பயன்படுத்துகிறது, இரண்டாவது தசம எண்களைப் பயன்படுத்துகிறது மற்றும் மூன்றாவது எந்த உருப்படி மார்க்கரையும் பயன்படுத்தவில்லை என்பதைக் காணலாம்.
டெயில்விண்டில் மாநில மாறுபாடுகளுடன் பட்டியல் பாணி வகுப்பைப் பயன்படுத்துதல்
டெயில்விண்டில் உள்ள டிஃபால்ட் நிலை மாறுபாடுகளுடன் டிசைனை மேலும் டைனமிக் செய்ய லிஸ்ட் ஸ்டைல் வகுப்பைப் பயன்படுத்தலாம். ஹோவர், ஃபோகஸ் மற்றும் ஆக்டிவ் நிலை மாறுபாடுகளைப் பயன்படுத்தி, குறிப்பிட்ட நிலை தூண்டப்படும் போதெல்லாம், பட்டியல் உருப்படிகளின் மார்க்கர் பாணியை பயனர் மாற்றலாம். மாநில மாறுபாடுகளுடன் பட்டியல் பாணி வகுப்பைப் பயன்படுத்துவதற்கான தொடரியல் பின்வருமாறு:
< உல் வர்க்கம் = '{state}:list-{style}...' > / உல் >பட்டியல் பாணி வகையை “ஹோவர்” நிலையுடன் பயன்படுத்துவதற்கான எடுத்துக்காட்டு இங்கே உள்ளது, அங்கு பயனர் பட்டியல் தொகுதியின் மீது வட்டமிடுவதன் மூலம் மார்க்கர் பாணியை மாற்றலாம்:
< ப வர்க்கம் = 'உரை-மைய உரை-xl எழுத்துரு-தடித்த' >மார்க்கர் ஸ்டைலை மாற்ற லிஸ்ட் பிளாக்கின் மேல் கர்சரைக் கொண்டு செல்லவும்< / ப >
< br >
< div வர்க்கம் = 'ஃப்ளெக்ஸ் ஜஸ்டிஃபை-சென்டர் ஸ்பேஸ்-எக்ஸ்-20 பிஜி-ஸ்லேட்-100 வட்டமான-எல்ஜி எம்எக்ஸ்-4 ப-2' >
< உல் வர்க்கம் = 'list-disc hover:list-decimal' >
பட்டியல் # 1
< அந்த >இது முதல் உருப்படி< / அந்த >
< அந்த >இது இரண்டாவது உருப்படி< / அந்த >
< அந்த >இது மூன்றாவது உருப்படி< / அந்த >
< / உல் >
< / div >மேலே உள்ள குறியீட்டில், பட்டியல் ' பட்டியல்-வட்டு ”வகுப்பு இயல்புநிலை பட்டியல் பாணி வகை. இருப்பினும், ' மிதவை: பட்டியல்-தசம ” வகுப்பு, பட்டியல் தொகுதியின் மீது பயனர் மவுஸ் கர்சரை நகர்த்தும்போது பட்டியல் பாணி வகை மாற்றப்படும்.
வெளியீடு:
பட்டியல் தொகுதியின் மீது கர்சர் வட்டமிடும்போது பட்டியல் வகை நடை புல்லட் பட்டியலிலிருந்து எண்ணிடப்பட்ட பட்டியலுக்கு மாறுகிறது என்பதை கீழே உள்ள வெளியீடு காட்டுகிறது.
டெயில்விண்டில் உள்ள பிரேக் பாயிண்ட்களுடன் பட்டியல் பாணி வகுப்பைப் பயன்படுத்துதல்
வெவ்வேறு திரை அளவுகளுக்கான தளவமைப்பின் பதிலளிக்கக்கூடிய வடிவமைப்பிற்கு பிரேக் பாயிண்ட்கள் பயன்படுத்தப்படுகின்றன. டெயில்விண்ட் வழங்கும் ஐந்து இயல்புநிலை பிரேக் பாயிண்டுகள் sm, md, lg, xl மற்றும் 2xl ஆகும். பட்டியல் வகை பாணி வகுப்பை முறிவு புள்ளியுடன் வழங்க பின்வரும் தொடரியல் பயன்படுத்தப்படுகிறது:
< உல் வர்க்கம் = '{breakpoint}:list-{style}...' > / உல் >பட்டியல் பாணி வகையைப் பயன்படுத்துவதற்கான எடுத்துக்காட்டு இங்கே உள்ளது ' எம்டி ” பிரேக் பாயிண்ட், திரை அளவு “md” பிரேக் பாயிண்டை அடையும் போது மார்க்கர் ஸ்டைல் மாறும்:
< ப வர்க்கம் = 'உரை-மைய உரை-xl எழுத்துரு-தடித்த' > திரையை அதிகரிக்கவும் அளவு மார்க்கர் ஸ்டைலை மாற்ற < / ப >
< br >
< div வர்க்கம் = 'ஃப்ளெக்ஸ் ஜஸ்டிஃபை-சென்டர் ஸ்பேஸ்-எக்ஸ்-20 பிஜி-ஸ்லேட்-100 வட்டமான-எல்ஜி எம்எக்ஸ்-4 ப-2' >
< உல் வர்க்கம் = 'list-disc md:list-decimal' >
பட்டியல் # 1
< அந்த >இது முதல் உருப்படி< / அந்த >
< அந்த >இது இரண்டாவது உருப்படி< / அந்த >
< அந்த >இது மூன்றாவது உருப்படி< / அந்த >
< / உல் >
< / div >மேலே உள்ள குறியீட்டில், பட்டியல் ' பட்டியல்-வட்டு 'வகுப்பு இயல்புநிலை பாணியாக உள்ளது. இருப்பினும், ' md:list-decimal 'md' திரை அளவுக்கான பட்டியல் பாணி வகை மாறும்.
வெளியீடு:
கீழே உள்ள வெளியீட்டில் நீங்கள் பார்க்க முடியும், திரையின் அளவு 'ஐ அடையும் போது பட்டியல் பாணி வகை வட்டில் இருந்து தசமமாக மாறுகிறது எம்டி ” முறிவு புள்ளி.
டெயில்விண்டில் பட்டியல் ஸ்டைல் வகையை அமைப்பது தான்.
முடிவுரை
டெயில்விண்ட் ஒரு உறுப்பின் பட்டியல் பாணியை மாற்றுவதற்கு முன் வரையறுக்கப்பட்ட மூன்று பட்டியல் பாணி வகை வகுப்புகளை வழங்குகிறது. ' பட்டியல்-வட்டு 'வகுப்பு பொருட்களை பட்டியலிட புல்லட் புள்ளிகளை வழங்குகிறது. ' பட்டியல்-தசம ” வகுப்பு என்பது பொருட்களை பட்டியலிடுவதற்கான எண்களை வழங்குகிறது. ' பட்டியல்-இல்லை ” வகுப்பு எந்த உருப்படி மார்க்கரையும் பயன்படுத்தாத பட்டியலை உருவாக்குகிறது. இந்தக் கட்டுரை டெயில்விண்டில் பட்டியல் பாணி வகையை அமைப்பதற்கான செயல்முறையை வழங்குகிறது.