Acest articol va oferi procedura de aplicare a proprietății înălțimii minime pentru Hover, Focus și alte state din Tailwind.
Notă: Pentru a afla mai multe despre clasele de înălțime minimă în Tailwind, citiți aceasta articol pe site-ul nostru.
Cum să aplicați proprietatea de înălțime minimă la Hover, Focus și alte state în Tailwind?
Tailwind oferă variante implicite de stare care pot fi furnizate cu proprietățile de proiectare. Aceste variante de stare includ „hover”, „focus” și „activ”. Descrierea acestor variante de stare este următoarea:
- „ planare ” se declanșează ori de câte ori cursorul mouse-ului trece peste un element.
- „ se concentreze ” starea este declanșată ori de câte ori elementul este focalizat.
- „ activ ” se declanșează ori de câte ori elementul este activat sau se face clic pe acesta.
Să folosim proprietatea înălțimii minime cu fiecare dintre aceste stări una câte una.
Utilizarea proprietății de înălțime minimă cu stare de hover
Pentru a utiliza „ inaltime minima ” cu o variantă de stare hover în Tailwind, se utilizează următoarea sintaxă:
< div clasă = „hover:min-h-{size}...” > < / div >
Să folosim sintaxa definită mai sus într-o demonstrație. În acest exemplu, vom crește înălțimea minimă a unui element ori de câte ori cursorul mouse-ului trece peste element.
< div clasă = „min-h-fit rotunjit-md bg-blue-700 text-center text-white hover:min-h-screen” > Treceți cursorul pentru a crește valoarea minimă înălţime < / div >Explicația codului de mai sus este următoarea:
- „ min-w-fit ” class stabilește limita minimă de înălțime la înălțimea cerută de elementul div pentru a se potrivi conținutului său.
- „ hover:min-w-ecran ” clasa va oferi o limită de înălțime minimă egală cu 100% din dimensiunea ecranului.
- „ rotunjite-md ', ' bg-{culoare}-{număr} ', ' centru de text ', și ' text-alb Clasele sunt responsabile pentru colțurile rotunjite, culoarea de fundal, textul aliniat la centru și, respectiv, culoarea textului alb pentru elementul div. colțurile elementului div rotunjite.
Ieșire:
Din rezultatul de mai jos reiese clar că înălțimea minimă a elementului crește la 100% din dimensiunea ecranului pe măsură ce cursorul mouse-ului trece peste el.
Utilizarea proprietății de înălțime minimă cu starea de focalizare
Pentru a utiliza „ inaltime minima ” cu starea focus în Tailwind, se folosește următoarea sintaxă:
< div clasă = 'focus:min-h-{size}...' > < / div >Să folosim sintaxa definită mai sus într-o demonstrație. În acest exemplu, înălțimea minimă a unui câmp de intrare va crește atunci când utilizatorul se concentrează asupra acestuia.
< intrare substituent = „Concentrați-vă pe acest câmp de introducere” clasă = „min-h-0 h-fit w-48 rounded-md bg-gray-200 text-center focus: min-h-[35%]” >< / intrare >Explicația codului de mai sus este următoarea:
- Un „ intrare ” câmpul este creat cu ceva text în atributul substituent.
- Este furnizată o limită minimă de înălțime de 0px folosind „ min-h-0 ” clasa. Deci, dezvoltatorul a stabilit înălțimea implicită a elementului egală cu înălțimea necesară pentru a se potrivi conținutului folosind „ h-potrivit ” clasa.
- „ focalizare:min-h-[35%] ” clasa va crește limita minimă de înălțime a câmpului de introducere atunci când utilizatorul se concentrează asupra acestuia.
Ieșire:
Din rezultatul de mai jos reiese clar că înălțimea câmpului de intrare crește pe măsură ce utilizatorul se concentrează asupra acestuia. Acest lucru se datorează faptului că limita minimă de înălțime crește de la 0px la 35% din înălțimea ecranului.
Utilizarea proprietății de înălțime minimă cu stare activă în vânt din coadă
Pentru a utiliza „ inaltime minima ” cu varianta de stare activă în Tailwind, se utilizează următoarea sintaxă:
< div clasă = „activ:min-h-{size}...” > < / div >Să folosim sintaxa definită mai sus într-o demonstrație. În acest exemplu, înălțimea minimă a butonului va crește atunci când utilizatorul face clic activ pe el.
< buton clasă = „min-h-0 h-fit w-48 rotunjit-md bg-blue-300 text-center activ: min-h-[35%]” > Faceți clic pentru a crește Înălţime < / buton >Se creează un buton cu o limită de înălțime minimă de 0px. Cu toate acestea, folosind „ activ: min-h-[35%] ” limita minimă de înălțime va crește de la 0px la 35% din dimensiunea ecranului ori de câte ori se face clic pe butonul.
Ieșire:
În rezultatul următor se poate observa că înălțimea minimă a butonului crește atunci când utilizatorul face clic pe el.
Acesta este totul despre aplicarea proprietății înălțimii minime la Hover Tailwind, focalizare și celelalte stări din Tailwind.
Concluzie
Variantele de stare, cum ar fi hover, focus și activ în Tailwind, permit utilizatorilor să creeze layout-uri dinamice de design. Pentru a utiliza clasa de înălțime minimă cu variante de stat în Tailwind, „ hover:min-h-{valoare} ', ' focus:min-h-{valoare} ', și ' activ:min-h-{valoare} ” se folosesc clase. Acest articol a furnizat procedura de aplicare a hoverului, a focalizării și a altor stări cu clasa de înălțime minimă în Tailwind.