Šiame straipsnyje bus pateikta minimalaus aukščio ypatybių taikymo „Hover“, „Focus“ ir kitoms „Tailwind“ būsenoms procedūra.
Pastaba: Norėdami sužinoti daugiau apie minimalaus aukščio klases Tailwind, perskaitykite tai straipsnis mūsų svetainėje.
Kaip taikyti minimalaus aukščio savybę „Hover“, „Focus“ ir kitoms būsenoms „Tailwind“?
Tailwind pateikia numatytuosius būsenos variantus, kurie gali būti pateikti su dizaino savybėmis. Šie būsenos variantai apima „užvedimą“, „fokusuoti“ ir „aktyvus“. Šių būsenų variantų aprašymas yra toks:
- „ užveskite pelės žymeklį “ būsena suveikia, kai pelės žymeklis užvedamas virš elemento.
- „ sutelkti dėmesį “ būsena suveikia, kai elementas yra sufokusuotas.
- „ aktyvus “ būsena suveikia, kai elementas suaktyvinamas arba paspaudžiamas.
Naudokime minimalaus aukščio savybę su kiekviena iš šių būsenų po vieną.
Minimalaus aukščio nuosavybės naudojimas su užvedimo būsena
Norėdami naudoti ' minimalus aukštis ” klasėje su užvedimo būsenos variantu Tailwind, naudojama ši sintaksė:
< div klasė = 'hover:min-h-{size}...' > < / div >
Demonstracijoje naudokime aukščiau apibrėžtą sintaksę. Šiame pavyzdyje padidinsime minimalų elemento aukštį, kai pelės žymeklis užves virš elemento.
< div klasė = 'min-h-fit rounded-md bg-blue-700 text-center text-white hover:min-h-screen' >Užveskite pelės žymeklį, kad padidintumėte minimumą aukščio < / div >Aukščiau pateikto kodo paaiškinimas yra toks:
- „ min-w-fit ” klasė nustato minimalų aukščio ribą iki aukščio, kurio reikalauja elementas div, kad atitiktų jo turinį.
- „ hover:min-w-screen ” klasė suteiks minimalų aukščio ribą, lygią 100 % ekrano dydžio.
- „ suapvalintas-md ', ' bg-{color}-{number} ', ' teksto centras “ ir „ tekstas-baltas “ klasės yra atsakingos už suapvalintus kampus, fono spalvą, centre išlygiuotą tekstą ir baltą div elemento teksto spalvą. div elemento kampai suapvalinti.
Išvestis:
Iš toliau pateiktos išvesties aišku, kad mažiausias elemento aukštis padidėja iki 100% ekrano dydžio, kai pelės žymeklis užves virš jo.
Minimalaus aukščio savybės naudojimas su fokusavimo būsena
Norėdami naudoti ' minimalus aukštis “ klasė su fokusavimo būsena Tailwind, naudojama ši sintaksė:
< div klasė = 'focus:min-h-{size}...' > < / div >Demonstracijoje naudokime aukščiau apibrėžtą sintaksę. Šiame pavyzdyje minimalus įvesties lauko aukštis padidės, kai vartotojas sutelks dėmesį į jį.
< įvestis vietos rezervuaras = „Sutelkti dėmesį į šį įvesties lauką“ klasė = 'min-h-0 h-fit w-48 rounded-md bg-grey-200 text-center focus:min-h-[35%]' >< / įvestis >Aukščiau pateikto kodo paaiškinimas yra toks:
- „ įvestis “ laukas sukuriamas su tam tikru tekstu vietos rezervavimo atribute.
- Numatyta minimali 0 pikselių aukščio riba naudojant „ min-h-0 ' klasė. Taigi kūrėjas nustatė numatytąjį elemento aukštį, lygų aukščiui, kurio reikia, kad tilptų turinys, naudodamas „ h-fit ' klasė.
- „ fokusas:min-h-[35%] ” klasė padidins minimalų įvesties lauko aukščio ribą, kai vartotojas sutelks dėmesį į jį.
Išvestis:
Iš toliau pateiktos išvesties aišku, kad įvesties lauko aukštis didėja, kai vartotojas sutelkia dėmesį į jį. Taip yra todėl, kad minimalus aukščio apribojimas padidėja nuo 0 pikselių iki 35 % ekrano aukščio.
Naudojant minimalaus aukščio savybę esant aktyviam vėjui
Norėdami naudoti ' minimalus aukštis ” ypatybę su aktyvios būsenos variantu Tailwind, naudojama ši sintaksė:
< div klasė = 'aktyvus:min-h-{dydis}...' > < / div >Demonstracijoje naudokime aukščiau apibrėžtą sintaksę. Šiame pavyzdyje minimalus mygtuko aukštis padidės, kai vartotojas jį aktyviai spusteli.
< mygtuką klasė = 'min-h-0 h-fit w-48 rounded-md bg-blue-300 text-center active:min-h-[35%]' > Spustelėkite norėdami padidinti Aukštis < / mygtuką >Sukuriamas mygtukas, kurio minimalus aukščio apribojimas yra 0 pikselių. Tačiau naudojant „ aktyvus:min-h-[35%] “ minimalus aukščio apribojimas padidės nuo 0 pikselių iki 35 % ekrano dydžio kiekvieną kartą, kai spustelėsite mygtuką.
Išvestis:
Toliau pateiktame išvestyje matyti, kad vartotojui spustelėjus mygtuko mažiausias aukštis padidėja.
Tai viskas apie minimalaus aukščio ypatybės taikymą Tailwind hover, fokusavimui ir kitoms Tailwind būsenoms.
Išvada
Būsenos variantai, pvz., užvedimas, fokusavimas ir aktyvus „Tailwind“, leidžia vartotojams kurti dinamiškus dizaino išdėstymus. Jei norite naudoti minimalią aukščio klasę su būsenos variantais „Tailwind“, „ hover:min-h-{value} ', ' Focus:min-h-{value} “ ir „ aktyvus:min-h-{value} “ yra naudojamos klasės. Šiame straipsnyje pateikta užvedimo, fokusavimo ir kitų būsenų su minimalia aukščio klase Tailwind taikymo tvarka.