' h-näyttö ”-luokkaa Tailwindissä käytetään määrittämään HTML-elementin näkymän korkeus. Viewport on vain toinen nimi asiakkaan näytön koolle. Kehittäjä voi helposti valita koko näkymän tämän ' h-näyttö ” luokkaa ja käytä sitten useita Tailwind-luokkia vastaavasti.
Tässä artikkelissa käsitellään näkymän korkeuden lisäämistä Tailwind-elementtiin käyttämällä ' h-näyttö ”luokka.
Kuinka asettaa elementin katselukorkeus käyttämällä 'h-screen' -luokkaa myötätuulessa?
Jos elementille on määritetty näkymän korkeus käyttämällä ' h-näyttö ” luokassa, se säätää korkeusominaisuuden automaattisesti asiakkaan näytön mukaan. Jos haluat käyttää näkymän korkeutta myötätuulessa, noudata alla annettua käytäntöä:
< div luokkaa = 'h-näyttö' > Hei < / div >
Yllä olevasta esityksestä on selvää, että ' h-näyttö ” käytetään elementin class-attribuutissa useiden muiden Tailwind-luokkien ohella asettelun suunnittelussa.
Luodaan näennäinen kojelauta ja annetaan näkymän korkeus kojelautanäytön sivupalkille.
< div luokkaa = 'flex' >
< div luokkaa = 'w-56 h-screen rounded-lg bg-blue-600 text-center text-cyan-50 py-6 text-2xl font-bold' > Kojelauta
< ul luokkaa = 'text-lg py-8 space-y-7' >
< että >joukkue< / että >
< että >Projektit< / että >
< että >Raportit< / että >
< että >Asiakirjat< / että >
< / ul >
< / div >
< div luokkaa = 'text-center text-3xl py-8 ps-5' >Tervetuloa kojelautaan!< / div >
< / div >
Koodin selitys:
- Ensinnäkin ' div '-elementti luodaan, jonka luokka on ' flex ”, tämä luokka kohdistaa pysyvät kohteet vaakasuoraan viivaan.
- Luo seuraavaksi toinen ' div ' 8 kuvapisteen ylä- ja alareunoilla käyttämällä ' py-2 ” luokka ja anna sille kiinteä leveys käyttämällä ” w-56 ”luokka. Aseta seuraavaksi elementin korkeus kuvaportin korkeudeksi ' h-näyttö ”luokka. Säiliön kulmat on pyöristetty.
- ' bg-{väri}-{numero} ” -luokkaa käytetään antamaan säilölle taustaväri. ' tekstikeskus ” luokka tasaa tekstin sisällön keskelle. Tekstin fontin painoksi on asetettu ' lihavoitu ' ja fonttikoko on ' 2xl ”.
- Seuraavaksi järjestämätön luettelo '< ul >' luodaan suurella kirjasinkoolla ja ' 48px ” margin-top käyttämällä 'space-y' myötätuuliluokkaa.
- Sitten luodaan neljä luettelokohdetta käyttämällä “< että >' -tunnisteita.
- Toinen' div ' -elementti luodaan 32 kuvapisteen ylhäältä alas ja 20 pikselin rivin aloitustäytteellä käyttämällä ' py' ja 'ps ' luokat.
Yllä selitetyn koodin tulos on seuraava:
Yllä olevasta tuloksesta on selvää, että kojelaudan sivupalkissa on näytön näkymän korkeus. Siinä on kyse ' h-näyttö ”-luokka Tailwindissä.
Johtopäätös
' h-näyttö ”-luokkaa Tailwindissa käytetään määrittämään Viewport-korkeus elementille eli asiakkaan näytön korkeudelle. Käyttämällä ' h-näyttö ” luokassa, elementti perii automaattisesti näytön korkeuden. Jos haluat käyttää näkymän korkeutta myötätuulessa, ' h-näyttö ' omaisuus on välitettävä arvona ' luokkaa '-attribuutti kuten '< div class= “h-screen ”>”. Tämä artikkeli sisältää menettelyn ' h-näyttö ”-luokka Tailwindissä.