Okomito i vodoravno pomicanje načini su kretanja web stranicom pomoću miša, dodirne podloge ili prsta. Okomito pomicanje se koristi kada sadržaj elementa premašuje visinu spremnika. Dok se horizontalno pomicanje koristi kada sadržaj unutar elementa premašuje širinu spremnika. Okomito pomicanje omogućuje korisnicima pomicanje web-stranice gore-dolje, dok vodoravno pomicanje omogućuje pomicanje stranice lijevo-desno. Tailwind CSS pruža uslužne klase za omogućavanje okomitog i vodoravnog pomicanja na web stranicama.
Ovaj članak će ilustrirati sljedeće:
- Kako omogućiti okomito pomicanje u vjetru u leđa?
- Kako omogućiti horizontalno pomicanje u Tailwindu?
Kako omogućiti okomito pomicanje u vjetru u leđa?
Da biste omogućili okomito pomicanje u Tailwindu, koristite ' overflow-y-scroll ” uslužna klasa sa željenim elementom u HTML programu. Omogućuje okomito pomicanje i uvijek prikazuje trake za pomicanje osim ako korisnik nije onemogućio 'uvijek vidljive' trake za pomicanje u svojim postavkama sustava.
Sintaksa
< element razreda = 'overflow-y-scroll ...' > ... element >
Primjer: Omogućivanje okomitog pomicanja
U ovom primjeru stvorit ćemo fleksibilni spremnik s nekim fleksibilnim stavkama u stupcu i primijeniti ' overflow-y-scroll ” korisnost za to:
< tijelo >
< div razreda = 'flex flex-col overflow-y-scroll bg-purple-700 p-4 mx-14 mt-5 h-36' >
< div razreda = 'bg-žuta-400 p-2 m-2' > 1 div >
< div razreda = 'bg-žuta-400 p-2 m-2' > 2 div >
< div razreda = 'bg-žuta-400 p-2 m-2' > 3 div >
< div razreda = 'bg-žuta-400 p-2 m-2' > 4 div >
< div razreda = 'bg-žuta-400 p-2 m-2' > 5 div >
< div razreda = 'bg-žuta-400 p-2 m-2' > 6 div >
div >
tijelo >
Ovdje, u nadređenom
- “ savijati ” klasa se koristi za prilagodbu veličina podređenog elementa na temelju dostupnog prostora stvaranjem fleksibilnog izgleda.
- “ savitljiva boja ” klasa postavlja smjer savijanja spremnika na stupac.
- “ overflow-y-scroll ” klasa omogućuje okomito pomicanje.
- “ bg-ljubičasta-700 ” klasa postavlja ljubičastu boju na pozadinu spremnika.
- “ p-4 ” klasa postavlja 4 jedinice obloge na svim stranama spremnika.
- “ mx-14 ” klasa primjenjuje 14 jedinica margine na x-osi spremnika.
- “ mt-5 ” klasa primjenjuje 5 jedinica margine na vrh spremnika.
- “ h-36 ” klasa postavlja visinu spremnika na 36 jedinica.
U podređenom
- “ bg-žuta-400 ” klasa postavlja žutu pozadinu stavki mreže.
- “ p-2 ” klasa dodaje 3 jedinice ispune sadržaju unutar flex stavki.
- “ m-2 ” klasa postavlja marginu od 2 jedinice za fleksibilne stavke.
Izlaz
U gornjem izlazu može se vidjeti da je okomito pomicanje uspješno omogućeno.
Kako omogućiti horizontalno pomicanje u Tailwindu?
Da biste omogućili vodoravno pomicanje u Tailwindu, koristite ' overflow-x-scroll ” uslužna klasa s određenim elementom u HTML programu. Omogućuje horizontalno pomicanje i uvijek prikazuje trake za pomicanje osim ako korisnik nije onemogućio 'uvijek vidljive' trake za pomicanje u svojim postavkama sustava.
Sintaksa
< element razreda = 'overflow-x-scroll ...' > ... element >
Primjer: Omogućivanje vodoravnog pomicanja
U ovom primjeru stvorit ćemo fleksibilni spremnik s nekoliko fleksibilnih stavki u nizu i primijeniti ' overflow-x-scroll ” korisnost za to:
< tijelo >< div razreda = 'flex flex-row overflow-x-scroll space-x-24 bg-purple-700 p-4 mx-14 mt-5 h-36' >
< div razreda = 'bg-žuta-400 p-2 m-2' > 1 div >
< div razreda = 'bg-žuta-400 p-2 m-2' > 2 div >
< div razreda = 'bg-žuta-400 p-2 m-2' > 3 div >
< div razreda = 'bg-žuta-400 p-2 m-2' > 4 div >
< div razreda = 'bg-žuta-400 p-2 m-2' > 5 div >
< div razreda = 'bg-žuta-400 p-2 m-2' > 6 div >
div >
tijelo >
Ovdje u nadređenom
Izlaz
Gornji izlaz označava da je vodoravno pomicanje uspješno omogućeno.
Zaključak
Da biste omogućili okomito i vodoravno pomicanje u Tailwindu, ' overflow-y-scroll ' i ' overflow-x-scroll ” koriste se redom klase korisnosti. Ovi se pomoćni programi primjenjuju na željene elemente u HTML programu kako bi omogućili okomito i vodoravno pomicanje i uvijek prikazivali trake za pomicanje. Ovaj članak demonstrira metodu za omogućavanje okomitog i vodoravnog pomicanja u Tailwindu.