Ovaj članak će pokazati pomoćne programe koji se mogu koristiti za kontrolu postavljanja pozicioniranih elemenata na web stranici.
Tailwind pomoćni programi koji se koriste za kontrolu postavljanja pozicioniranih elemenata?
Uslužni program Tailwind CSS koji se posebno bavi postavljanjem pozicioniranih elemenata u vodoravnoj ili okomitoj osi je ' Vrh | desno | Dno | Lijevo ”. Baš kao i drugi uslužni programi, također nudi različite klase koje mogu postaviti pozicionirani element na različita mjesta, neke od tih klasa navedene su u nastavku:
- umetak-{placementValue}
- početak-{placementValue}
- vrh-{placementValue}
- kraj-{placementValue}
- dno-{placementValue}
- lijevo-{placementValue}
- desno-{placementValue}
Sada ćemo imati praktičan primjer za korištenje nekih od ovih klasa za bolje razumijevanje.
Primjer: postavljanje pozicioniranog elementa pomoću Tailwind CSS pomoćnih programa
U ovom primjeru, gore opisani uslužni program će se koristiti za postavljanje pozicioniranog elementa na različita mjesta preko web stranice, kao što je prikazano u nastavku:
< tijelo razreda = 'grid grid-cols-3' >
< div razreda = 'relativno h-32 w-32 bg-narančasta-200 p-4 m-4 tekst-centar poravnati-razvući zaobljeno' >
< div razreda = 'apsolutno lijevo-0 gore-0 h-16 w-16 bg-plavo-400 zaobljeno p-4' > Stavka 1 < / div >
< / div >
< div razreda = 'relativno h-32 w-32 bg-narančasta-200 p-4 m-4 tekst-centar poravnati-razvući zaobljeno' >
< div razreda = 'apsolutni umetak-x-0 vrh-0 h-16 bg-plavi-400 zaobljeni p-4' > Stavka 2 < / div >
< / div >
< div razreda = 'relativno h-32 w-32 bg-narančasta-200 p-4 m-4 tekst-centar poravnati-razvući zaobljeno' >
< div razreda = 'apsolutni umetak-0 bg-plavi-400 zaobljeni p-4' > Stavka 3 < / div >
< / div >
< div razreda = 'relativno h-32 w-32 bg-narančasta-200 p-4 m-4 tekst-centar poravnati-razvući zaobljeno' >
< div razreda = 'apsolutni umetak-y-0 desno-0 w-16 bg-plavo-400 zaobljeno p-4' > Stavka 4 < / div >
< / div >
< div razreda = 'relativno h-32 w-32 bg-narančasta-200 p-4 m-4 tekst-centar poravnati-razvući zaobljeno' >
< div razreda = 'apsolutno dolje-0 desno-0 h-16 w-16 bg-plavo-400 zaobljeno p-4' > Stavka 5 < / div >
< / div >
< / tijelo >
Opis gornjeg koda:
- Prvo, stvorite pet roditelja ' div ” elemente i primijeniti razne Tailwind CSS klase za postavljanje relativnog položaja, visine, širine, pozadine, ispune, margine i tako dalje.
- Zatim stvorite ugniježđeni ' div ” unutar svakog nadređenog „div”. Položaj će se izvršiti za ovaj ugniježđeni 'div' element.
- Zatim primijenite tailwind CSS klase ' apsolutni ”, “ h ”, “ U ”, “ bg ”, ” str ', i ' zaobljena ' za stiliziranje ugniježđenog ' div ” element.
- Nakon toga, počevši od ugniježđenog diva jedan do pet, dodijelite nove klase ' lijevo-0 gore-0 ”, “ umetak-x-0 ”, “ umetak-0 ”, “ umetak-y-0 desno-0 ', i ' dolje-0 desno-0 ” odnosno.
- Ove klase postavljaju položaj ugniježđenih div elemenata u gornjem lijevom kutu, pokrivaju gornji položaj, pokrivaju cijeli roditeljski prostor, pokrivaju desnu stranu i pokrivaju donji lijevi položaj.
Nakon izvođenja, pregled div elemenata izgleda ovako:
Izlaz pokazuje da su pozicionirani elementi postavljeni na željene pozicije.
Zaključak
' Vrh | desno | Dno | Lijevo ” Uslužni program Tailwind koristi se za kontrolu postavljanja elemenata na web stranicu. Koristi nekoliko klasa za ciljanje svake pozicije, a zatim premješta odabrani element na to mjesto prema zahtjevima. Ove klase uglavnom postavljaju pozicionirane elemente lijevo, desno, dolje i gore. Oni mogu pomoći da se pokrije cijelo područje, pokriju određeni smjerovi poput lijevog ili gornjeg i tako dalje. Ovaj članak je uspješno objasnio pomoćne programe koji se mogu koristiti za kontrolu postavljanja pozicioniranih elemenata.