ఈ కథనం Tailwind CSSలో గ్రిడ్ ఆటో ఫ్లో యుటిలిటీపై హోవర్ ప్రభావాన్ని వర్తింపజేసే పద్ధతిని ఉదాహరణగా చూపుతుంది.
టైల్‌విండ్‌లో గ్రిడ్ ఆటో ఫ్లోలో హోవర్‌ని ఎలా అప్లై చేయాలి?
Tailwindలో గ్రిడ్ ఆటో ఫ్లోపై హోవర్ ప్రభావాన్ని వర్తింపజేయడానికి, HTML ఫైల్‌ను రూపొందించి, ' హోవర్ 'తరగతితో' grid-flow-<కీవర్డ్> HTML ప్రోగ్రామ్‌లో యుటిలిటీ. మౌస్ వాటిపై హోవర్ చేసినప్పుడు ఇది గ్రిడ్ ఐటెమ్‌ల ప్లేస్‌మెంట్‌ను మారుస్తుంది. చివరగా, వెబ్ HTML పేజీని వీక్షించండి మరియు మార్పులను నిర్ధారించడానికి గ్రిడ్ అంశాలపై మౌస్‌ను ఉంచండి.
దాని ఆచరణాత్మక అమలు కోసం అందించిన దశలను చూడండి:
దశ 1: HTML ప్రోగ్రామ్‌లో రో గ్రిడ్‌తో హోవర్ ప్రాపర్టీని ఉపయోగించండి
HTML ప్రోగ్రామ్‌ను సృష్టించండి మరియు 'ని ఉపయోగించండి హోవర్ 'కావలసిన ఆస్తి' grid-flow-<కీవర్డ్> ' వినియోగ. ఉదాహరణకు, మేము ఉపయోగించాము ' హోవర్: గ్రిడ్-ఫ్లో-రో ” హోవర్‌లో నిలువు వరుస నుండి గ్రిడ్ ఐటెమ్‌ల ప్లేస్‌మెంట్‌ని మార్చడానికి తరగతి:
< శరీరం >
< div తరగతి = 'గ్రిడ్ గ్రిడ్-ఫ్లో-కోల్ హోవర్:గ్రిడ్-ఫ్లో-రో గ్యాప్-3 మీ-3 టెక్స్ట్-సెంటర్' >
< div తరగతి = 'bg-teal-500 p-5' > 1 < / div >
< div తరగతి = 'bg-teal-500 p-5' > 2 < / div >
< div తరగతి = 'bg-teal-500 p-5' > 3 < / div >
< div తరగతి = 'bg-teal-500 p-5' > 4 < / div >
< div తరగతి = 'bg-teal-500 p-5' > 5 < / div >
< div తరగతి = 'bg-teal-500 p-5' > 6 < / div >
< / div >
< / శరీరం >
ఇక్కడ:
- ' గ్రిడ్ ” క్లాస్ మూలకాన్ని గ్రిడ్ కంటైనర్‌గా సెట్ చేస్తుంది.
- ' గ్రిడ్-ఫ్లో-కోల్ ” నిలువు వరుసలలో గ్రిడ్ అంశాల ప్రవాహాన్ని నిర్వచిస్తుంది.
- ' హోవర్: గ్రిడ్-ఫ్లో-రో ”క్లాస్ కంటైనర్‌పై మౌస్ హోవర్ చేసినప్పుడు గ్రిడ్ ఐటెమ్‌ల ప్రవాహాన్ని అడ్డు వరుసలుగా మారుస్తుంది.
- ' ఖాళీ-3 ” గ్రిడ్ అంశాల మధ్య 3 యూనిట్ల అంతరాన్ని జోడిస్తుంది.
- ' m-3 ” గ్రిడ్ కంటైనర్ చుట్టూ 3 యూనిట్ల మార్జిన్‌ని జోడిస్తుంది.
- ' టెక్స్ట్-సెంటర్ ” గ్రిడ్ ఐటెమ్‌లలోని టెక్స్ట్ కంటెంట్‌ను మధ్యకు సమలేఖనం చేస్తుంది.
దశ 2: అవుట్‌పుట్‌ని ధృవీకరించండి
గ్రిడ్ ఆటో ఫ్లోపై హోవర్ ప్రభావం వర్తింపజేయబడిందని ధృవీకరించడానికి, వెబ్ పేజీని వీక్షించండి మరియు మౌస్‌ను గ్రిడ్ ఐటెమ్‌లపైకి తరలించండి:
ప్రారంభంలో గ్రిడ్ ఐటెమ్‌ల ప్రవాహం నిలువు వరుసలలో ఉందని మరియు మౌస్ వాటిపై హోవర్ చేసినప్పుడు, ప్రవాహం వరుసలుగా మార్చబడిందని గమనించవచ్చు. గ్రిడ్ ఆటో ఫ్లోకు హోవర్ ప్రభావం విజయవంతంగా వర్తించబడిందని ఇది సూచిస్తుంది.
ముగింపు
Tailwindలో గ్రిడ్ ఆటో ఫ్లోపై హోవర్ ప్రభావాన్ని వర్తింపజేయడానికి, ' హోవర్ 'కావలసిన తరగతి' grid-flow-<కీవర్డ్> HTML ప్రోగ్రామ్‌లో యుటిలిటీ. మౌస్ వాటిపై హోవర్ చేసినప్పుడు ఇది గ్రిడ్ ఐటెమ్‌ల ప్లేస్‌మెంట్‌ను మారుస్తుంది. మార్పులను నిర్ధారించడానికి, వెబ్ HTML పేజీని వీక్షించండి మరియు గ్రిడ్ అంశాలపై మౌస్ ఉంచండి. ఈ కథనం Tailwind CSSలో గ్రిడ్ ఆటో ఫ్లో యుటిలిటీపై హోవర్ ప్రభావాన్ని వర్తింపజేసే పద్ధతిని ఉదాహరణగా చూపింది.