Quin és el propòsit de la propietat 'h-screen' a Tailwind

Quin Es El Proposit De La Propietat H Screen A Tailwind



El ' pantalla h ” La classe de Tailwind s'utilitza per assignar l'alçada de la finestra gràfica a un element HTML. Viewport és només un altre nom per a la mida de la pantalla d'un client. El desenvolupador pot seleccionar fàcilment tota la finestra gràfica amb l'ajuda d'aquest ' pantalla h ” classe i després apliqueu diverses classes Tailwind en conseqüència.

Aquest article proporcionarà el procediment per afegir l'alçada de la finestra gràfica a un element a Tailwind mitjançant el ' pantalla h ” classe.







Com establir l'alçada de la finestra gràfica d'un element utilitzant la classe 'h-screen' a Tailwind?

Si s'assigna a un element l'alçada de la finestra gràfica mitjançant el botó “ pantalla h ”, ajustarà automàticament la seva propietat d'alçada segons la pantalla del client. Per utilitzar l'alçada de la finestra gràfica a Tailwind, seguiu la convenció proporcionada a continuació:



< div classe = 'pantalla h' > Hola < / div >

A partir de la demostració anterior, queda clar que el ' pantalla h ” s'utilitza a l'atribut class de l'element juntament amb altres classes Tailwind per dissenyar el disseny.



Creem un tauler de control fictici i donem una alçada de la finestra gràfica a la barra lateral de la pantalla del tauler.





< div classe = 'flexió' >
< div classe = 'w-56 h-screen arrodonit-lg bg-blau-600 text-centre text-cyan-50 py-6 text-2xl font-bold' > Tauler de control
< ul classe = 'text-lg py-8 espai-y-7' >
< això >Equip< / això >
< això >Projectes< / això >
< això >Informes< / això >
< això >Documents< / això >
< / ul >
< / div >
< div classe = 'text-center text-3xl py-8 ps-5' >Benvingut a The Dashboard!< / div >
< / div >

Explicació del codi:

  • En primer lloc, un ' div L'element ' es crea amb la classe ' flexionar ”, aquesta classe alinea els elements residents en una línia horitzontal.
  • A continuació, creeu un altre ' div ” amb 8 píxels de farciment superior i inferior utilitzant el “ py-2 ” classe i assigneu-li una amplada fixa utilitzant el “ w-56 ” classe. A continuació, configureu l'alçada de l'element a l'alçada de la finestra gràfica amb el ' pantalla h ” classe. Les cantonades del contenidor estan arrodonides.
  • El ' bg-{color}-{nombre} La classe s'utilitza per proporcionar un color de fons al contenidor. El ' centre de text ” La classe alinea el contingut del text al centre. El pes de la lletra per al text s'estableix en ' agosarat ”, i la mida de la lletra és “ 2xl ”.
  • A continuació, una llista no ordenada “< ul >' es crea amb una mida de lletra gran i un ' 48 píxels ” margin-top utilitzant la classe de vent de cua “espai-y”.
  • Aleshores, es creen quatre elements de la llista amb el botó “< això > etiquetes.
  • Un altre ' div L'element ' es crea amb un farciment d'inici en línia de 32 px a la part superior inferior i 20 px amb el ' py' i 'ps ” classes.

La sortida del codi explicat anteriorment és la següent:



A partir de la sortida anterior, queda clar que la barra lateral del tauler té l'alçada de la finestra gràfica de la pantalla. Això és tot el propòsit de la ' pantalla h ” classe a Tailwind.

Conclusió

El ' pantalla h La classe de Tailwind s'utilitza per assignar l'alçada de la finestra gràfica a un element, és a dir, l'alçada de la pantalla del client. Utilitzant el ' pantalla h ” classe, l'element heretarà automàticament l'alçada de la pantalla. Per utilitzar l'alçada de la finestra gràfica a Tailwind, el ' pantalla h ', la propietat s'ha de passar com a valor per al ' classe ” atribut com “< div class= 'pantalla h ”>”. Aquest article ha proporcionat el procediment per utilitzar el ' pantalla h ” classe a Tailwind.