„ h-ecran ” clasa din Tailwind este folosită pentru a atribui înălțimea ferestrei de vizualizare unui element HTML. Viewport este doar un alt nume pentru dimensiunea ecranului unui client. Dezvoltatorul poate selecta cu ușurință întreaga fereastră de vizualizare cu ajutorul acestui „ h-ecran ” și apoi aplicați mai multe clase Tailwind în mod corespunzător.
Acest articol va oferi procedura pentru adăugarea înălțimii ferestrei de vizualizare la un element din Tailwind folosind „ h-ecran ” clasa.
Cum să setați înălțimea unei ferestre de vizualizare a unui element utilizând clasa „h-screen” în Tailwind?
Dacă unui element i se atribuie înălțimea ferestrei de vizualizare folosind butonul „ h-ecran ”, își va ajusta automat proprietatea înălțimii în funcție de ecranul clientului. Pentru a utiliza înălțimea ferestrei de vizualizare în Tailwind, urmați convenția furnizată mai jos:
< div clasă = „ecran h” > Buna ziua < / div >
Din demonstrația de mai sus, este clar că „ h-ecran ” este folosit în atributul de clasă al elementului împreună cu diverse alte clase Tailwind pentru proiectarea aspectului.
Să creăm un tablou de bord simulat și să dăm o înălțime a ferestrei de vizualizare barei laterale a ecranului tabloului de bord.
< div clasă = 'contracta' >
< div clasă = „W-56 h-ecran rotunjit-lg bg-albastru-600 text-centr text-cyan-50 py-6 text-2xl font-bold” >Tabloul de bord
< ul clasă = „text-lg py-8 space-y-7” >
< acea >Echipă< / acea >
< acea >Proiecte< / acea >
< acea >Rapoarte< / acea >
< acea >Documente< / acea >
< / ul >
< / div >
< div clasă = „text-center text-3xl py-8 ps-5” >Bine ați venit la Tabloul de bord!< / div >
< / div >
Explicația codului:
- În primul rând, un „ div ” elementul este creat având clasa “ contracta ”, această clasă aliniază elementele rezidente într-o linie orizontală.
- Apoi, creați un alt „ div ” cu 8 px de umplutură de sus și de jos folosind „ py-2 ” și alocați-i o lățime fixă folosind „ w-56 ” clasa. Apoi, setați înălțimea elementului la înălțimea ferestrei de vizualizare cu „ h-ecran ” clasa. Colțurile recipientului sunt setate la rotunjite.
- „ bg-{culoare}-{număr} ” este folosită pentru a oferi o culoare de fundal containerului. „ centru de text ” clasa aliniază conținutul textului la centru. Greutatea fontului pentru text este setată la „ îndrăzneţ ”, iar dimensiunea fontului este „ 2xl ”.
- În continuare, o listă neordonată „< ul >” este creat cu o dimensiune mare a fontului și un „ 48px ” margin-top folosind clasa de vânt din spate „spațiu-y”.
- Apoi, patru elemente de listă sunt create folosind „< acea >” etichete.
- O alta ' div elementul ” este creat cu umplutură de 32 px sus-jos și 20 px cu pornire în linie, folosind „ py” și „ps ' clase.
Ieșirea pentru codul explicat mai sus este după cum urmează:
Din rezultatul de mai sus, este clar că bara laterală a tabloului de bord are înălțimea ferestrei de vizualizare a ecranului. Acesta este totul despre scopul „ h-ecran ” clasă în Tailwind.
Concluzie
„ h-ecran Clasa ” din Tailwind este folosită pentru a atribui înălțimea Viewport unui element, adică înălțimea ecranului clientului. Folosind „ h-ecran ”, elementul va moșteni automat înălțimea ecranului. Pentru a utiliza înălțimea ferestrei în Tailwind, „ h-ecran „Proprietatea” trebuie să fie transmisă ca valoare pentru „ clasă ” atribut ca „< div class= „h-screen ”>”. Acest articol a furnizat procedura de utilizare a „ h-ecran ” clasă în Tailwind.