Selles artiklis kirjeldatakse minimaalse kõrguse atribuutide kohaldamise protseduuri Tailwindi Hover, Focus ja muudele osariikidele.
Märge: Tailwindi minimaalsete kõrgusklasside kohta lisateabe saamiseks lugege seda artiklit meie veebisaidil.
Kuidas rakendada minimaalse kõrguse omadust hõljumise, fookuse ja muude olekute jaoks Tailwindis?
Tailwind pakub vaikeseisundi variante, mida saab varustada disainiomadustega. Need olekuvariandid hõlmavad hõljutust, teravustamist ja aktiivne. Nende olekuvariantide kirjeldus on järgmine:
- ' hõljuma ” olek käivitub alati, kui hiirekursor liigub elemendi kohal.
- ' keskenduda ” olek käivitub alati, kui element on fookuses.
- ' aktiivne ” olek käivitub iga kord, kui element aktiveeritakse või sellel klõpsatakse.
Kasutame minimaalse kõrguse omadust iga olekuga ükshaaval.
Minimaalse kõrguse atribuudi kasutamine hõljumise olekuga
Et kasutada ' minimaalne kõrgus ” klassi hõljumise oleku variandiga Tailwindis, kasutatakse järgmist süntaksit:
< div klass = 'hover:min-h-{size}...' > < / div >
Kasutame demonstratsioonis ülalmääratletud süntaksit. Selles näites suurendame elemendi minimaalset kõrgust alati, kui hiirekursor liigub elemendi kohal.
< div klass = 'min-h-fit rounded-md bg-blue-700 text-center text-white hover:min-h-screen' >Hõljutage kursorit miinimumi suurendamiseks kõrgus < / div >Ülaltoodud koodi selgitus on järgmine:
- ' min-w-sobiv ” klass määrab minimaalse kõrguse piirangu kõrgusele, mida div element nõuab selle sisuga sobitamiseks.
- ' hover:min-w-screen ” klass tagab minimaalse kõrguse piirangu, mis on võrdne 100% ekraani suurusest.
- ' ümardatud-md ', ' bg-{color}-{number} ', ' tekstikeskus ”, ja „ tekst-valge ” klassid vastutavad vastavalt ümarate nurkade, taustavärvi, keskele joondatud teksti ja valge teksti värvi eest div-elemendi jaoks. elemendi div nurgad ümardatud.
Väljund:
Allolevast väljundist on selge, et elemendi minimaalne kõrgus tõuseb 100%-ni ekraani suurusest, kui hiirekursor liigub selle kohal.
Minimaalse kõrguse omaduse kasutamine fookusolekuga
Et kasutada ' minimaalne kõrgus ” klassi fookusolekuga Tailwindis, kasutatakse järgmist süntaksit:
< div klass = 'focus:min-h-{size}...' > < / div >Kasutame demonstratsioonis ülalmääratletud süntaksit. Selles näites suureneb sisestusvälja minimaalne kõrgus, kui kasutaja sellele keskendub.
< sisend kohatäide = 'Keskendu sellele sisestusväljale' klass = 'min-h-0 h-fit w-48 rounded-md bg-grey-200 text-center focus:min-h-[35%]' >< / sisend >Ülaltoodud koodi selgitus on järgmine:
- ' sisend ” väli luuakse koos tekstiga kohahoidja atribuudis.
- Selle minimaalne kõrguspiirang on 0 pikslit, kasutades ' min-h-0 ” klass. Seega määras arendaja elemendi vaikekõrguse, mis on võrdne sisu sobitamiseks vajaliku kõrgusega, kasutades nuppu ' h-sobiv ” klass.
- ' fookus:min-h-[35%] ” klass suurendab sisestusvälja minimaalset kõrguse piirangut, kui kasutaja sellele keskendub.
Väljund:
Allolevast väljundist on selgelt näha, et sisestusvälja kõrgus suureneb, kui kasutaja sellele keskendub. Selle põhjuseks on asjaolu, et minimaalne kõrguse piirang suureneb 0-lt 35%-le ekraani kõrgusest.
Minimaalse kõrguse omaduse kasutamine aktiivse olekuga taganttuules
Et kasutada ' minimaalne kõrgus ” atribuut aktiivse oleku variandiga Tailwindis, kasutatakse järgmist süntaksit:
< div klass = 'active:min-h-{size}...' > < / div >Kasutame demonstratsioonis ülalmääratletud süntaksit. Selles näites suureneb nupu minimaalne kõrgus, kui kasutaja sellel aktiivselt klõpsab.
< nuppu klass = 'min-h-0 h-fit w-48 rounded-md bg-blue-300 text-center active:min-h-[35%]' > Klõpsake suurendamiseks Kõrgus < / nuppu >Luuakse nupp, mille minimaalne kõrgus on 0 pikslit. Kuid kasutades ' aktiivne:min-h-[35%] ” Minimaalne kõrguspiirang suureneb 0 pikslilt 35% ekraani suurusest iga kord, kui nuppu klõpsate.
Väljund:
Järgmises väljundis on näha, et nupu minimaalne kõrgus suureneb, kui kasutaja sellel klõpsab.
See kõik puudutab minimaalse kõrguse atribuudi rakendamist Tailwindi hõljukile, fookusele ja teistele Tailwindi olekutele.
Järeldus
Olekuvariandid, nagu hõljumine, fookus ja aktiivne Tailwindis, võimaldavad kasutajatel luua dünaamilisi kujunduspaigutusi. Et kasutada Tailwindis olekuvariantidega minimaalset kõrgusklassi, hover:min-h-{value} ', ' fookus:min-h-{väärtus} ”, ja „ aktiivne:min-h-{väärtus} ” klasse kasutatakse. See artikkel pakub protseduure hõljumise, fookuse ja muude olekute rakendamiseks minimaalse kõrguse klassiga Tailwindis.