Tailwindలో వికర్ణ భిన్నాలను ఎలా ఉపయోగించాలో ఈ కథనం వివరిస్తుంది.
Tailwind CSSలో వికర్ణ భిన్నాలను ఎలా ఉపయోగించాలి?
టైల్‌విండ్‌లోని వికర్ణ భిన్నం తరగతి అనేది ముందుగా నిర్వచించబడిన సంఖ్యా ఫాంట్ వేరియంట్, ఇది న్యూమరేటర్ మరియు హారంను చిన్నదిగా చేస్తుంది మరియు వాటిని స్లాష్ ద్వారా వేరు చేస్తుంది. దీని వలన భిన్నం సంఖ్య మిగిలిన వచనం నుండి భిన్నంగా కనిపిస్తుంది.
వాక్యనిర్మాణం
'ని ఉపయోగించడం యొక్క వాక్యనిర్మాణం వికర్ణ-భిన్నాలు 'తరగతి క్రింది విధంగా ఉంది:
< div తరగతి = 'వికర్ణ-భిన్నాలు' >
< div / >
పై వాక్యనిర్మాణం నుండి మీరు చూడగలిగినట్లుగా, డెవలపర్ అందించాలి ' వికర్ణ-భిన్నాలు ' లో ' తరగతి ”మూలకం యొక్క లక్షణం.
ఆచరణాత్మక ఉదాహరణగా 'వికర్ణ-భిన్నాలు' తరగతిని ఉపయోగిస్తాము. దిగువ ప్రదర్శనలో, వినియోగదారు సాధారణ భిన్నాలు మరియు వికర్ణ భిన్నాల మధ్య వ్యత్యాసాన్ని చూడగలరు:
< div తరగతి = 'bg-slate-200 text-center text-lg' >< p >సాధారణ భిన్నాలు: 3 / 5 6 / 3 6 / 5 < / p >
< p తరగతి = 'వికర్ణ-భిన్నాలు' >వికర్ణ భిన్నాలు: 3 / 5 6 / 3 6 / 5 < / p >
< / div >
పై కోడ్ యొక్క వివరణ క్రింది విధంగా ఉంది:
- ది ' div ' మూలకం సృష్టించబడింది మరియు 'ని ఉపయోగించి నేపథ్య రంగుగా అందించబడుతుంది bg-{color}-{number} ” తరగతి.
- అప్పుడు, టెక్స్ట్ పెద్ద ఫాంట్ పరిమాణం అందించబడుతుంది మరియు 'ని ఉపయోగించి మూలకం మధ్యలో సమలేఖనం చేయబడుతుంది. టెక్స్ట్-lg 'మరియు' టెక్స్ట్-సెంటర్ ”వరుసగా తరగతులు.
- తరువాత, రెండు ' 'మూలకాలు సృష్టించబడతాయి, ఇక్కడ రెండవది అందించబడుతుంది' వికర్ణ-భిన్నాలు ” తరగతి.
అవుట్‌పుట్:
పై అవుట్‌పుట్‌లో వికర్ణ భిన్నం మరియు సాధారణ భిన్నం మధ్య వ్యత్యాసాన్ని స్పష్టంగా చూడవచ్చు.
బ్రేక్‌పాయింట్‌లతో వికర్ణ భిన్నం తరగతిని ఉపయోగించడం
బ్రేక్‌పాయింట్‌లు టైల్‌విండ్‌లో మీడియా ప్రశ్నలుగా ఉపయోగించబడతాయి. పేర్కొన్న కనీస వెడల్పులతో ఐదు డిఫాల్ట్ బ్రేక్‌పాయింట్‌లు ఉన్నాయి. ప్రతిస్పందించే మరియు డైనమిక్ డిజైన్ లేఅవుట్‌లను రూపొందించడానికి ఈ బ్రేక్‌పాయింట్‌లను టైల్‌విండ్‌లోని ఏదైనా తరగతితో ఉపయోగించవచ్చు.
ఉపయోగించడానికి ' వికర్ణ-భిన్నాలు ” టైల్‌విండ్‌లో బ్రేక్‌పాయింట్‌తో తరగతి, కింది వాక్యనిర్మాణం ఉపయోగించబడుతుంది:
{ బ్రేక్ పాయింట్ ఉపసర్గ } : వికర్ణ భిన్నందిగువ పట్టిక Tailwindలోని వివిధ బ్రేక్‌పాయింట్‌ల కోసం కనీస వెడల్పును అందిస్తుంది:
| బ్రేక్‌పాయింట్ ఉపసర్గ | కనిష్ట వెడల్పు |
|---|---|
| sm | 640px |
| md | 768px |
| lg | 1024px |
| xl | 1280px |
| 2xl | 1536px |
దీనితో బ్రేక్‌పాయింట్‌లను ఉపయోగిస్తాము వికర్ణ-భిన్నాలు 'వారి ఉపయోగాన్ని ఆచరణాత్మకంగా అర్థం చేసుకోవడానికి తరగతి:
< div తరగతి = 'bg-slate-200 text-center text-lg md:diagonal-fractions' >3/4, 7/8, 5/4, 6/5
< / div >
పైన అందించిన కోడ్‌లో, ఒక div మూలకం అందించబడింది “ md:వికర్ణ-భిన్నాలు 'అప్పుడు సంఖ్యా భిన్నాల ఫాంట్‌ను మార్చే తరగతి' md ” బ్రేక్ పాయింట్ చేరుకుంది.
అవుట్‌పుట్
మీరు అవుట్‌పుట్‌లో చూడగలిగినట్లుగా, పాక్షిక సంఖ్యలు వికర్ణ భిన్నం ఫాంట్‌తో అందించబడతాయి md బ్రేక్ పాయింట్ చేరుకుంది:
టైల్‌విండ్ స్టేట్స్‌తో వికర్ణ భిన్నం తరగతిని ఉపయోగించడం
Tailwind డిఫాల్ట్‌గా అందిస్తుంది” రాష్ట్రాలు ” నిర్దిష్ట స్థితిని ప్రేరేపించినప్పుడు మూలకానికి డిజైన్ లక్షణాలను అందించడానికి. ఇది డిజైన్ లేఅవుట్‌ను మరింత ఆకర్షణీయంగా మరియు డైనమిక్‌గా చేస్తుంది. టైల్‌విండ్‌లోని స్థితితో “వికర్ణ-భిన్నాలు” తరగతిని ఉపయోగించడానికి, కింది వాక్యనిర్మాణం ఉపయోగించబడుతుంది:
{ రాష్ట్రం } : వికర్ణ భిన్నంTailwind అందించిన డిఫాల్ట్ స్థితి క్రింది విధంగా ఉంది:
- హోవర్: వినియోగదారు కర్సర్‌ను మూలకంపై ఉంచినప్పుడు.
- దృష్టి: వినియోగదారు దానికి నావిగేట్ చేయడం ద్వారా ఒక మూలకంపై దృష్టి కేంద్రీకరించినప్పుడు.
- సక్రియం: వినియోగదారు దానిపై క్లిక్ చేయడం ద్వారా మూలకాన్ని సక్రియం చేసినప్పుడు.
- డిసేబుల్: ఒక మూలకాన్ని సక్రియం చేయడానికి వినియోగదారుని అనుమతించనప్పుడు.
దిగువ ప్రదర్శన 'ని ఉపయోగించడానికి ఒక ఆచరణాత్మక ఉదాహరణను అందిస్తుంది వికర్ణ-భిన్నాలు 'తరగతితో' హోవర్ టెయిల్‌విండ్‌లో రాష్ట్రం:
< div తరగతి = 'bg-slate-200 text-center text-lg hover:diagonal-fractions' >3/4, 7/8, 5/4, 6/5
< / div >
ది ' div 'పై కోడ్‌లోని మూలకం ఒక' ద్వారా అందించబడింది హోవర్:వికర్ణ-భిన్నాలు ”తరగతి భిన్నం సంఖ్యల సాధారణ ఫాంట్‌ను వికర్ణ భిన్నం ఫాంట్‌గా మారుస్తుంది.
అవుట్‌పుట్
మీరు అవుట్‌పుట్‌లో చూడగలిగినట్లుగా, వినియోగదారు దానిపై మౌస్ కర్సర్‌ను ఉంచినప్పుడు భిన్న సంఖ్య యొక్క సంఖ్యా ఫాంట్ మారుతుంది:
టైల్‌విండ్ CSSలో వికర్ణ భిన్నం క్లాస్‌ని ఉపయోగించడం గురించి అంతే.
ముగింపు
Tailwind CSSలో వికర్ణ భిన్నాలను ఉపయోగించడానికి, ' వికర్ణ భిన్నం 'తరగతి. ఈ తరగతి న్యూమరేటర్ మరియు హారంను స్లాష్‌తో వేరు చేసి వాటిని చిన్నదిగా చేస్తుంది. వినియోగదారులు డిజైన్‌ను మరింత డైనమిక్‌గా చేయడానికి టెయిల్‌విండ్‌లోని డిఫాల్ట్ బ్రేక్‌పాయింట్‌లు మరియు స్టేట్‌లతో “వికర్ణ-భిన్నాలు” తరగతిని కూడా ఉపయోగించవచ్చు. ఈ కథనం Tailwindలో వికర్ణ భిన్నాలను ఉపయోగించే విధానాన్ని అందించింది.