Ovaj članak će pružiti postupak za primjenu svojstva minimalne visine na lebdenje, fokus i druga stanja u Tailwindu.
Bilješka: Da biste saznali više o klasama minimalne visine u Tailwindu, pročitajte ovo članak na našoj web stranici.
Kako primijeniti svojstvo minimalne visine na lebdjenje, fokus i druga stanja u vjetru u leđa?
Tailwind pruža zadane varijante stanja koje se mogu pružiti sa svojstvima dizajna. Ove varijante stanja uključuju 'lebdjenje', 'fokus' i 'aktivno'. Opis ovih varijanti stanja je sljedeći:
- ' lebdjeti ” stanje se pokreće kad god kursor miša prijeđe iznad elementa.
- ' usredotočenost ” stanje se pokreće kad god je element u fokusu.
- ' aktivan ” stanje se pokreće kad god se element aktivira ili klikne na njega.
Upotrijebimo svojstvo minimalne visine sa svakim od ovih stanja jedno po jedno.
Korištenje svojstva minimalne visine sa stanjem lebdenja
Za korištenje ' minimalna visina ” s varijantom stanja lebdenja u Tailwindu, koristi se sljedeća sintaksa:
< div razreda = 'lebdjeti:min-h-{veličina}...' > < / div >
Upotrijebimo gore definiranu sintaksu u demonstraciji. U ovom primjeru povećat ćemo minimalnu visinu elementa kad god pokazivač miša lebdi iznad elementa.
< div razreda = 'min-h-fit rounded-md bg-blue-700 text-center text-white hover:min-h-screen' >Zadržite pokazivač za povećanje minimuma visina < / div >Objašnjenje gornjeg koda je sljedeće:
- ' min-w-fit ” klasa postavlja minimalnu granicu visine na visinu koju element div zahtijeva da odgovara svom sadržaju.
- ' lebdjeti: min-w-zaslon ” klasa će osigurati minimalno ograničenje visine jednako 100% veličine zaslona.
- ' zaobljeno-md ', ' bg-{boja}-{broj} ', ' tekst-centar ', i ' tekst-bijeli ” klase odgovorne su za zaobljene kutove, boju pozadine, tekst poravnat u sredini i bijelu boju teksta za element div. uglovi elementa div zaobljeni.
Izlaz:
Jasno je iz donjeg izlaza da se minimalna visina elementa povećava na 100% veličine zaslona dok kursor miša lebdi iznad njega.
Korištenje svojstva minimalne visine sa stanjem fokusa
Za korištenje ' minimalna visina ” sa stanjem fokusa u Tailwindu, koristi se sljedeća sintaksa:
< div razreda = 'fokus:min-h-{veličina}...' > < / div >Upotrijebimo gore definiranu sintaksu u demonstraciji. U ovom primjeru, minimalna visina polja za unos će se povećati kada se korisnik fokusira na njega.
< ulazni rezerviranog mjesta = 'Fokusiraj ovo polje za unos' razreda = 'min-h-0 h-fit w-48 rounded-md bg-gray-200 text-center focus:min-h-[35%]' >< / ulazni >Objašnjenje gornjeg koda je sljedeće:
- ' ulazni ” polje se stvara s nekim tekstom u atributu rezerviranog mjesta.
- Omogućeno je minimalno ograničenje visine od 0px pomoću ' min-h-0 ” razred. Dakle, programer je postavio zadanu visinu elementa jednaku visini potrebnoj za pristajanje sadržaja pomoću ' h-slaganje ” razred.
- ' fokus:min-h-[35%] ” klasa će povećati ograničenje minimalne visine polja za unos kada se korisnik fokusira na njega.
Izlaz:
Iz izlaza u nastavku jasno je da se visina polja za unos povećava kako se korisnik fokusira na njega. To je zato što se ograničenje minimalne visine povećava s 0px na 35% visine zaslona.
Korištenje svojstva minimalne visine s aktivnim stanjem u stražnjem vjetru
Za korištenje ' minimalna visina ” s varijantom aktivnog stanja u Tailwindu, koristi se sljedeća sintaksa:
< div razreda = 'aktivan:min-h-{veličina}...' > < / div >Upotrijebimo gore definiranu sintaksu u demonstraciji. U ovom primjeru, minimalna visina gumba će se povećati kada korisnik aktivno klikne na njega.
< dugme razreda = 'min-h-0 h-fit w-48 rounded-md bg-blue-300 text-center active:min-h-[35%]' > Kliknite za povećanje Visina < / dugme >Gumb se stvara s ograničenjem minimalne visine od 0px. Međutim, koristeći ' aktivno: min-h-[35%] ” ograničenje minimalne visine povećat će se s 0px na 35% veličine zaslona kad god se klikne gumb.
Izlaz:
U sljedećem izlazu se može vidjeti da se minimalna visina gumba povećava kada korisnik klikne na njega.
To je sve o primjeni svojstva minimalne visine na lebdenje, fokus i druga stanja u Tailwindu.
Zaključak
Varijante stanja kao što su lebdjenje, fokus i aktivno u Tailwindu omogućuju korisnicima stvaranje dinamičkih izgleda dizajna. Za korištenje minimalne klase visine s varijantama stanja u Tailwindu, ' lebdi:min-h-{vrijednost} ', ' fokus:min-h-{vrijednost} ', i ' aktivno:min-h-{vrijednost} ” koriste se klase. Ovaj članak pruža postupak za primjenu lebdenja, fokusa i drugih stanja s minimalnom visinskom klasom u Tailwindu.