IL ' schermo h ' in Tailwind viene utilizzata per assegnare l'altezza del viewport a un elemento HTML. Viewport è solo un altro nome per la dimensione dello schermo di un cliente. Lo sviluppatore può facilmente selezionare l'intera finestra con l'aiuto di questo ' schermo H ' e quindi applicare diverse classi Tailwind di conseguenza.
Questo articolo fornirà la procedura per aggiungere l'altezza della finestra a un elemento in Tailwind utilizzando il comando ' schermo h ' classe.
Come impostare l'altezza della finestra di un elemento utilizzando la classe 'h-screen' in Tailwind?
Se a un elemento viene assegnata l'altezza della finestra utilizzando il comando ' schermo h ', regolerà automaticamente la sua proprietà di altezza in base allo schermo del client. Per utilizzare l'altezza del viewport in Tailwind, seguire la convenzione fornita di seguito:
< div classe = 'schermo h' > Ciao < / div >
Dalla dimostrazione di cui sopra, è chiaro che “ schermo h ' viene utilizzato nell'attributo class dell'elemento insieme a varie altre classi Tailwind per la progettazione del layout.
Creiamo un dashboard fittizio e diamo un'altezza di visualizzazione alla barra laterale della schermata del dashboard.
< div classe = 'flettere' >
< div classe = 'w-56 h-schermo arrotondato-lg bg-blu-600 testo-centro testo-ciano-50 py-6 testo-2xl carattere-grassetto' >Cruscotto
< ul classe = 'testo-lg py-8 spazio-y-7' >
< Quello >Squadra< / Quello >
< Quello >Progetti< / Quello >
< Quello >Rapporti< / Quello >
< Quello >Documenti< / Quello >
< / ul >
< / div >
< div classe = 'testo-centro testo-3xl py-8 ps-5' >Benvenuti nella dashboard!< / div >
< / div >
Spiegazione del codice:
- Innanzitutto un “ div L'elemento ' viene creato con la classe di ' flettere ”, questa classe allinea gli elementi residenti su una linea orizzontale.
- Successivamente, creane un altro “ div ' con 8px di riempimento superiore e inferiore utilizzando ' py-2 ' e assegnargli una larghezza fissa utilizzando il comando ' w-56 ' classe. Successivamente, imposta l'altezza dell'elemento sull'altezza del viewport con il pulsante ' schermo H ' classe. Gli angoli del contenitore sono arrotondati.
- IL ' bg-{colore}-{numero} La classe ' viene utilizzata per fornire un colore di sfondo al contenitore. IL ' centro-testo La classe ' allinea il contenuto del testo al centro. Lo spessore del carattere per il testo è impostato su ' grassetto ', e la dimensione del carattere è ' 2xl ”.
- Successivamente, un elenco non ordinato “< ul >' viene creato con caratteri di grandi dimensioni e un ' 48px ' margin-top utilizzando la classe tailwind 'spazio-y'.
- Quindi, vengono create quattro voci dell'elenco utilizzando il comando '< Quello >' tag.
- Un altro ' div L'elemento ' viene creato con un riempimento dall'alto in basso di 32 px e un riempimento iniziale in linea di 20 px utilizzando l'elemento ' py” e “ps ' classi.
L'output per il codice sopra spiegato è il seguente:
Dall'output precedente, è chiaro che la barra laterale del dashboard ha l'altezza del viewport dello schermo. Questo è tutto lo scopo del “ schermo H ' lezione in Tailwind.
Conclusione
IL ' schermo h ' in Tailwind viene utilizzata per assegnare l'altezza del Viewport a un elemento, ovvero l'altezza dello schermo del client. Usando il ' schermo H ', l'elemento erediterà automaticamente l'altezza dello schermo. Per utilizzare l'altezza della visualizzazione in Tailwind, il ' schermo H La proprietà ' deve essere passata come valore per ' classe ” attributo come “< div class= “h-schermo '>'. Questo articolo ha fornito la procedura per utilizzare il “ schermo H ' lezione in Tailwind.