„ h ekranas “ Tailwind klasė naudojama peržiūros srities aukščiui priskirti HTML elementui. Peržiūros sritis yra tik kitas kliento ekrano dydžio pavadinimas. Kūrėjas gali lengvai pasirinkti visą peržiūros sritį, naudodamas šį ' h ekranas “ klasę ir atitinkamai pritaikykite kelias Tailwind klases.
Šiame straipsnyje bus pateikta procedūra, kaip pridėti peržiūros srities aukštį prie elemento „Tailwind“ naudojant „ h ekranas ' klasė.
Kaip nustatyti elemento peržiūros aukštį naudojant „h-screen“ klasę „Tailwind“?
Jei elementui priskiriamas peržiūros srities aukštis naudojant „ h ekranas “ klasėje, jis automatiškai pakoreguos savo aukščio savybę pagal kliento ekraną. Jei norite naudoti peržiūros srities aukštį tailwind režimu, laikykitės toliau pateiktos taisyklės:
< div klasė = 'h ekranas' > Sveiki < / div >
Iš aukščiau pateiktos demonstracijos aišku, kad „ h ekranas “ yra naudojamas elemento klasės atribute kartu su įvairiomis kitomis Tailwind klasėmis maketui kurti.
Sukurkime fiktyvų prietaisų skydelį ir prietaisų skydelio ekrano šoninei juostai suteiksime peržiūros srities aukštį.
< 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' > Prietaisų skydelis
< ul klasė = 'text-lg py-8 space-y-7' >
< kad >Komanda< / kad >
< kad >Projektai< / kad >
< kad >Ataskaitos< / kad >
< kad >Dokumentai< / kad >
< / ul >
< / div >
< div klasė = 'text-center text-3xl py-8 ps-5' >Sveiki atvykę į prietaisų skydelį!< / div >
< / div >
Kodo paaiškinimas:
- Pirma, „ div sukuriamas elementas, kurio klasė yra lankstus “, ši klasė sulygiuoja esančius elementus horizontalia linija.
- Tada sukurkite kitą ' div “ su 8 piks. viršuje ir apačioje, naudojant „ py-2 “ klasę ir paskirkite jai fiksuotą plotį naudodami „ w-56 ' klasė. Tada nustatykite elemento aukštį į peržiūros srities aukštį naudodami „ h ekranas ' klasė. Talpyklos kampai suapvalinti.
- „ bg-{color}-{number} “ klasė naudojama konteinerio fono spalvai suteikti. „ teksto centras “ klasė sulygiuoja teksto turinį į centrą. Teksto šrifto svoris nustatytas į ' drąsus “, o šrifto dydis yra „ 2xl “.
- Toliau pateikiamas netvarkingas sąrašas „< ul >“ sukurtas naudojant didelį šrifto dydį ir „ 48 pikseliai “ margin-top naudojant “space-y” galinio vėjo klasę.
- Tada keturi sąrašo elementai sukuriami naudojant „< kad >“ žymas.
- Kitas ' div “ elementas sukuriamas su 32 piks. viršuje ir apačioje ir 20 pikselių eilutinio pradžios užpildu naudojant “ py“ ir „ps “ klases.
Aukščiau paaiškinto kodo išvestis yra tokia:
Iš aukščiau pateiktos išvesties aišku, kad prietaisų skydelio šoninė juosta turi ekrano peržiūros srities aukštį. Tai viskas apie „ h ekranas “ klasėje Tailwind.
Išvada
„ h ekranas “ klasė „Tailwind“ naudojama norint priskirti elemento „Viewport“ aukštį, t. y. kliento ekrano aukštį. Naudojant ' h ekranas “, elementas automatiškai paveldės ekrano aukštį. Jei norite naudoti peržiūros srities aukštį tailwind, „ h ekranas nuosavybė turi būti perduota kaip vertė klasė “ atributas, pvz., „< div class = „h ekranas ”>”. Šiame straipsnyje pateikta procedūra, kaip naudoti „ h ekranas “ klasėje Tailwind.