Ez a cikk ismerteti a minimális magasság tulajdonságok Lebegés, Fókusz és más állapotokra történő alkalmazását a Tailwindben.
Jegyzet: Ha többet szeretne megtudni a Tailwind minimális magassági osztályairól, olvassa el ezt cikk honlapunkon.
Hogyan kell alkalmazni a minimális magasságú tulajdonságot a lebegésre, a fókuszra és más állapotokra a hátszélben?
A Tailwind alapértelmezett állapotváltozatokat biztosít, amelyek a tervezési tulajdonságokkal biztosíthatók. Ezek az állapotváltozatok közé tartozik a „lebegés”, „fókusz” és „aktív”. Ezen állapotváltozatok leírása a következő:
- A' lebeg ” állapot aktiválódik, amikor az egérmutatót egy elem fölé viszi.
- A ' fókusz ” állapot aktiválódik, amikor az elem fókuszban van.
- A ' aktív ” állapot aktiválódik, amikor az elemet aktiválják vagy rákattintják.
Használjuk egyenként a minimális magasság tulajdonságot ezen állapotok mindegyikével.
Minimális magasság tulajdonság használata lebegő állapottal
A „ minimális magasság ” osztály lebegő állapotváltozatával a Tailwindben, a következő szintaxist használják:
< div osztály = 'hover:min-h-{size}...' > < / div >
Használjuk a fent meghatározott szintaxist egy demonstrációban. Ebben a példában megnöveljük egy elem minimális magasságát, amikor az egérmutatót az elem fölé viszi.
< div osztály = 'min-h-fit rounded-md bg-blue-700 text-center text-white hover:min-h-screen' > Mutasson rá az egérrel a minimum növeléséhez magasság < / div >A fenti kód magyarázata a következő:
- A ' min-w-fit ” osztály a minimális magassághatárt a div elem által megkövetelt magasságra állítja be, hogy illeszkedjen a tartalmához.
- A ' hover:min-w-screen ” osztály a képernyő méretének 100%-ának megfelelő minimális magassági korlátot biztosít.
- A ' lekerekített-md ', ' bg-{color}-{number} ', ' szövegközpont ”, és „ szöveg-fehér ” osztályok felelősek a lekerekített sarkokért, a háttérszínért, a középre igazított szövegért és a div elem fehér szövegszínéért. a div elem sarkai lekerekítettek.
Kimenet:
Az alábbi kimenetből jól látható, hogy az elem minimális magassága a képernyő méretének 100%-ára növekszik, ha az egérmutatót fölé viszi.
Minimális magasság tulajdonság használata fókuszállapottal
A „ minimális magasság ” osztály, amelynek fókuszállapota Tailwindben van, a következő szintaxist használjuk:
< div osztály = 'focus:min-h-{size}...' > < / div >Használjuk a fent meghatározott szintaxist egy demonstrációban. Ebben a példában a beviteli mező minimális magassága megnő, amikor a felhasználó rá fókuszál.
< bemenet helykitöltő = 'Fókuszban erre a beviteli mezőre' osztály = 'min-h-0 h-fit w-48 rounded-md bg-grey-200 text-center focus:min-h-[35%]' >< / bemenet >A fenti kód magyarázata a következő:
- egy ' bemenet ” mező jön létre néhány szöveggel a helyőrző attribútumban.
- 0 képpontos minimális magasságkorlátot biztosít a „ min-h-0 ' osztály. Tehát a fejlesztő beállította az elem alapértelmezett magasságát a tartalom illeszkedéséhez szükséges magassággal a „ h-fit ' osztály.
- A ' fókusz:perc-ó-[35%] ” osztály növeli a beviteli mező minimális magassági határát, amikor a felhasználó arra fókuszál.
Kimenet:
Az alábbi kimenetből jól látható, hogy a beviteli mező magassága növekszik, ahogy a felhasználó rá fókuszál. Ennek az az oka, hogy a minimális magassághatár 0 képpontról a képernyő magasságának 35%-ára nő.
Minimális magasság tulajdonság használata aktív állapotban hátszélben
A „ minimális magasság ” tulajdonság aktív állapotváltozatával a Tailwindben, a következő szintaxis kerül felhasználásra:
< div osztály = 'aktív:perc-h-{méret}...' > < / div >Használjuk a fent meghatározott szintaxist egy demonstrációban. Ebben a példában a gomb minimális magassága megnő, ha a felhasználó aktívan rákattint.
< gomb osztály = 'min-h-0 h-fit w-48 rounded-md bg-blue-300 text-center active:min-h-[35%]' > Kattintson a Növeléshez Magasság < / gomb >Létrejön egy gomb, amelynek minimális magassága 0 képpont. Azonban a „ aktív:perc-óra-[35%] ” a minimális magasságkorlát 0 képpontról a képernyő méretének 35%-ára nő, amikor a gombra kattintanak.
Kimenet:
A következő kimeneten látható, hogy a gomb minimális magassága megnő, ha a felhasználó rákattint.
Ez arról szól, hogy a minimális magasság tulajdonságot alkalmazzuk a Tailwind lebegésre, fókuszra és a Tailwind többi állapotára.
Következtetés
Az állapotváltozatok, például a lebegés, a fókusz és az aktív a Tailwindben, lehetővé teszik a felhasználók számára, hogy dinamikus tervezési elrendezéseket hozzanak létre. A minimális magassági osztály használatához a Tailwind állapotváltozatainál a „ hover:min-h-{value} ', ' fókusz:min-ó-{érték} ”, és „ aktív:perc-ó-{érték} ” osztályok használatosak. Ez a cikk ismerteti a lebegés, a fókusz és más állapotok alkalmazásának eljárását a minimális magassági osztályokkal a hátszélben.