Vertikaalne ja horisontaalne kerimine on viisid veebilehel liikumiseks hiire, puuteplaadi või sõrmega. Vertikaalset kerimist kasutatakse siis, kui elemendi sisu ületab mahuti kõrgust. Kui elemendi sisu ületab konteineri laiuse, kasutatakse horisontaalset kerimist. Vertikaalne kerimine võimaldab kasutajatel veebilehte üles ja alla liigutada, horisontaalne kerimine aga vasakule ja paremale. Tailwind CSS pakub utiliidiklasse, mis võimaldavad veebilehtedel vertikaalset ja horisontaalset kerimist.
See artikkel on näide:
Kuidas Tailwindis vertikaalset kerimist lubada?
Vertikaalse kerimise lubamiseks Tailwindis kasutage nuppu ületäitumine-y-kerimine ” utiliidiklass soovitud elemendiga HTML-programmis. See võimaldab vertikaalset kerimist ja näitab alati kerimisribasid, välja arvatud juhul, kui kasutaja on oma süsteemiseadetes alati nähtavaid kerimisribasid keelanud.
Süntaks
< element klass = 'overflow-y-scroll ...' > ... element >
Näide: vertikaalse kerimise lubamine
Selles näites loome painduva konteineri, mille veerus on mõned painduvad üksused, ja rakendame ületäitumine-y-kerimine Selle kasulikkus:
< keha >
< div klass = 'flex flex-col overflow-y-scroll bg-purple-700 p-4 mx-14 mt-5 h-36' >
< div klass = 'bg-yellow-400 p-2 m-2' > 1 div >
< div klass = 'bg-yellow-400 p-2 m-2' > 2 div >
< div klass = 'bg-yellow-400 p-2 m-2' > 3 div >
< div klass = 'bg-yellow-400 p-2 m-2' > 4 div >
< div klass = 'bg-yellow-400 p-2 m-2' > 5 div >
< div klass = 'bg-yellow-400 p-2 m-2' > 6 div >
div >
keha >
Siin, vanemas
- “ painduv ” klassi kasutatakse alamelemendi suuruste kohandamiseks olemasoleva ruumi alusel, luues paindliku paigutuse.
- “ flex-col ” klass määrab konteineri paindumissuuna veeruks.
- “ ületäitumine-y-kerimine ” klass võimaldab vertikaalset kerimist.
- “ bg-lilla-700 ” klass määrab konteineri taustale lilla värvi.
- “ p-4 ” klassis on 4 ühikut polsterdust konteineri kõikidel külgedel.
- “ mx-14 ” klass rakendab konteineri x-teljel 14 varuühikut.
- “ mt-5 ” klass rakendab 5 ühikut varu mahuti ülaosale.
- “ h-36 ” klass määrab konteineri kõrguseks 36 ühikut.
Lapses
- “ bg-kollane-400 ” klass määrab ruudustiku elementide tausta kollaseks.
- “ p-2 ” klass lisab painduvate üksuste sisule 3 ühikut polsterdust.
- “ m-2 ” klass määrab painduvate üksuste varu 2 ühikut.
Väljund
Ülaltoodud väljundis on näha, et vertikaalne kerimine on edukalt lubatud.
Kuidas lubada taganttuules horisontaalset kerimist?
Horisontaalse kerimise lubamiseks Tailwindis kasutage nuppu ' ületäitumine-x-kerimine ” utiliidiklass konkreetse elemendiga HTML-programmis. See võimaldab horisontaalset kerimist ja kuvab alati kerimisribasid, välja arvatud juhul, kui kasutaja on oma süsteemiseadetes alati nähtavaid kerimisribasid keelanud.
Süntaks
< element klass = 'overflow-x-scroll ...' > ... element >
Näide: horisontaalse kerimise lubamine
Selles näites loome painduva konteineri, kus on järjest mõned painduvad üksused ja rakendame ületäitumine-x-kerimine Selle kasulikkus:
< keha >< div klass = 'flex flex-row overflow-x-scroll space-x-24 bg-purple-700 p-4 mx-14 mt-5 h-36' >
< div klass = 'bg-yellow-400 p-2 m-2' > 1 div >
< div klass = 'bg-yellow-400 p-2 m-2' > 2 div >
< div klass = 'bg-yellow-400 p-2 m-2' > 3 div >
< div klass = 'bg-yellow-400 p-2 m-2' > 4 div >
< div klass = 'bg-yellow-400 p-2 m-2' > 5 div >
< div klass = 'bg-yellow-400 p-2 m-2' > 6 div >
div >
keha >
Siin vanemas
Väljund
Ülaltoodud väljund näitab, et horisontaalne kerimine on edukalt lubatud.
Järeldus
Vertikaalse ja horisontaalse kerimise lubamiseks Tailwindis, ületäitumine-y-kerimine ” ja „ ületäitumine-x-kerimine ” kasutatakse vastavalt kasuliku klassi. Neid utiliite rakendatakse HTML-programmis soovitud elementidele, et võimaldada vertikaalset ja horisontaalset kerimist ning kuvada alati kerimisribasid. See artikkel on demonstreerinud meetodit vertikaalse ja horisontaalse kerimise võimaldamiseks Tailwindis.