இந்தக் கட்டுரை டெயில்விண்டில் உள்ள ஹோவர், ஃபோகஸ் மற்றும் பிற மாநிலங்களுக்கு குறைந்தபட்ச உயரச் சொத்தைப் பயன்படுத்துவதற்கான செயல்முறையை வழங்கும்.
குறிப்பு: டெயில்விண்டில் குறைந்தபட்ச உயர வகுப்புகளைப் பற்றி மேலும் அறிய, இதைப் படியுங்கள் கட்டுரை எங்கள் இணையதளத்தில்.
டெயில்விண்டில் ஹோவர், ஃபோகஸ் மற்றும் பிற மாநிலங்களுக்கு குறைந்தபட்ச உயர சொத்தை எவ்வாறு பயன்படுத்துவது?
டெயில்விண்ட் வடிவமைப்பு பண்புகளுடன் வழங்கக்கூடிய இயல்புநிலை மாறுபாடுகளை வழங்குகிறது. இந்த நிலை மாறுபாடுகளில் 'ஹோவர்', 'ஃபோகஸ்' மற்றும் 'ஆக்டிவ்' ஆகியவை அடங்கும். இந்த மாநில மாறுபாடுகளின் விளக்கம் பின்வருமாறு:
- தி' மிதவை மவுஸ் கர்சர் ஒரு உறுப்பு மீது வட்டமிடும் போதெல்லாம் ” நிலை தூண்டப்படுகிறது.
- ' கவனம் உறுப்பு மையமாக இருக்கும் போதெல்லாம் நிலை தூண்டப்படுகிறது.
- ' செயலில் உறுப்பு செயல்படுத்தப்படும் அல்லது கிளிக் செய்யும் போதெல்லாம் 'நிலை தூண்டப்படுகிறது.
இந்த ஒவ்வொரு மாநிலங்களுடனும் குறைந்தபட்ச உயர சொத்தை ஒவ்வொன்றாகப் பயன்படுத்துவோம்.
மிதவை நிலையுடன் குறைந்தபட்ச உயரப் பண்புகளைப் பயன்படுத்துதல்
பயன்படுத்த ' குறைந்தபட்ச உயரம் ” டெயில்விண்டில் மிதவை நிலை மாறுபாடு கொண்ட வகுப்பு, பின்வரும் தொடரியல் பயன்படுத்தப்படுகிறது:
< div வர்க்கம் = 'ஹோவர்: நிமிடம்-ம-{அளவு}...' > < / div >
ஒரு ஆர்ப்பாட்டத்தில் மேலே வரையறுக்கப்பட்ட தொடரியல் பயன்படுத்துவோம். இந்த எடுத்துக்காட்டில், மவுஸ் கர்சர் உறுப்பு மீது வட்டமிடும் போதெல்லாம் ஒரு தனிமத்தின் குறைந்தபட்ச உயரத்தை அதிகரிப்போம்.
< div வர்க்கம் = 'min-h-fit rounded-md bg-blue-700 text-center text-white hover:min-h-screen' > குறைந்தபட்சத்தை அதிகரிக்க வட்டமிடுங்கள் உயரம் < / div >மேலே உள்ள குறியீட்டின் விளக்கம் பின்வருமாறு:
- ' min-w-fit 'வகுப்பு அதன் உள்ளடக்கத்தை பொருத்துவதற்கு div உறுப்புக்கு தேவையான உயரத்திற்கு குறைந்தபட்ச உயர வரம்பை அமைக்கிறது.
- ' மிதவை: நிமிடம்-வ-திரை ” வகுப்பானது திரை அளவின் 100%க்கு சமமான குறைந்தபட்ச உயர வரம்பை வழங்கும்.
- ' வட்டமான-எம்.டி ',' bg-{color}-{number} ',' உரை மையம் ', மற்றும் ' உரை-வெள்ளை 'வகுப்புகள் முறையே வட்டமான மூலைகள், பின்னணி நிறம், மையமாக சீரமைக்கப்பட்ட உரை மற்றும் DIV உறுப்புக்கான வெள்ளை உரை நிறம் ஆகியவற்றிற்கு பொறுப்பாகும். வட்ட உறுப்புகளின் மூலைகள்.
வெளியீடு:
மவுஸ் கர்சர் அதன் மேல் வட்டமிடும்போது, உறுப்பின் குறைந்தபட்ச உயரம் திரை அளவின் 100% ஆக அதிகரிக்கிறது என்பது கீழே உள்ள வெளியீட்டில் இருந்து தெளிவாகிறது.
ஃபோகஸ் ஸ்டேட்டுடன் குறைந்தபட்ச உயரப் பண்புகளைப் பயன்படுத்துதல்
பயன்படுத்த ' குறைந்தபட்ச உயரம் ” டெயில்விண்டில் கவனம் நிலை கொண்ட வகுப்பு, பின்வரும் தொடரியல் பயன்படுத்தப்படுகிறது:
< div வர்க்கம் = 'focus:min-h-{size}...' > < / div >ஒரு ஆர்ப்பாட்டத்தில் மேலே வரையறுக்கப்பட்ட தொடரியல் பயன்படுத்துவோம். இந்த எடுத்துக்காட்டில், பயனர் கவனம் செலுத்தும்போது உள்ளீட்டு புலத்தின் குறைந்தபட்ச உயரம் அதிகரிக்கும்.
< உள்ளீடு இடப்பெயர்ச்சி = 'இந்த உள்ளீட்டு புலத்தில் கவனம் செலுத்து' வர்க்கம் = 'min-h-0 h-fit w-48 rounded-md bg-gray-200 text-center focus:min-h-[35%]' >< / உள்ளீடு >மேலே உள்ள குறியீட்டின் விளக்கம் பின்வருமாறு:
- ஒரு ' உள்ளீடு ” என்ற புலமானது ஒதுக்கிடப் பண்புக்கூறில் சில உரையுடன் உருவாக்கப்பட்டது.
- இதைப் பயன்படுத்தி குறைந்தபட்ச உயர வரம்பு 0px வழங்கப்படுகிறது. நிமிடம்-h-0 ' வர்க்கம். எனவே, டெவலப்பர் 'உறுப்பின் இயல்புநிலை உயரத்தை உள்ளடக்கத்தை பொருத்துவதற்கு தேவையான உயரத்திற்கு சமமாக அமைக்கிறார் ' h-பொருத்தம் ' வர்க்கம்.
- ' கவனம்:நிமிடம்-[35%] 'பயனர் கவனம் செலுத்தும்போது உள்ளீட்டு புலத்தின் குறைந்தபட்ச உயர வரம்பை வகுப்பு அதிகரிக்கும்.
வெளியீடு:
பயனர் கவனம் செலுத்தும்போது உள்ளீட்டு புலத்தின் உயரம் அதிகரிக்கிறது என்பது கீழே உள்ள வெளியீட்டிலிருந்து தெளிவாகிறது. ஏனென்றால், குறைந்தபட்ச உயர வரம்பு திரை உயரத்தில் 0px இலிருந்து 35% வரை அதிகரிக்கிறது.
டெயில்விண்டில் ஆக்டிவ் ஸ்டேட்டுடன் குறைந்தபட்ச உயரமான சொத்தைப் பயன்படுத்துதல்
பயன்படுத்த ' குறைந்தபட்ச உயரம் ” டெயில்விண்டில் செயலில் உள்ள நிலை மாறுபாடு கொண்ட சொத்து, பின்வரும் தொடரியல் பயன்படுத்தப்படுகிறது:
< div வர்க்கம் = 'செயலில்:min-h-{size}...' > < / div >ஒரு ஆர்ப்பாட்டத்தில் மேலே வரையறுக்கப்பட்ட தொடரியல் பயன்படுத்துவோம். இந்த எடுத்துக்காட்டில், பயனர் செயலில் கிளிக் செய்யும் போது பொத்தானின் குறைந்தபட்ச உயரம் அதிகரிக்கும்.
< பொத்தானை வர்க்கம் = 'min-h-0 h-fit w-48 rounded-md bg-blue-300 text-center active:min-h-[35%]' > அதிகரிக்க கிளிக் செய்யவும் உயரம் < / பொத்தானை >குறைந்தபட்ச உயர வரம்பு 0px உடன் ஒரு பொத்தான் உருவாக்கப்பட்டது. இருப்பினும், ' செயலில்:நிமிடம்-[35%] ”பொத்தானைக் கிளிக் செய்யும்போதெல்லாம் குறைந்தபட்ச உயர வரம்பு திரை அளவின் 0px இலிருந்து 35% வரை அதிகரிக்கும்.
வெளியீடு:
பயனர் கிளிக் செய்யும் போது பொத்தானின் குறைந்தபட்ச உயரம் அதிகரிப்பதை பின்வரும் வெளியீட்டில் காணலாம்.
டெயில்விண்ட் ஹோவர், ஃபோகஸ் மற்றும் டெயில்விண்டில் உள்ள பிற மாநிலங்களுக்கு குறைந்தபட்ச உயரப் பண்புகளைப் பயன்படுத்துவதே இதுதான்.
முடிவுரை
டெயில்விண்டில் ஹோவர், ஃபோகஸ் மற்றும் ஆக்டிவ் போன்ற மாநில மாறுபாடுகள் பயனர்களை டைனமிக் டிசைன் லேஅவுட்களை உருவாக்க அனுமதிக்கின்றன. டெயில்விண்டில் மாநில மாறுபாடுகளுடன் குறைந்தபட்ச உயர வகுப்பைப் பயன்படுத்த, ' மிதவை:min-h-{value} ',' கவனம்: நிமிடம்-ம-{மதிப்பு} ', மற்றும் ' செயலில்:min-h-{value} 'வகுப்புகள் பயன்படுத்தப்படுகின்றன. இந்தக் கட்டுரை டெயில்விண்டில் குறைந்தபட்ச உயர வகுப்பைக் கொண்ட ஹோவர், ஃபோகஸ் மற்றும் பிற மாநிலங்களைப் பயன்படுத்துவதற்கான செயல்முறையை வழங்குகிறது.