Ez a cikk bemutatja azokat a segédprogramokat, amelyek segítségével szabályozható az elhelyezett elemek elhelyezése a weboldalon.
Tailwind segédprogramok az elhelyezett elemek elhelyezésének szabályozására?
A Tailwind CSS segédprogram, amely kifejezetten az elhelyezett elemek vízszintes vagy függőleges tengelyen történő elhelyezésével foglalkozik, a „ Top | Jobbra | Alul | Bal ”. Csakúgy, mint más segédprogramok, különféle osztályokat is biztosít, amelyek különböző helyeken állíthatják be a pozícionált elemet, ezek közül néhány az alábbiakban található:
- inset-{placementValue}
- start-{placementValue}
- top-{placementValue}
- end-{placementValue}
- alsó-{placementValue}
- bal-{placementValue}
- jobb-{placementValue}
Most nézzünk egy gyakorlati példát ezen osztályok használatára a jobb megértés érdekében.
Példa: Pozicionált elem elhelyezése Tailwind CSS segédprogramokkal
Ebben a példában a fent leírt segédprogramot fogjuk használni arra, hogy a pozicionált elemet különböző helyekre helyezzük el a weboldalon, az alábbiak szerint:
< test osztály = 'grid grid-cols-3' >
< div osztály = 'relatív h-32 w-32 bg-orange-200 p-4 m-4 text-center justify-stretch rounded' >
< div osztály = 'abszolút bal-0 felső-0 h-16 w-16 bg-blue-400 kerekített p-4' > 1. tétel < / div >
< / div >
< div osztály = 'relatív h-32 w-32 bg-orange-200 p-4 m-4 text-center justify-stretch rounded' >
< div osztály = 'absolute inset-x-0 top-0 h-16 bg-blue-400 rounded p-4' > 2. tétel < / div >
< / div >
< div osztály = 'relatív h-32 w-32 bg-orange-200 p-4 m-4 text-center justify-stretch rounded' >
< div osztály = 'absolute inset-0 bg-blue-400 rounded p-4' > 3. tétel < / div >
< / div >
< div osztály = 'relatív h-32 w-32 bg-orange-200 p-4 m-4 text-center justify-stretch rounded' >
< div osztály = 'absolute inset-y-0 right-0 w-16 bg-blue-400 rounded p-4' > 4. tétel < / div >
< / div >
< div osztály = 'relatív h-32 w-32 bg-orange-200 p-4 m-4 text-center justify-stretch rounded' >
< div osztály = 'abszolút alsó-0 jobb-0 h-16 w-16 bg-blue-400 kerekített p-4' > 5. tétel < / div >
< / div >
< / test >
A fenti kód leírása:
- Először hozzon létre öt szülőt ' div ” elemeket, és alkalmazzon különféle Tailwind CSS-osztályokat a relatív pozíció, magasság, szélesség, háttér, kitöltés, margó stb. beállításához.
- Ezután hozzon létre egy beágyazott ' div ” elem minden szülő „div” belsejében. Az elhelyezés erre a beágyazott „div” elemre történik.
- Ezután alkalmazza a hátszél CSS-osztályait abszolút ”, „ h ”, „ Ban ben ”, „ bg ', ' p ”, és „ lekerekített ' a beágyazott stílushoz ' div ” elemet.
- Ezt követően, a beágyazott div 1-től az ötösig, rendeljen hozzá új osztályokat a ' bal-0 top-0 ”, „ inset-x-0 ”, „ betét-0 ”, „ inset-y-0 jobb-0 ”, és „ alsó-0 jobb-0 ” ill.
- Ezek az osztályok a beágyazott div elemek helyzetét a bal felső sarokban állítják be, lefedik a felső pozíciót, lefedik a teljes szülőteret, lefedik a jobb oldalt, illetve lefedik a bal alsó pozíciót.
A végrehajtás után a div elemek előnézete így néz ki:
A kimenet azt mutatja, hogy az elhelyezett elemek a kívánt pozíciókban vannak elhelyezve.
Következtetés
A ' Top | Jobbra | Alul | Bal ” A Tailwind segédprogram az elemek weboldal feletti elhelyezésének szabályozására szolgál. Több osztályt használ az egyes pozíciók megcélzására, majd a kiválasztott elemet az adott helyen mozgatja a követelményeknek megfelelően. Ezek az osztályok főleg balra, jobbra, alul és felül helyezik el az elhelyezett elemeket. Segíthetnek a teljes terület lefedésében, meghatározott irányok lefedésében, például balra vagy felül, és így tovább. Ez a cikk sikeresen elmagyarázta azokat a segédprogramokat, amelyekkel a pozicionált elemek elhelyezése vezérelhető.