Tämä artikkeli sisältää menettelyn vähimmäiskorkeusominaisuuden soveltamiseksi Hover-, Focus- ja muihin Tailwindin tiloihin.
Huomautus: Lue tämä saadaksesi lisätietoja Tailwindin vähimmäiskorkeusluokista artikla verkkosivuillamme.
Kuinka soveltaa minimikorkeusominaisuutta Hover-, Focus- ja muihin tiloihin Tailwindissä?
Tailwind tarjoaa oletustilan muunnelmia, jotka voidaan tarjota suunnitteluominaisuuksilla. Näitä tilamuunnelmia ovat 'hover', 'focus' ja 'active'. Näiden tilamuunnelmien kuvaus on seuraava:
- ' leijuu ”-tila laukeaa aina, kun hiiren osoitin liikkuu elementin päällä.
- ' keskittyä ”-tila laukeaa aina, kun elementti on tarkennettu.
- ' aktiivinen ”-tila laukeaa aina, kun elementti aktivoidaan tai sitä napsautetaan.
Käytetään vähimmäiskorkeusominaisuutta jokaisessa näistä tiloista yksitellen.
Vähimmäiskorkeusominaisuuden käyttäminen Hover Staten kanssa
Käyttääksesi ' minimikorkeus ” luokassa leijuustilan muunnelmalla Tailwindissä, käytetään seuraavaa syntaksia:
< div luokkaa = 'hover:min-h-{size}...' > < / div >
Käytetään yllä määriteltyä syntaksia esittelyssä. Tässä esimerkissä lisäämme elementin vähimmäiskorkeutta aina, kun hiiren osoitin liikkuu elementin päällä.
< div luokkaa = 'min-h-fit rounded-md bg-blue-700 text-center text-white hover:min-h-screen' >Nosta minimiä viemällä hiiri korkeus < / div >Yllä olevan koodin selitys on seuraava:
- ' min-w-fit ” luokka asettaa vähimmäiskorkeusrajan div-elementin sisältöön sopivaksi vaatimalle korkeudelle.
- ' hover:min-w-screen ” luokka tarjoaa vähimmäiskorkeusrajan, joka on 100 % näytön koosta.
- ' pyöristetty-md ', ' bg-{väri}-{numero} ', ' tekstikeskus ”, ja ” teksti-valkoinen ” luokat vastaavat div-elementin pyöristetyistä kulmista, taustaväristä, keskelle tasatusta tekstistä ja valkoisesta tekstin väristä. div-elementin kulmat pyöristetty.
Lähtö:
Alla olevasta lähdöstä käy selvästi ilmi, että elementin minimikorkeus kasvaa 100 %:iin näytön koosta, kun hiiren osoitin liikkuu sen päällä.
Vähimmäiskorkeusominaisuuden käyttäminen tarkennustilan kanssa
Käyttääksesi ' minimikorkeus ” luokkaa, jonka tarkennustila on Tailwindissä, käytetään seuraavaa syntaksia:
< div luokkaa = 'focus:min-h-{size}...' > < / div >Käytetään yllä määriteltyä syntaksia esittelyssä. Tässä esimerkissä syöttökentän vähimmäiskorkeus kasvaa, kun käyttäjä keskittyy siihen.
< syöttö paikanpitäjä = 'Keskity tähän syöttökenttään' luokkaa = 'min-h-0 h-fit w-48 rounded-md bg-grey-200 text-center focus:min-h-[35%]' >< / syöttö >Yllä olevan koodin selitys on seuraava:
- ' syöttö ” -kenttä luodaan ja jossa on tekstiä paikkamerkkiattribuutissa.
- Sen vähimmäiskorkeusraja on 0px käyttämällä ' min-h-0 ”luokka. Joten kehittäjä asetti elementin oletuskorkeuden yhtä suureksi kuin korkeus, joka vaaditaan sisällön sopimiseen käyttämällä ' h-fit ”luokka.
- ' tarkennus:min-h-[35%] ” luokka kasvattaa syöttökentän minimikorkeusrajaa, kun käyttäjä keskittyy siihen.
Lähtö:
Alla olevasta lähdöstä käy selvästi ilmi, että syöttökentän korkeus kasvaa käyttäjän keskittyessä siihen. Tämä johtuu siitä, että vähimmäiskorkeusraja kasvaa 0 pikselistä 35 prosenttiin näytön korkeudesta.
Vähimmäiskorkeusominaisuuden käyttäminen aktiivisessa tilassa myötätuulessa
Käyttääksesi ' minimikorkeus ”-ominaisuuden aktiivinen tilamuunnelma Tailwindissä, käytetään seuraavaa syntaksia:
< div luokkaa = 'aktiivinen:min-h-{koko}...' > < / div >Käytetään yllä määriteltyä syntaksia esittelyssä. Tässä esimerkissä painikkeen vähimmäiskorkeus kasvaa, kun käyttäjä napsauttaa sitä aktiivisesti.
< -painiketta luokkaa = 'min-h-0 h-fit w-48 rounded-md bg-blue-300 text-center active:min-h-[35%]' > Suurenna napsauttamalla Korkeus < / -painiketta >Luodaan painike, jonka korkeusrajoitus on 0px. Kuitenkin käyttämällä ' aktiivinen:min-h-[35%] ” vähimmäiskorkeusraja kasvaa 0 pikselistä 35 prosenttiin näytön koosta aina, kun painiketta napsautetaan.
Lähtö:
Seuraavasta tuloksesta voidaan nähdä, että painikkeen vähimmäiskorkeus kasvaa, kun käyttäjä napsauttaa sitä.
Siinä on kyse vähimmäiskorkeusominaisuuden soveltamisesta Tailwindin hover-, fokusointi- ja muihin Tailwindin tiloihin.
Johtopäätös
Tilamuunnelmat, kuten hover, fokusointi ja aktiivinen Tailwindissä, antavat käyttäjille mahdollisuuden luoda dynaamisia suunnitteluasetelmia. Jos haluat käyttää vähimmäiskorkeusluokkaa tilaversioiden kanssa Tailwindissä, ' hover:min-h-{value} ', ' fokus:min-h-{arvo} ”, ja ” aktiivinen:min-h-{arvo} ” luokkia käytetään. Tässä artikkelissa on annettu menettely hover-, fokus- ja muiden tilojen soveltamiseen, joiden korkeusluokka on vähimmäiskorkeusluokka Tailwindissa.