ఈ కథనం వెబ్ పేజీలో ఉంచబడిన మూలకాల స్థానాన్ని నియంత్రించడానికి ఉపయోగించే యుటిలిటీలను ప్రదర్శిస్తుంది.
టైల్‌విండ్ యుటిలిటీస్ పొజిషన్డ్ ఎలిమెంట్స్ ప్లేస్‌మెంట్‌ను నియంత్రించడానికి ఉపయోగించాలా?
టైల్‌విండ్ CSS యుటిలిటీ అనేది క్షితిజ సమాంతర లేదా నిలువు అక్షం రెండింటిలోనూ ఉంచబడిన మూలకాల ప్లేస్‌మెంట్‌తో ప్రత్యేకంగా వ్యవహరిస్తుంది. టాప్ | కుడి | దిగువ | ఎడమ ”. ఇతర యుటిలిటీల మాదిరిగానే, ఇది వివిధ ప్రదేశాలలో ఉంచబడిన మూలకాన్ని సెట్ చేయగల వివిధ తరగతులను కూడా అందిస్తుంది, వీటిలో కొన్ని తరగతులు క్రింద పేర్కొనబడ్డాయి:
- ఇన్సెట్-{placementValue}
- ప్రారంభం-{placementValue}
- టాప్-{placementValue}
- ముగింపు-{placementValue}
- దిగువ-{placementValue}
- ఎడమ-{placementValue}
- కుడి-{placementValue}
ఇప్పుడు, మంచి అవగాహన కోసం ఈ తరగతుల్లో కొన్నింటిని ఉపయోగించడానికి ఒక ఆచరణాత్మక ఉదాహరణను చూద్దాం.
ఉదాహరణ: టైల్‌విండ్ CSS యుటిలిటీలను ఉపయోగించి పొజిషన్డ్ ఎలిమెంట్‌ను ఉంచడం
ఈ ఉదాహరణలో, పైన వివరించిన యుటిలిటీ క్రింద చూపిన విధంగా వెబ్ పేజీలో వివిధ ప్రదేశాలలో ఉంచిన మూలకాన్ని ఉంచడానికి ఉపయోగించబడుతుంది:
< శరీరం తరగతి = 'గ్రిడ్ గ్రిడ్-కోల్స్-3' >
< div తరగతి = 'సంబంధిత h-32 w-32 bg-orange-200 p-4 m-4 టెక్స్ట్-సెంటర్ జస్టిఫై-స్ట్రెచ్ రౌండ్డ్' >
< div తరగతి = 'సంపూర్ణ ఎడమ-0 టాప్-0 h-16 w-16 bg-బ్లూ-400 గుండ్రని p-4' > అంశం 1 < / div >
< / div >
< div తరగతి = 'సంబంధిత h-32 w-32 bg-orange-200 p-4 m-4 టెక్స్ట్-సెంటర్ జస్టిఫై-స్ట్రెచ్ రౌండ్డ్' >
< div తరగతి = 'సంపూర్ణ ఇన్సెట్-x-0 టాప్-0 h-16 bg-blue-400 గుండ్రని p-4' > అంశం 2 < / div >
< / div >
< div తరగతి = 'సంబంధిత h-32 w-32 bg-orange-200 p-4 m-4 టెక్స్ట్-సెంటర్ జస్టిఫై-స్ట్రెచ్ రౌండ్డ్' >
< div తరగతి = 'సంపూర్ణ ఇన్సెట్-0 bg-blue-400 గుండ్రని p-4' > అంశం 3 < / div >
< / div >
< div తరగతి = 'సంబంధిత h-32 w-32 bg-orange-200 p-4 m-4 టెక్స్ట్-సెంటర్ జస్టిఫై-స్ట్రెచ్ రౌండ్డ్' >
< div తరగతి = 'సంపూర్ణ ఇన్సెట్-y-0 కుడి-0 w-16 bg-బ్లూ-400 గుండ్రని p-4' > అంశం 4 < / div >
< / div >
< div తరగతి = 'సంబంధిత h-32 w-32 bg-orange-200 p-4 m-4 టెక్స్ట్-సెంటర్ జస్టిఫై-స్ట్రెచ్ రౌండ్డ్' >
< div తరగతి = 'సంపూర్ణ దిగువ-0 కుడి-0 h-16 w-16 bg-బ్లూ-400 గుండ్రని p-4' > అంశం 5 < / div >
< / div >
< / శరీరం >
పై కోడ్ వివరణ:
- ముందుగా, ఐదుగురు తల్లిదండ్రులను సృష్టించండి div ” మూలకాలు మరియు సంబంధిత స్థానం, ఎత్తు, వెడల్పు, నేపథ్యం, పాడింగ్, మార్జిన్ మొదలైనవాటిని సెట్ చేయడానికి వివిధ Tailwind CSS తరగతులను వర్తింపజేయండి.
- తరువాత, ఒక సమూహాన్ని సృష్టించండి ' div ” ప్రతి పేరెంట్ “div” లోపల మూలకం. ఈ సమూహ 'డివ్' మూలకం కోసం ప్లేస్‌మెంట్ పూర్తి కానుంది.
- ఆపై, ' యొక్క టెయిల్‌విండ్ CSS తరగతులను వర్తింపజేయండి సంపూర్ణ ',' h ',' లో ',' bg ”,” p ', మరియు' గుండ్రంగా 'సమూహాన్ని స్టైల్ చేయడానికి' div ' మూలకం.
- ఆ తర్వాత, నెస్టెడ్ div ఒకటి నుండి ఐదు వరకు, '' యొక్క కొత్త తరగతులను కేటాయించండి ఎడమ-0 టాప్-0 ',' ఇన్సెట్-x-0 ',' ఇన్సెట్-0 ',' ఇన్సెట్-y-0 కుడి-0 ', మరియు' దిగువ-0 కుడి-0 ” వరుసగా.
- ఈ తరగతులు ఎగువ-ఎడమ మూలలో సమూహ div మూలకాల స్థానాన్ని సెట్ చేస్తాయి, ఎగువ స్థానాన్ని కవర్ చేస్తాయి, మొత్తం పేరెంట్ స్పేస్‌ను కవర్ చేస్తాయి, కుడి వైపును కవర్ చేస్తాయి మరియు వరుసగా దిగువ-ఎడమ స్థానాన్ని కవర్ చేస్తాయి.
అమలు తర్వాత, div మూలకాల ప్రివ్యూ ఇలా కనిపిస్తుంది:
ఉంచిన మూలకాలు కావలసిన స్థానాల్లో ఉంచబడినట్లు అవుట్‌పుట్ చూపిస్తుంది.
ముగింపు
ది ' టాప్ | కుడి | దిగువ | ఎడమ ” వెబ్‌పేజీలో మూలకాల ప్లేస్‌మెంట్‌ను నియంత్రించడానికి టెయిల్‌విండ్ యుటిలిటీ ఉపయోగించబడుతుంది. ఇది ప్రతి స్థానాన్ని లక్ష్యంగా చేసుకోవడానికి అనేక తరగతులను ఉపయోగిస్తుంది మరియు ఆ స్థలంలో ఎంచుకున్న మూలకాన్ని అవసరాలకు అనుగుణంగా తరలిస్తుంది. ఈ తరగతులు ప్రధానంగా ఉంచిన మూలకాలను ఎడమ, కుడి, దిగువ మరియు ఎగువన ఉంచుతాయి. అవి మొత్తం ప్రాంతాన్ని కవర్ చేయడానికి, ఎడమ లేదా ఎగువ వంటి నిర్దిష్ట దిశలను కవర్ చేయడానికి మరియు మొదలైన వాటికి సహాయపడతాయి. ఈ కథనం స్థాన మూలకాల ప్లేస్‌మెంట్‌ను నియంత్రించడానికి ఉపయోగించగల యుటిలిటీలను విజయవంతంగా వివరించింది.