ఒక వినియోగదారు వారి వెబ్‌పేజీ కోసం అంశాల జాబితాను సృష్టించాలని అనుకుందాం. రూపకల్పన ప్రక్రియను సులభతరం చేయడానికి, Tailwind వివిధ జాబితా-శైలి తరగతులను అందిస్తుంది, వీటిని జాబితా మూలకాల రకం, స్థానం మరియు అమరికను మార్చడానికి ఉపయోగించవచ్చు.
ఈ కథనం Tailwindలో జాబితా శైలి రకాన్ని సెట్ చేసే విధానాన్ని అందిస్తుంది.
టైల్‌విండ్‌లో జాబితా శైలి రకాన్ని ఎలా సెట్ చేయాలి?
Tailwind మూడు డిఫాల్ట్ జాబితా శైలి రకాలను అందిస్తుంది. అవి అందించడానికి ఉపయోగించబడతాయి ' మార్కర్ జాబితా అంశాల కోసం శైలి. మూడు డిఫాల్ట్ జాబితా శైలి రకం తరగతులు క్రింది విధంగా వివరించబడ్డాయి:
- జాబితా-డిస్క్: ఈ తరగతి రౌండ్ బుల్లెట్ పాయింట్లను జాబితా మార్కర్‌గా అందిస్తుంది.
- జాబితా-దశాంశం: ఈ తరగతి దశాంశ సంఖ్యలను జాబితా మార్కర్‌గా అందిస్తుంది.
- జాబితా-ఏదీ లేదు: ఈ తరగతి ఐటెమ్‌ల నుండి ఏవైనా జాబితా మార్కర్‌లను తీసివేస్తుంది.
జాబితా శైలి రకాలను ఉపయోగించడం కోసం వాక్యనిర్మాణం క్రింది విధంగా ఉంది:
< ఉల్ తరగతి = 'జాబితా-{శైలి}' > < / ఉల్ >
మెరుగైన అవగాహన కోసం, దిగువ అందించిన ప్రదర్శన అంశాలను జాబితా చేయడానికి విభిన్న మార్కర్ శైలులను అందించడానికి పైన నిర్వచించిన సింటాక్స్‌ని ఉపయోగిస్తుంది. ఈ ఉదాహరణలో, Tailwindలో డిఫాల్ట్ జాబితా శైలి తరగతులను ఉపయోగించి మూడు జాబితా అంశాలు సృష్టించబడతాయి మరియు విభిన్న మార్కర్ శైలులతో అందించబడతాయి:
< p తరగతి = 'టెక్స్ట్-సెంటర్ టెక్స్ట్-xl ఫాంట్-బోల్డ్' > డిఫాల్ట్ విభిన్న జాబితా శైలి టైల్‌విండ్‌లోని రకాలు< / p >
< br >
< div తరగతి = 'flex justify-center space-x-20 bg-slate-100 rounded-lg mx-4 p-2' >
< ఉల్ తరగతి = 'జాబితా-డిస్క్' >
జాబితా # 1
< అని >ఇది మొదటి అంశం< / అని >
< అని >ఇది రెండవ అంశం< / అని >
< అని >ఇది మూడవ అంశం< / అని >
< / ఉల్ >
< ఉల్ తరగతి = 'జాబితా-దశాంశం' >
జాబితా # 2
< అని >ఇది మొదటి అంశం< / అని >
< అని >ఇది రెండవ అంశం< / అని >
< అని >ఇది మూడవ అంశం< / అని >
< / ఉల్ >
< ఉల్ తరగతి = 'జాబితా-ఏదీ లేదు' >
జాబితా # 3
< అని >ఇది మొదటి అంశం< / అని >
< అని >ఇది రెండవ అంశం< / అని >
< అని >ఇది మూడవ అంశం< / అని >
< / ఉల్ >
< / div >
పై కోడ్ యొక్క వివరణ క్రింది విధంగా ఉంది:
- ఎ' 'మూలకం'తో సృష్టించబడింది xl 'ఫాంట్ పరిమాణం మరియు ఒక' బోల్డ్ ” ఫాంట్ బరువు. మూలకం యొక్క వచన కంటెంట్ “ని ఉపయోగించి మధ్యలో ఉంచబడుతుంది. టెక్స్ట్-సెంటర్ ” తరగతి.
- లైన్ బ్రేక్ తర్వాత, ఒక ' 'మూలకం సృష్టించబడింది మరియు అందించబడింది' ఫ్లెక్స్ ” తరగతి. ఇది పిల్లల వస్తువులను అడ్డంగా సమలేఖనం చేసే కంటైనర్‌ను సృష్టిస్తుంది.
- ది ' సమర్థించు-కేంద్రం ” క్లాస్ వస్తువులను కంటైనర్ మధ్యలో ఉంచుతుంది.
- ది ' space-x-{size} 'తరగతి అంశాల మధ్య క్షితిజ సమాంతర స్థలాన్ని అందిస్తుంది.
- ది ' bg-{color}-{number} ” క్లాస్ కంటైనర్ యొక్క నేపథ్యాన్ని పేర్కొన్న రంగుకు సెట్ చేస్తుంది.
- ది ' గుండ్రని-lg ” క్లాస్ కంటైనర్ మూలలను గుండ్రంగా చేస్తుంది.
- ది ' mx-4 ” క్లాస్ ఫ్లెక్స్ కంటైనర్‌కు క్షితిజ సమాంతర మార్జిన్‌ను అందిస్తుంది.
- ది ' p-2 ” క్లాస్ ఫ్లెక్స్ కంటైనర్‌కు పాడింగ్‌ని అందిస్తుంది.
- తరువాత, మూడు జాబితా అంశాలు సృష్టించబడతాయి మరియు ''ని ఉపయోగించి విభిన్న జాబితా శైలి రకాలు అందించబడతాయి జాబితా-{రకం} ” తరగతి.
అవుట్‌పుట్:
దిగువ అవుట్‌పుట్ నుండి, మొదటి జాబితా బుల్లెట్ పాయింట్లను ఉపయోగిస్తుందని, రెండవది దశాంశ సంఖ్యలను ఉపయోగిస్తుందని మరియు మూడవది ఏ ఐటెమ్ మార్కర్‌ను ఉపయోగించలేదని చూడవచ్చు.
టైల్‌విండ్‌లోని స్టేట్ వేరియంట్‌లతో లిస్ట్ స్టైల్ క్లాస్‌ని ఉపయోగించడం
డిజైన్‌ను మరింత డైనమిక్‌గా చేయడానికి టెయిల్‌విండ్‌లోని డిఫాల్ట్ స్టేట్ వేరియంట్‌లతో లిస్ట్ స్టైల్ క్లాస్‌ని ఉపయోగించవచ్చు. హోవర్, ఫోకస్ మరియు యాక్టివ్ స్టేట్ వేరియంట్‌లను ఉపయోగించి, వినియోగదారు పేర్కొన్న స్థితిని ట్రిగ్గర్ చేసినప్పుడల్లా జాబితా అంశాల మార్కర్ శైలిని మార్చవచ్చు. స్టేట్ వేరియంట్‌లతో జాబితా శైలి తరగతిని ఉపయోగించడం కోసం వాక్యనిర్మాణం క్రింది విధంగా ఉంది:
< ఉల్ తరగతి = '{state}:list-{style}...' > / ఉల్ >'హోవర్' స్థితితో జాబితా శైలి రకాన్ని ఉపయోగించడం యొక్క ఉదాహరణ ఇక్కడ ఉంది, ఇక్కడ వినియోగదారు జాబితా బ్లాక్‌పై ఉంచడం ద్వారా మార్కర్ శైలిని మార్చవచ్చు:
< p తరగతి = 'టెక్స్ట్-సెంటర్ టెక్స్ట్-xl ఫాంట్-బోల్డ్' >మార్కర్ శైలిని మార్చడానికి జాబితా బ్లాక్‌పై కర్సర్‌ని ఉంచండి< / p >
< br >
< div తరగతి = 'flex justify-center space-x-20 bg-slate-100 rounded-lg mx-4 p-2' >
< ఉల్ తరగతి = 'జాబితా-డిస్క్ హోవర్:జాబితా-దశాంశం' >
జాబితా # 1
< అని >ఇది మొదటి అంశం< / అని >
< అని >ఇది రెండవ అంశం< / అని >
< అని >ఇది మూడవ అంశం< / అని >
< / ఉల్ >
< / div >పై కోడ్‌లో, జాబితా “తో అందించబడింది జాబితా-డిస్క్ ” క్లాస్ డిఫాల్ట్ జాబితా శైలి రకం. అయితే, ఉపయోగించి ' హోవర్:జాబితా-దశాంశం ” తరగతి, వినియోగదారు జాబితా బ్లాక్‌పై మౌస్ కర్సర్‌ను ఉంచినప్పుడు జాబితా శైలి రకం మార్చబడుతుంది.
అవుట్‌పుట్:
జాబితా బ్లాక్‌పై కర్సర్ హోవర్ చేసినప్పుడు జాబితా రకం శైలి బుల్లెట్ జాబితా నుండి సంఖ్యల జాబితాకు మారుతుందని దిగువ అవుట్‌పుట్ చూపిస్తుంది.
టైల్‌విండ్‌లో బ్రేక్‌పాయింట్‌లతో జాబితా శైలి తరగతిని ఉపయోగించడం
వివిధ స్క్రీన్ పరిమాణాల కోసం లేఅవుట్ యొక్క ప్రతిస్పందించే రూపకల్పన కోసం బ్రేక్‌పాయింట్‌లు ఉపయోగించబడతాయి. Tailwind అందించిన ఐదు డిఫాల్ట్ బ్రేక్‌పాయింట్‌లు sm, md, lg, xl మరియు 2xl. జాబితా రకం శైలి తరగతిని బ్రేక్‌పాయింట్‌తో అందించడానికి క్రింది వాక్యనిర్మాణం ఉపయోగించబడుతుంది:
< ఉల్ తరగతి = '{breakpoint}:list-{style}...' > / ఉల్ >''తో జాబితా శైలి రకాన్ని ఉపయోగించే ఉదాహరణ ఇక్కడ ఉంది md ”బ్రేక్‌పాయింట్, స్క్రీన్ పరిమాణం “md” బ్రేక్‌పాయింట్‌కి చేరుకున్నప్పుడు మార్కర్ శైలి మారుతుంది:
< p తరగతి = 'టెక్స్ట్-సెంటర్ టెక్స్ట్-xl ఫాంట్-బోల్డ్' > స్క్రీన్‌ని పెంచండి పరిమాణం మార్కర్ శైలిని మార్చడానికి< / p >
< br >
< div తరగతి = 'flex justify-center space-x-20 bg-slate-100 rounded-lg mx-4 p-2' >
< ఉల్ తరగతి = 'జాబితా-డిస్క్ md:జాబితా-దశాంశం' >
జాబితా # 1
< అని >ఇది మొదటి అంశం< / అని >
< అని >ఇది రెండవ అంశం< / అని >
< అని >ఇది మూడవ అంశం< / అని >
< / ఉల్ >
< / div >పై కోడ్‌లో, జాబితా “తో అందించబడింది జాబితా-డిస్క్ ” క్లాస్ డిఫాల్ట్ స్టైల్‌గా ఉంటుంది. అయితే, ఉపయోగించి ' md:జాబితా-దశాంశం 'md' స్క్రీన్ పరిమాణం కోసం జాబితా శైలి రకం మారుతుంది.
అవుట్‌పుట్:
మీరు దిగువ అవుట్‌పుట్‌లో చూడగలిగినట్లుగా, స్క్రీన్ పరిమాణం “కి చేరుకున్నప్పుడు జాబితా శైలి రకం డిస్క్ నుండి దశాంశానికి మారుతుంది. md ” బ్రేక్ పాయింట్.
టైల్‌విండ్‌లో లిస్ట్ స్టైల్ రకాన్ని సెట్ చేయడం గురించి అంతే.
ముగింపు
Tailwind ఒక మూలకం యొక్క జాబితా శైలిని మార్చడానికి మూడు ముందే నిర్వచించబడిన జాబితా శైలి రకం తరగతులను అందిస్తుంది. ది ' జాబితా-డిస్క్ ” క్లాస్ అంశాలను జాబితా చేయడానికి బుల్లెట్ పాయింట్లను అందిస్తుంది. ది ' జాబితా-దశాంశం 'తరగతి అంశాలను జాబితా చేయడానికి సంఖ్యలను అందిస్తుంది. ది ' జాబితా-ఏదీ లేదు ” క్లాస్ ఏ ఐటెమ్ మార్కర్‌ను ఉపయోగించని జాబితాను సృష్టిస్తుంది. ఈ కథనం Tailwindలో జాబితా శైలి రకాన్ని సెట్ చేసే విధానాన్ని అందించింది.