ఈ కథనం Tailwindలో జాబితా బ్లాక్ యొక్క జాబితా-శైలి చిత్రాన్ని సెట్ చేసే విధానాన్ని అందిస్తుంది.
టైల్‌విండ్‌లో లిస్ట్ స్టైల్ ఇమేజ్ క్లాస్‌ని ఎలా సెట్ చేయాలి?
Tailwindలో జాబితా మార్కర్‌గా చిత్రాన్ని అందించడానికి జాబితా శైలి చిత్ర తరగతి ఉపయోగించబడుతుంది. డిఫాల్ట్‌గా, Tailwind కేవలం ' జాబితా-చిత్రం-ఏదీ లేదు 'జాబితా కోసం మునుపు సెట్ చేయబడిన ఇమేజ్ మార్కర్‌ను తీసివేయడానికి మాత్రమే ఉపయోగించబడే తరగతి.
వాక్యనిర్మాణం
Tailwindలో జాబితా శైలి చిత్ర తరగతిని ఉపయోగించడం కోసం వాక్యనిర్మాణం క్రింది విధంగా ఉంది:
< ఉల్ తరగతి = 'list-image-[url({Image Url})]' > < / ఉల్ >
ఈ సింటాక్స్ పేర్కొన్న చిత్రాన్ని జాబితా మూలకం కోసం మార్కర్‌గా అందిస్తుంది.
< ఉల్ తరగతి = 'జాబితా-చిత్రం-ఏదీ లేదు' > < / ఉల్ >
ఈ సింటాక్స్ జాబితా మూలకం కోసం మార్కర్‌గా గతంలో సెట్ చేసిన ఏవైనా చిత్రాలను తొలగిస్తుంది.
క్రమం లేని జాబితాలో ఇమేజ్‌ని మార్కర్‌గా ఉపయోగించడానికి పైన నిర్వచించిన సింటాక్స్‌ని ఉపయోగిస్తాము. ఈ ప్రదర్శనలో, వినియోగదారు పేరు ' handpointer.png ”అదే టైల్‌విండ్ ప్రాజెక్ట్ ఫోల్డర్‌లో ఉంది. ఒకవేళ చిత్రం ఏదైనా ఇతర ఫోల్డర్‌లో ఉన్నట్లయితే, వినియోగదారు జాబితా శైలి చిత్ర తరగతికి పూర్తి మార్గాన్ని అందించాలి. మేము ఆ చిత్రాన్ని 'జాబితా-చిత్రం' తరగతిని ఉపయోగించి జాబితా మార్కర్‌గా ఉపయోగిస్తాము.
< div తరగతి = 'ఫ్లెక్స్ జస్టిఫై-సెంటర్' >
< ఉల్ తరగతి = ' list-inside list-image-[url(handpointer.png)] space-y-2 rounded-md bg-green-400 p-2' >
నమూనా జాబితా
< అని >ఇది మొదటి అంశం< / అని >
< అని >ఇది రెండవ అంశం< / అని >
< అని >ఇది మూడవ అంశం< / అని >
< / ఉల్ >
< / div >
పై కోడ్ యొక్క వివరణ క్రింది విధంగా ఉంది:
- ఎ' 'మూలకం సృష్టించబడింది మరియు అందించబడింది' ఫ్లెక్స్ ”అంశాలను కంటైనర్‌లో అడ్డంగా సమలేఖనం చేసే తరగతి.
- ది ' సమర్థించు-కేంద్రం ” క్లాస్ పిల్లల వస్తువులను కంటైనర్ మధ్యలోకి సమలేఖనం చేస్తుంది.
- తరువాత, '
- ఇది అందించబడింది ' జాబితా-లోపల జాబితా బ్లాక్ లోపల పేర్కొన్న జాబితా అంశం మార్కర్‌ను ఉంచే తరగతి.
- ది ' list-image-[url({Image Url})] ఎలిమెంట్‌కి జాబితా ఐటెమ్ మార్కర్‌గా ఇమేజ్‌ని అందించడానికి క్లాస్ ఉపయోగించబడుతుంది.
- ది ' స్పేస్-y-{సంఖ్య} ” తరగతి జాబితా అంశాల మధ్య నిలువు ఖాళీని అందిస్తుంది.
- ది ' గుండ్రని-md ” క్లాస్ జాబితా బ్లాక్ యొక్క మూలలను గుండ్రంగా చేస్తుంది.
- ది ' bg-{color}-{number} జాబితా బ్లాక్‌కు నేపథ్య రంగును అందించడానికి 'తరగతి ఉపయోగించబడుతుంది.
- ది ' p-2 ” తరగతి జాబితా మూలకానికి సరిహద్దును అందిస్తుంది.
- 'ని ఉపయోగించి మూడు జాబితా అంశాలు సృష్టించబడ్డాయి <ఆ> ' టాగ్లు.
అవుట్‌పుట్:
జాబితా అంశాలకు మార్కర్‌గా హ్యాండ్ పాయింటర్ ఇమేజ్ సెట్ చేయబడిందని అవుట్‌పుట్‌లో చూడవచ్చు:
టైల్‌విండ్‌లో జాబితా స్టైల్ ఇమేజ్ క్లాస్‌తో స్టేట్ వేరియంట్‌లను ఉపయోగించడం
Tailwind ఇంటరాక్టివ్ డిజైన్‌లను రూపొందించడంలో సహాయపడే హోవర్, ఫోకస్ మరియు యాక్టివ్ వంటి వివిధ స్టేట్ వేరియంట్‌లను అందిస్తుంది. ఈ రాష్ట్రాలతో జాబితా-శైలి చిత్ర తరగతిని ఉపయోగించడానికి, కింది వాక్యనిర్మాణం ఉపయోగించబడుతుంది:
< ఉల్ తరగతి = '{state}:list-image-{none OR image url}' > < / ఉల్ >జాబితా-శైలి ఇమేజ్ ప్రాపర్టీని ఉపయోగించడానికి పైన నిర్వచించిన సింటాక్స్‌ని ఉపయోగిస్తాము ' హోవర్ ”టైల్‌విండ్‌లో రాష్ట్రం. ఈ ప్రదర్శనలో, జాబితా మార్కర్‌గా చిత్రంతో జాబితా అందించబడుతుంది. అయితే, ఉపయోగించి ' హోవర్ ” స్థితి, చిత్రం తీసివేయబడుతుంది.
< div తరగతి = 'ఫ్లెక్స్ జస్టిఫై-సెంటర్' >
< ఉల్ తరగతి = ' list-inside list-image-[url(handpointer.png)] hover:list-image-none space-y-2 rounded-md bg-green-400 p-2' >
నమూనా జాబితా
< అని >ఇది మొదటి అంశం< / అని >
< అని >ఇది రెండవ అంశం< / అని >
< అని >ఇది మూడవ అంశం< / అని >
< / ఉల్ >
< / div >పై కోడ్‌లో, ' హోవర్:జాబితా-చిత్రం-ఏదీ లేదు ” క్లాస్ జాబితా మార్కర్‌గా గతంలో సెట్ చేసిన చిత్రాన్ని తీసివేస్తుంది.
అవుట్‌పుట్:
దిగువ అవుట్‌పుట్‌లో, జాబితా-శైలి చిత్రం 'కి రీసెట్ చేయబడింది ఏదీ లేదు ” వినియోగదారు దానిపై మౌస్ కర్సర్‌ను ఉంచినప్పుడు. దీని కారణంగా, జాబితా మార్కర్‌గా ఉపయోగించబడుతున్న చిత్రం తీసివేయబడింది.
టైల్‌విండ్‌లో జాబితా స్టైల్ ఇమేజ్ క్లాస్‌తో బ్రేక్‌పాయింట్‌లను ఉపయోగించడం
బ్రేక్‌పాయింట్‌లు టైల్‌విండ్‌లోని మూలకాల కోసం ముందే సెట్ చేయబడిన మీడియా ప్రశ్నలు. వివిధ స్క్రీన్ పరిమాణాల కోసం డిజైన్‌ను ప్రతిస్పందించేలా చేయడానికి అవి ఉపయోగించబడతాయి. ఈ బ్రేక్‌పాయింట్‌లలో sm, md, lg, xl మరియు 2xl ఉన్నాయి. బ్రేక్‌పాయింట్‌తో జాబితా-శైలి ఇమేజ్ క్లాస్‌ని ఉపయోగించడానికి, కింది సింటాక్స్ ఉపయోగించబడుతుంది:
< ఉల్ తరగతి = '{breakpoint}:list-image-{none OR image url}' > < / ఉల్ >జాబితా మార్కర్‌ను '' నుండి మార్చడానికి పైన నిర్వచించిన సింటాక్స్‌ని ఉపయోగిస్తాము చిత్రం ' నుండి ' ఏదీ లేదు ”బ్రేక్ పాయింట్ ఉపయోగించి. ఈ ఉదాహరణలో, స్క్రీన్ పరిమాణం “” వెడల్పును పెంచిన తర్వాత ఇమేజ్ మార్కర్ తీసివేయబడుతుంది. md ” బ్రేక్ పాయింట్:
< div తరగతి = 'ఫ్లెక్స్ జస్టిఫై-సెంటర్' >
< ఉల్ తరగతి = ' list-inside list-image-[url(handpointer.png)] md:list-image-none space-y-2 rounded-md bg-green-400 p-2' >
నమూనా జాబితా
< అని >ఇది మొదటి అంశం< / అని >
< అని >ఇది రెండవ అంశం< / అని >
< అని >ఇది మూడవ అంశం< / అని >
< / ఉల్ >
< / div >పై కోడ్‌లో, ' md:జాబితా-చిత్రం-ఏదీ లేదు 'తరగతి స్క్రీన్ పరిమాణం 'కి చేరుకున్నప్పుడు చిత్ర జాబితా మార్కర్‌ను తొలగిస్తుంది md ” బ్రేక్ పాయింట్.
అవుట్‌పుట్:
దిగువ అవుట్‌పుట్‌లో, స్క్రీన్ పరిమాణం md బ్రేక్‌పాయింట్‌కు చేరుకున్నప్పుడు ఇమేజ్ మార్కర్ తీసివేయబడుతుంది:
టైల్‌విండ్‌లో జాబితా-శైలి చిత్రాన్ని సెట్ చేయడం గురించి అంతే.
ముగింపు
టెయిల్‌విండ్‌లో ఎలిమెంట్ యొక్క లిస్టింగ్ మార్కర్‌ను తీసివేయడం లేదా ఇమేజ్‌కి సెట్ చేయడం కోసం రెండు ముందే నిర్వచించబడిన జాబితా-శైలి చిత్ర తరగతులు ఉన్నాయి. ది ' list-image-[url({Image Url})] ” class పేర్కొన్న చిత్రాన్ని జాబితా మార్కర్‌గా అందిస్తుంది. ది ' జాబితా-చిత్రం-ఏదీ లేదు ” క్లాస్ జాబితా మార్కర్‌గా గతంలో అందించిన ఏదైనా చిత్రాన్ని తొలగిస్తుంది. ఈ కథనం Tailwindలో జాబితా శైలి రకాన్ని సెట్ చేసే విధానాన్ని అందించింది.