Šiame straipsnyje bus parodytas pelės žymeklio efekto taikymo tinklelio automatinio srauto įrankiui „Tailwind CSS“ pavyzdys.
Kaip taikyti „Hover on Grid Auto Flow“ tailwind?
Norėdami pritaikyti užvedimo efektą automatiniam tinklelio srautui programoje Tailwind, sukurkite HTML failą ir naudokite „ užveskite pelės žymeklį “ klasė su “ grid-flow-
Pažvelkite į pateiktus praktinio įgyvendinimo veiksmus:
1 veiksmas: naudokite „Hover Property“ su eilučių tinkleliu HTML programoje
Sukurkite HTML programą ir naudokite „ užveskite pelės žymeklį 'turtas su norimu' grid-flow-
< kūnas >
< div klasė = 'grid grid-flow-col hover:grid-flow-row-row-row-3 m-3 text-center' >
< div klasė = 'bg-teal-500 p-5' > 1 < / div >
< div klasė = 'bg-teal-500 p-5' > 2 < / div >
< div klasė = 'bg-teal-500 p-5' > 3 < / div >
< div klasė = 'bg-teal-500 p-5' > 4 < / div >
< div klasė = 'bg-teal-500 p-5' > 5 < / div >
< div klasė = 'bg-teal-500 p-5' > 6 < / div >
< / div >
< / kūnas >
Čia:
- “ tinklelis “ klasė nustato elementą kaip tinklelio konteinerį.
- “ grid-flow-col “ apibrėžia tinklelio elementų srautą stulpeliuose.
- “ hover:grid-flow-row ” klasė pakeičia tinklelio elementų srautą į eilutes, kai pelė užvedama virš konteinerio.
- “ tarpas-3 “ prideda 3 vienetų tarpą tarp tinklelio elementų.
- “ m-3 “ aplink tinklelio konteinerį prideda 3 vienetų paraštę.
- “ teksto centras “ sulygiuoja teksto turinį tinklelio elementų viduje su centru.
2 veiksmas: patikrinkite išvestį
Norėdami patikrinti, ar automatiniam tinklelio srautui pritaikytas pelės žymeklio efektas, peržiūrėkite tinklalapį ir užveskite pelės žymeklį ant tinklelio elementų:
Galima pastebėti, kad iš pradžių tinklelio elementų srautas yra stulpeliais, o užvedus pelę virš jų srautas pakeičiamas į eilutes. Tai rodo, kad užvedimo efektas sėkmingai pritaikytas automatiniam tinklelio srautui.
Išvada
Norėdami pritaikyti užvedimo efektą automatiniam tinklelio srautui Tailwind, naudokite „ užveskite pelės žymeklį 'klasė su norimu' grid-flow-