Šajā rakstā ir sniegta procedūra minimālā augstuma rekvizīta lietošanai Hover, Focus un citiem Tailwind stāvokļiem.
Piezīme: Lai uzzinātu vairāk par minimālajām augstuma klasēm Tailwind, izlasiet šo rakstu mūsu mājas lapā.
Kā piemērot minimālā augstuma īpašību lidojumam, fokusam un citiem stāvokļiem aizmugurējā vējā?
Tailwind nodrošina noklusējuma stāvokļa variantus, kurus var nodrošināt ar dizaina īpašībām. Šie stāvokļu varianti ietver “virziet kursoru”, “fokuss” un “aktīvs”. Šo stāvokļa variantu apraksts ir šāds:
- ' novietojiet kursoru ” stāvoklis tiek aktivizēts ikreiz, kad peles kursors novieto virs elementa.
- ' fokuss ” stāvoklis tiek aktivizēts ikreiz, kad elements ir fokusā.
- ' aktīvs ” stāvoklis tiek aktivizēts ikreiz, kad elements tiek aktivizēts vai uz tā tiek noklikšķināts.
Izmantosim minimālā augstuma īpašību ar katru no šiem stāvokļiem pa vienam.
Minimālā augstuma rekvizīta izmantošana ar pārvietošanās stāvokli
Lai izmantotu ' minimālais augstums ” klase ar kursora stāvokļa variantu programmā Tailwind, tiek izmantota šāda sintakse:
< div klasē = 'hover:min-h-{size}...' > < / div >
Demonstrācijā izmantosim iepriekš definēto sintaksi. Šajā piemērā mēs palielināsim elementa minimālo augstumu ikreiz, kad peles kursors virzīs virs elementa.
< div klasē = 'min-h-fit rounded-md bg-blue-700 text-center text-white hover:min-h-screen' >Novietojiet kursoru, lai palielinātu minimumu augstums < / div >Iepriekš minētā koda skaidrojums ir šāds:
- ' min-w-fit ” klase nosaka minimālo augstuma ierobežojumu augstumam, kas nepieciešams div elementam, lai tas atbilstu tā saturam.
- ' kursors:min-w-screen ” klase nodrošinās minimālo augstuma ierobežojumu, kas vienāds ar 100% no ekrāna izmēra.
- ' noapaļots-md ',' bg-{color}-{number} ',' teksta centrs ', un ' teksts-balts ” klases ir attiecīgi atbildīgas par noapaļotiem stūriem, fona krāsu, centrā līdzināto tekstu un balto teksta krāsu elementam div. div elementa stūri noapaļoti.
Izvade:
No zemāk redzamās izvades ir skaidrs, ka elementa minimālais augstums palielinās līdz 100% no ekrāna izmēra, kad peles kursors atrodas virs tā.
Minimālā augstuma īpašuma izmantošana ar fokusa stāvokli
Lai izmantotu ' minimālais augstums ” klase ar fokusa stāvokli programmā Tailwind, tiek izmantota šāda sintakse:
< div klasē = 'focus:min-h-{size}...' > < / div >Demonstrācijā izmantosim iepriekš definēto sintaksi. Šajā piemērā ievades lauka minimālais augstums palielināsies, kad lietotājs fokusējas uz to.
< ievade vietturis = 'Koncentrēties uz šo ievades lauku' klasē = 'min-h-0 h-fit w-48 rounded-md bg-grey-200 text-center focus:min-h-[35%]' >< / ievade >Iepriekš minētā koda skaidrojums ir šāds:
- “ ievade ” lauks ir izveidots ar kādu tekstu viettura atribūtā.
- Tam tiek nodrošināts minimālais augstuma ierobežojums 0 pikseļi, izmantojot “ min-h-0 ” klase. Tātad izstrādātājs iestatīja elementa noklusējuma augstumu, kas ir vienāds ar augstumu, kas nepieciešams, lai tas atbilstu saturam, izmantojot “ h-fit ” klase.
- ' fokuss:min-h-[35%] ” klase palielinās ievades lauka minimālā augstuma ierobežojumu, kad lietotājs uz to fokusēsies.
Izvade:
No tālāk redzamās izvades ir skaidrs, ka ievades lauka augstums palielinās, lietotājam koncentrējoties uz to. Tas ir tāpēc, ka minimālā augstuma ierobežojums palielinās no 0 pikseļiem līdz 35% no ekrāna augstuma.
Minimālā augstuma īpašuma izmantošana ar aktīvu stāvokli aizmugurējā vējā
Lai izmantotu ' minimālais augstums ” rekvizītu ar aktīvā stāvokļa variantu programmā Tailwind, tiek izmantota šāda sintakse:
< div klasē = 'active:min-h-{size}...' > < / div >Demonstrācijā izmantosim iepriekš definēto sintaksi. Šajā piemērā pogas minimālais augstums palielināsies, kad lietotājs uz tās aktīvi noklikšķinās.
< pogu klasē = 'min-h-0 h-fit w-48 rounded-md bg-blue-300 text-center active:min-h-[35%]' > Noklikšķiniet, lai palielinātu Augstums < / pogu >Tiek izveidota poga ar minimālo augstuma ierobežojumu 0 pikseļi. Tomēr, izmantojot “ aktīvs:min-h-[35%] ” minimālais augstuma ierobežojums palielināsies no 0 pikseļiem līdz 35% no ekrāna izmēra ikreiz, kad tiek noklikšķināts uz pogas.
Izvade:
Nākamajā izvadā redzams, ka pogas minimālais augstums palielinās, kad lietotājs uz tās noklikšķina.
Tas viss attiecas uz minimālā augstuma rekvizīta piemērošanu Tailwind hover, fokusēšanai un citiem Tailwind stāvokļiem.
Secinājums
Stāvokļa varianti, piemēram, kursors, fokuss un aktīvs programmā Tailwind, ļauj lietotājiem izveidot dinamiskus dizaina izkārtojumus. Lai izmantotu minimālo augstuma klasi ar stāvokļa variantiem Tailwind, “ hover:min-h-{value} ',' fokuss:min-h-{vērtība} ', un ' aktīvs:min-h-{vērtība} ” klases tiek izmantotas. Šajā rakstā ir sniegta procedūra, kā piemērot kursoru, fokusu un citus stāvokļus ar minimālo augstuma klasi Tailwind.