Šiame straipsnyje bus parodytos priemonės, kurios gali būti naudojamos norint valdyti išdėstytų elementų išdėstymą tinklalapyje.
Tailwind Utilities, naudojamos kontroliuojant išdėstytų elementų išdėstymą?
Tailwind CSS programa, kuri konkrečiai susijusi su išdėstytų elementų išdėstymu tiek horizontalioje, tiek vertikalioje ašyje, yra ' Į viršų | Teisingai | Apačia | Kairė “. Kaip ir kitose komunalinėse programose, joje taip pat yra įvairių klasių, kurios gali nustatyti išdėstytą elementą įvairiose vietose, kai kurios iš šių klasių nurodytos žemiau:
- inset-{placementValue}
- pradžia-{placementValue}
- viršuje-{placementValue}
- end-{placementValue}
- apačioje-{placementValue}
- left-{placementValue}
- dešinė-{placementValue}
Dabar pateiksime praktinį pavyzdį, kaip geriau suprasti kai kurias iš šių klasių.
Pavyzdys: Padėties elemento išdėstymas naudojant Tailwind CSS Utilities
Šiame pavyzdyje aukščiau aprašyta priemonė bus naudojama išdėstytam elementui įdėti į skirtingas tinklalapio vietas, kaip parodyta toliau:
< kūnas klasė = 'grid grid-cols-3' >
< div klasė = 'santykinis h-32 w-32 bg-orange-200 p-4 m-4 text-center justify-stretch apvalintas' >
< div klasė = 'absoliutus kairysis-0 viršus-0 h-16 w-16 bg-blue-400 suapvalintas p-4' > 1 punktas < / div >
< / div >
< div klasė = 'santykinis h-32 w-32 bg-orange-200 p-4 m-4 text-center justify-stretch apvalintas' >
< div klasė = 'absoliutus inset-x-0 top-0 h-16 bg-blue-400 suapvalintas p-4' > 2 punktas < / div >
< / div >
< div klasė = 'santykinis h-32 w-32 bg-orange-200 p-4 m-4 text-center justify-stretch apvalintas' >
< div klasė = 'absoliutus inset-0 bg-blue-400 suapvalintas p-4' > 3 punktas < / div >
< / div >
< div klasė = 'santykinis h-32 w-32 bg-orange-200 p-4 m-4 text-center justify-stretch apvalintas' >
< div klasė = 'absoliutus inset-y-0 right-0 w-16 bg-blue-400 suapvalintas p-4' > 4 punktas < / div >
< / div >
< div klasė = 'santykinis h-32 w-32 bg-orange-200 p-4 m-4 text-center justify-stretch apvalintas' >
< div klasė = 'absoliutus apačia-0 dešinė-0 h-16 w-16 bg-blue-400 suapvalinta p-4' > 5 punktas < / div >
< / div >
< / kūnas >
Aukščiau pateikto kodo aprašymas:
- Pirmiausia sukurkite penkis tėvus “ div “ elementus ir pritaikykite įvairias Tailwind CSS klases, kad nustatytumėte santykinę padėtį, aukštį, plotį, foną, užpildymą, paraštę ir pan.
- Tada sukurkite įdėtą „ div “ elementas kiekvieno pirminio „div“ viduje. Šio įdėto „div“ elemento paskirties vieta bus atlikta.
- Tada taikykite užpakalinio vėjo CSS klases „ absoliutus “, „ h “, „ Į “, „ bg “, “ p “ ir „ suapvalinti ', kad stilizuotų įdėtą' div “ elementas.
- Po to, pradedant nuo įdėto div iki penkių, priskirkite naujas klases kairėje-0 viršuje-0 “, „ įdėklas-x-0 “, „ intarpas-0 “, „ įdėklas-y-0 dešinysis-0 “ ir „ apačioje-0 dešinėje-0 “ atitinkamai.
- Šios klasės nustato įdėtųjų div elementų padėtį viršutiniame kairiajame kampe, uždengia viršutinę padėtį, apima visą pirminę erdvę, uždengia dešinę pusę ir atitinkamai apačią kairę.
Po vykdymo div elementų peržiūra atrodo taip:
Išvestis rodo, kad išdėstyti elementai yra išdėstyti norimose vietose.
Išvada
„ Į viršų | Teisingai | Apačia | Kairė ” Tailwind programa naudojama elementų išdėstymui tinklalapyje valdyti. Kiekvienai pozicijai taikyti naudojamos kelios klasės ir tada perkelia pasirinktą elementą į tą vietą pagal reikalavimus. Šiose klasėse išdėstyti elementai daugiausia dedami kairėje, dešinėje, apačioje ir viršuje. Jie gali padėti aprėpti visą plotą, aprėpti konkrečias kryptis, pvz., kairėn arba viršuje, ir pan. Šiame straipsnyje sėkmingai paaiškintos komunalinės paslaugos, kurios gali būti naudojamos kontroliuojant išdėstytų elementų išdėstymą.