Tässä artikkelissa esitellään apuohjelmat, joilla voidaan ohjata sijoitettujen elementtien sijoittamista verkkosivulle.
Tailwind Utilities käytetään ohjaamaan sijoitettujen elementtien sijoittamista?
Tailwind CSS -apuohjelma, joka käsittelee erityisesti sijoitettujen elementtien sijoittamista sekä vaaka- että pystyakselille, on ' Yläosa | Oikea | Pohja | Vasen ”. Kuten muutkin apuohjelmat, se tarjoaa myös erilaisia luokkia, jotka voivat asettaa sijoitetun elementin eri paikkoihin. Jotkut näistä luokista on esitetty alla:
- inset-{placementValue}
- aloitus-{placementValue}
- ylä-{placementValue}
- end-{placementValue}
- pohja-{placementValue}
- vasen-{placementValue}
- oikea-{placementValue}
Otetaan nyt käytännön esimerkki joidenkin näistä luokista ymmärtämisen parantamiseksi.
Esimerkki: Sijoitetun elementin sijoittaminen Tailwind CSS -apuohjelmilla
Tässä esimerkissä yllä kuvattua apuohjelmaa käytetään sijoittamaan sijoitettu elementti eri paikkoihin verkkosivulla, kuten alla on esitetty:
< kehon luokkaa = 'grid grid-cols-3' >
< div luokkaa = 'suhteellinen h-32 w-32 bg-oranssi-200 p-4 m-4 teksti-keskus tasaa-venytys pyöristetty' >
< div luokkaa = 'absoluuttinen vasen-0 top-0 h-16 w-16 bg-blue-400 pyöristetty p-4' > Kohde 1 < / div >
< / div >
< div luokkaa = 'suhteellinen h-32 w-32 bg-oranssi-200 p-4 m-4 teksti-keskus tasaa-venytys pyöristetty' >
< div luokkaa = 'absolute inset-x-0 top-0 h-16 bg-blue-400 rounded p-4' > Kohde 2 < / div >
< / div >
< div luokkaa = 'suhteellinen h-32 w-32 bg-oranssi-200 p-4 m-4 teksti-keskus tasaa-venytys pyöristetty' >
< div luokkaa = 'absolute inset-0 bg-blue-400 pyöristetty p-4' > Kohde 3 < / div >
< / div >
< div luokkaa = 'suhteellinen h-32 w-32 bg-oranssi-200 p-4 m-4 teksti-keskus tasaa-venytys pyöristetty' >
< div luokkaa = 'absolute inset-y-0 right-0 w-16 bg-blue-400 rounded p-4' > Kohde 4 < / div >
< / div >
< div luokkaa = 'suhteellinen h-32 w-32 bg-oranssi-200 p-4 m-4 teksti-keskus tasaa-venytys pyöristetty' >
< div luokkaa = 'absoluuttinen alaosa-0 oikea-0 h-16 w-16 bg-blue-400 pyöristetty p-4' > Kohde 5 < / div >
< / div >
< / kehon >
Kuvaus yllä olevasta koodista:
- Luo ensin viisi vanhempia ' div ”-elementtejä ja käyttää erilaisia Tailwind CSS -luokkia suhteellisen sijainnin, korkeuden, leveyden, taustan, täyteyksen, marginaalin ja niin edelleen määrittämiseen.
- Luo seuraavaksi sisäkkäinen ' div ”-elementti kunkin ylätason ”div” sisällä. Sijoitus tehdään tälle sisäkkäiselle 'div'-elementille.
- Käytä sitten myötätuulen CSS-luokkia ' ehdoton ”, “ h ”, “ Sisään ”, “ bg ”,” s ”, ja ” pyöristetty ' tyylittää sisäkkäisiä ' div ”elementtiä.
- Sen jälkeen, alkaen sisäkkäisestä div:stä viiteen, määritä uudet luokat ' vasen-0 top-0 ”, “ inset-x-0 ”, “ inset-0 ”, “ inset-y-0 oikea-0 ”, ja ” ala-0 oikea-0 ' vastaavasti.
- Nämä luokat asettavat sisäkkäisten div-elementtien sijainnin vasempaan yläkulmaan, peittävät yläasennon, kattavat koko ylätason, peittävät oikean puolen ja peittävät vastaavasti vasemman alakulman.
Suorituksen jälkeen div-elementtien esikatselu näyttää tältä:
Tulos osoittaa, että sijoitetut elementit on sijoitettu haluttuihin paikkoihin.
Johtopäätös
' Yläosa | Oikea | Pohja | Vasen ” Tailwind-apuohjelmalla ohjataan elementtien sijoittamista verkkosivulle. Se käyttää useita luokkia kohdistaakseen kuhunkin sijaintiin ja siirtää sitten valitun elementin kyseiseen paikkaan vaatimusten mukaisesti. Nämä luokat sijoittavat sijoitetut elementit pääasiassa vasemmalle, oikealle, ala- ja yläpuolelle. Ne voivat auttaa peittämään koko alueen, kattamaan tietyt suunnat, kuten vasemmalle tai ylhäältä, ja niin edelleen. Tässä artikkelissa on selitetty onnistuneesti apuohjelmat, joita voidaan käyttää sijoitettujen elementtien sijoittelun ohjaamiseen.