' h ekrāns ” klase programmā Tailwind tiek izmantota, lai HTML elementam piešķirtu skatvietas augstumu. Viewport ir tikai vēl viens klienta ekrāna izmēra nosaukums. Izstrādātājs var viegli atlasīt visu skata logu, izmantojot šo ' h ekrāns ” klasē un pēc tam attiecīgi pielietot vairākas Tailwind klases.
Šajā rakstā tiks sniegta procedūra skata loga augstuma pievienošanai Tailwind elementam, izmantojot “ h ekrāns ” klase.
Kā iestatīt elementa skata loga augstumu, izmantojot “h-screen” klasi aizmugurējā vējā?
Ja elementam ir piešķirts skata loga augstums, izmantojot “ h ekrāns ” klasē, tas automātiski pielāgos savu augstuma īpašību atbilstoši klienta ekrānam. Lai izmantotu skata loga augstumu aizmugurējā vējā, ievērojiet tālāk norādīto vienošanos.
< div klasē = 'h-screen' > Sveiki < / div >
No iepriekš minētās demonstrācijas ir skaidrs, ka “ h ekrāns ” tiek izmantots elementa klases atribūtā kopā ar dažādām citām Tailwind klasēm izkārtojuma noformēšanai.
Izveidosim fiktīvu informācijas paneli un informācijas paneļa ekrāna sānjoslai piešķirsim skatu punkta augstumu.
< div klasē = 'flex' >
< div klasē = 'w-56 h-screen rounded-lg bg-blue-600 text-center text-cyan-50 py-6 text-2xl font-bold' > Informācijas panelis
< ul klasē = 'text-lg py-8 space-y-7' >
< ka >Komanda< / ka >
< ka >Projekti< / ka >
< ka >Pārskati< / ka >
< ka >Dokumenti< / ka >
< / ul >
< / div >
< div klasē = 'text-center text-3xl py-8 ps-5' >Laipni lūdzam informācijas panelī!< / div >
< / div >
Koda skaidrojums:
- Pirmkārt, ' div 'elements ir izveidots ar klasi ' flex ”, šī klase izlīdzina esošos vienumus horizontālā līnijā.
- Pēc tam izveidojiet citu ' div ” ar 8 pikseļu augšējo un apakšējo polsterējumu, izmantojot “ py-2 ” klase un piešķir tai fiksētu platumu, izmantojot “ w-56 ” klase. Pēc tam iestatiet elementa augstumu uz skata loga augstumu ar ' h ekrāns ” klase. Tvertnes stūri ir noapaļoti.
- ' bg-{color}-{number} ” klase tiek izmantota, lai konteineram nodrošinātu fona krāsu. ' teksta centrs ” klase pielīdzina teksta saturu centrā. Teksta fonta svars ir iestatīts uz ' treknrakstā ”, un fonta lielums ir “ 2xl ”.
- Tālāk tiek parādīts nesakārtots saraksts “< ul >” ir izveidots ar lielu fonta izmēru un “ 48 pikseļi ” margin-top, izmantojot “space-y” pakavēja klasi.
- Pēc tam tiek izveidoti četri saraksta vienumi, izmantojot “< ka >” atzīmes.
- Vēl viens ' div ” elements ir izveidots ar 32 pikseļu augšējo apakšējo un 20 pikseļu iekļauto sākuma polsterējumu, izmantojot “ py” un “ps ' klases.
Iepriekš izskaidrotā koda izvade ir šāda:
No iepriekš minētās izvades ir skaidrs, ka informācijas paneļa sānjoslai ir ekrāna skata loga augstums. Tas viss attiecas uz ' h ekrāns ” klasē Tailwind.
Secinājums
' h ekrāns ” klase programmā Tailwind tiek izmantota, lai elementam piešķirtu Viewport augstumu, t.i., klienta ekrāna augstumu. Izmantojot ' h ekrāns ” klasē, elements automātiski pārmantos ekrāna augstumu. Lai izmantotu skata loga augstumu aizmugurējā vējā, “ h ekrāns 'īpašums ir jānodod kā vērtība ' klasē ” atribūts, piemēram, “< div class= “h-screen ”>”. Šajā rakstā ir sniegta procedūra “ h ekrāns ” klasē Tailwind.