Ipapakita ng artikulong ito ang mga utility na maaaring magamit para sa pagkontrol sa paglalagay ng mga nakaposisyong elemento sa web page.
Mga Utility ng Tailwind na Ginamit upang Kontrolin ang Paglalagay ng mga Nakaposisyong Elemento?
Ang Tailwind CSS utility na partikular na tumatalakay sa paglalagay ng mga nakaposisyong elemento sa parehong pahalang o patayong axis ay “ Nangungunang | Kanan | Ibaba | Kaliwa ”. Tulad ng ibang mga utility, nagbibigay din ito ng iba't ibang klase na maaaring magtakda ng nakaposisyon na elemento sa iba't ibang lugar, ang ilan sa mga klase na ito ay nakasaad sa ibaba:
- inset-{placementValue}
- simula-{placementValue}
- top-{placementValue}
- end-{placementValue}
- ibaba-{placementValue}
- kaliwa-{placementValue}
- kanan-{placementValue}
Ngayon, magkaroon tayo ng praktikal na halimbawa para magamit ang ilan sa mga klase na ito para sa mas mahusay na pag-unawa.
Halimbawa: Paglalagay ng Nakaposisyong Elemento Gamit ang Tailwind CSS Utilities
Sa halimbawang ito, ang utility na inilarawan sa itaas ay gagamitin upang ilagay ang nakaposisyon na elemento sa iba't ibang lugar sa isang web page, tulad ng ipinapakita sa ibaba:
< katawan klase = 'grid grid-cols-3' >
< div klase = 'relative h-32 w-32 bg-orange-200 p-4 m-4 text-center justify-stretch rounded' >
< div klase = 'absolute left-0 top-0 h-16 w-16 bg-blue-400 rounded p-4' > aytem 1 < / div >
< / div >
< div klase = 'relative h-32 w-32 bg-orange-200 p-4 m-4 text-center justify-stretch rounded' >
< div klase = 'absolute inset-x-0 top-0 h-16 bg-blue-400 rounded p-4' > aytem 2 < / div >
< / div >
< div klase = 'relative h-32 w-32 bg-orange-200 p-4 m-4 text-center justify-stretch rounded' >
< div klase = 'absolute inset-0 bg-blue-400 rounded p-4' > aytem 3 < / div >
< / div >
< div klase = 'relative h-32 w-32 bg-orange-200 p-4 m-4 text-center justify-stretch rounded' >
< div klase = 'absolute inset-y-0 right-0 w-16 bg-blue-400 rounded p-4' > aytem 4 < / div >
< / div >
< div klase = 'relative h-32 w-32 bg-orange-200 p-4 m-4 text-center justify-stretch rounded' >
< div klase = 'absolute bottom-0 right-0 h-16 w-16 bg-blue-400 rounded p-4' > aytem 5 < / div >
< / div >
< / katawan >
Paglalarawan ng code sa itaas:
- Una, lumikha ng limang magulang ' div ” mga elemento at maglapat ng iba't ibang klase ng Tailwind CSS upang itakda ang relatibong posisyon, taas, lapad, background, padding, margin, at iba pa.
- Susunod, gumawa ng nested ' div ” elemento sa loob ng bawat magulang na “div”. Gagawin ang placement para sa nested na 'div' na elementong ito.
- Pagkatapos, ilapat ang tailwind CSS classes ng “ ganap ”, “ h ”, “ Sa ”, “ bg ”, ” p ”, at “ bilugan 'para i-istilo ang nested' div ' elemento.
- Pagkatapos nito, simula sa nested div isa hanggang lima, magtalaga ng mga bagong klase ng ' left-0 top-0 ”, “ inset-x-0 ”, “ inset-0 ”, “ inset-y-0 right-0 ”, at “ ibaba-0 kanan-0 ” ayon sa pagkakabanggit.
- Itinatakda ng mga klaseng ito ang posisyon ng mga nested na elemento ng div sa kaliwang sulok sa itaas, takpan ang posisyon sa itaas, takpan ang buong espasyo ng magulang, takpan ang kanang bahagi, at takpan ang ibabang kaliwang posisyon ayon sa pagkakabanggit.
Pagkatapos ng pagpapatupad, ang preview ng mga elemento ng div ay ganito ang hitsura:
Ang output ay nagpapakita na ang mga nakaposisyon na elemento ay inilalagay sa nais na mga posisyon.
Konklusyon
Ang ' Nangungunang | Kanan | Ibaba | Kaliwa ” Ginagamit ang Tailwind utility para kontrolin ang paglalagay ng mga elemento sa webpage. Gumagamit ito ng ilang klase upang i-target ang bawat posisyon at pagkatapos ay ilipat ang napiling elemento sa lugar na iyon ayon sa mga kinakailangan. Pangunahing inilalagay ng mga klaseng ito ang mga nakaposisyong elemento sa kaliwa, kanan, ibaba, at itaas. Makakatulong sila upang masakop ang buong lugar, masakop ang mga partikular na direksyon tulad ng kaliwa o itaas, at iba pa. Matagumpay na naipaliwanag ng artikulong ito ang mga utility na maaaring magamit para sa pagkontrol sa paglalagay ng mga nakaposisyong elemento.