ఈ కథనం టెయిల్‌విండ్‌లోని హోవర్, ఫోకస్ మరియు ఇతర రాష్ట్రాలకు కనీస ఎత్తు ప్రాపర్టీని వర్తించే విధానాన్ని అందిస్తుంది.
గమనిక: Tailwindలో కనీస ఎత్తు తరగతుల గురించి మరింత తెలుసుకోవడానికి, దీన్ని చదవండి వ్యాసం మా వెబ్‌సైట్‌లో.
టెయిల్‌విండ్‌లో హోవర్, ఫోకస్ మరియు ఇతర రాష్ట్రాలకు కనిష్ట-ఎత్తు ఆస్తిని ఎలా దరఖాస్తు చేయాలి?
Tailwind డిజైన్ లక్షణాలతో అందించబడే డిఫాల్ట్ స్టేట్ వేరియంట్‌లను అందిస్తుంది. ఈ రాష్ట్ర రూపాంతరాలలో 'హోవర్', 'ఫోకస్' మరియు 'యాక్టివ్' ఉన్నాయి. ఈ రాష్ట్ర రూపాంతరాల వివరణ క్రింది విధంగా ఉంది:
- ది' హోవర్ ఒక మూలకంపై మౌస్ కర్సర్ హోవర్ చేసినప్పుడు ” స్థితి ట్రిగ్గర్ చేయబడుతుంది.
- ది ' దృష్టి మూలకం ఫోకస్‌లో ఉన్నప్పుడల్లా స్థితి ప్రేరేపించబడుతుంది.
- ది ' చురుకుగా మూలకం సక్రియం చేయబడినప్పుడు లేదా దానిపై క్లిక్ చేసినప్పుడల్లా ” స్థితి ట్రిగ్గర్ చేయబడుతుంది.
ఈ రాష్ట్రాలలో ఒక్కొక్కదానితో కనిష్ట ఎత్తు ఆస్తిని ఒక్కొక్కటిగా ఉపయోగించుకుందాం.
హోవర్ స్టేట్‌తో కనీస ఎత్తు ప్రాపర్టీని ఉపయోగించడం
ఉపయోగించడానికి ' కనీస ఎత్తు ” టైల్‌విండ్‌లో హోవర్ స్టేట్ వేరియంట్‌తో క్లాస్, కింది సింటాక్స్ ఉపయోగించబడుతుంది:
< div తరగతి = 'హోవర్:min-h-{size}...' > < / div >
పైన నిర్వచించిన సింటాక్స్‌ని ప్రదర్శనలో ఉపయోగిస్తాము. ఈ ఉదాహరణలో, మూలకంపై మౌస్ కర్సర్ హోవర్ చేసినప్పుడు మేము మూలకం యొక్క కనిష్ట ఎత్తును పెంచుతాము.
< div తరగతి = 'min-h-fit rounded-md bg-blue-700 text-center text-white hover:min-h-screen' >కనిష్టాన్ని పెంచడానికి హోవర్ చేయండి ఎత్తు < / div >పై కోడ్ యొక్క వివరణ క్రింది విధంగా ఉంది:
- ది ' min-w-fit 'తరగతి దాని కంటెంట్‌కు సరిపోయేలా div మూలకం ద్వారా అవసరమైన ఎత్తుకు కనీస ఎత్తు పరిమితిని సెట్ చేస్తుంది.
- ది ' హోవర్: min-w-స్క్రీన్ ” క్లాస్ స్క్రీన్ పరిమాణంలో 100%కి సమానమైన కనిష్ట ఎత్తు పరిమితిని అందిస్తుంది.
- ది ' గుండ్రని-md ',' bg-{color}-{number} ',' టెక్స్ట్-సెంటర్ ', మరియు' వచనం-తెలుపు ” తరగతులు వరుసగా div మూలకం కోసం గుండ్రని మూలలు, నేపథ్య రంగు, మధ్యకు సమలేఖనం చేయబడిన వచనం మరియు తెలుపు వచన రంగుకు బాధ్యత వహిస్తాయి. 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 అందించబడింది min-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} ', మరియు' సక్రియం:min-h-{value} ” తరగతులు ఉపయోగించబడతాయి. ఈ కథనం టెయిల్‌విండ్‌లో కనిష్ట ఎత్తు తరగతితో హోవర్, ఫోకస్ మరియు ఇతర రాష్ట్రాలను వర్తింపజేసే విధానాన్ని అందించింది.