Vertikal og horisontal rulling er måter å navigere på en nettside ved hjelp av en mus, en pekeplate eller en finger. Vertikal rulling brukes når innholdet i et element overstiger beholderens høyde. Mens horisontal rulling brukes når innholdet i et element overskrider beholderens bredde. Vertikal rulling lar brukere flytte nettsiden opp og ned, mens horisontal rulling lar siden flytte til venstre og høyre. Tailwind CSS tilbyr verktøyklasser for å muliggjøre vertikal og horisontal rulling på nettsider.
Denne artikkelen vil eksemplifisere:
Hvordan aktivere vertikal rulling i medvind?
For å aktivere vertikal rulling i Tailwind, bruk ' overflyt-y-rull ” verktøyklasse med ønsket element i HTML-programmet. Den tillater vertikal rulling og viser alltid rullefeltene med mindre brukeren har deaktivert de 'alltid synlige' rullefeltene i systeminnstillingene.
Syntaks
< element klasse = 'overflyt-y-scroll ...' > ... element >
Eksempel: Aktivering av vertikal rulling
I dette eksemplet vil vi lage en fleksbeholder med noen fleksible elementer i en kolonne og bruke ' overflyt-y-rull ' nytte for det:
< kropp >
< div klasse = 'flex flex-col overflow-y-scroll bg-lilla-700 p-4 mx-14 mt-5 h-36' >
< div klasse = 'bg-yellow-400 p-2 m-2' > 1 div >
< div klasse = 'bg-yellow-400 p-2 m-2' > 2 div >
< div klasse = 'bg-yellow-400 p-2 m-2' > 3 div >
< div klasse = 'bg-yellow-400 p-2 m-2' > 4 div >
< div klasse = 'bg-yellow-400 p-2 m-2' > 5 div >
< div klasse = 'bg-yellow-400 p-2 m-2' > 6 div >
div >
kropp >
Her, i overordnet
- ' bøye seg Klasse brukes til å justere størrelsen på barneelementet på grunnlag av tilgjengelig plass ved å lage en fleksibel layout.
- ' flex-col ”-klassen setter beholderens fleksretning til en kolonne.
- ' overflyt-y-rull ”-klassen muliggjør vertikal rulling.
- ' bg-lilla-700 ”-klassen setter den lilla fargen til beholderens bakgrunn.
- ' s-4 ”-klassen setter 4 enheter med polstring på alle sider av beholderen.
- ' mx-14 ”-klassen gjelder de 14 marginenhetene på x-aksen til containeren.
- ' mt-5 ”-klassen bruker de 5 marginenhetene på toppen av beholderen.
- ' h-36 ” klasse setter høyden på containeren til 36 enheter.
I barnet
- ' bg-gul-400 ” klasse setter bakgrunnen til rutenettelementene til gul.
- ' p-2 ”-klassen legger til 3 enheter med polstring til innholdet i flex-elementene.
- ' m-2 ”-klassen setter 2-enheters margin til flex-elementene.
Produksjon
I utgangen ovenfor kan det ses at vertikal rulling har blitt aktivert.
Hvordan aktivere horisontal rulling i medvind?
For å aktivere horisontal rulling i Tailwind, bruk ' overløp-x-rull ” verktøyklasse med det spesifikke elementet i HTML-programmet. Den muliggjør horisontal rulling og viser alltid rullefeltene med mindre brukeren har deaktivert de 'alltid synlige' rullefeltene i systeminnstillingene.
Syntaks
< element klasse = 'overflyt-x-rull ...' > ... element >
Eksempel: Aktivering av horisontal rulling
I dette eksemplet vil vi lage en fleksbeholder med noen fleksible elementer på rad og bruke ' overløp-x-rull ' nytte for det:
< kropp >< div klasse = 'flex flex-row overflow-x-scroll space-x-24 bg-lilla-700 p-4 mx-14 mt-5 h-36' >
< div klasse = 'bg-yellow-400 p-2 m-2' > 1 div >
< div klasse = 'bg-yellow-400 p-2 m-2' > 2 div >
< div klasse = 'bg-yellow-400 p-2 m-2' > 3 div >
< div klasse = 'bg-yellow-400 p-2 m-2' > 4 div >
< div klasse = 'bg-yellow-400 p-2 m-2' > 5 div >
< div klasse = 'bg-yellow-400 p-2 m-2' > 6 div >
div >
kropp >
Her i overordnet
Produksjon
Utgangen ovenfor indikerer at horisontal rulling er aktivert.
Konklusjon
For å aktivere vertikal og horisontal rulling i Tailwind, ' overflyt-y-rull ' og ' overløp-x-rull ” nytteklasser brukes hhv. Disse verktøyene brukes på de ønskede elementene i HTML-programmet for å aktivere vertikal og horisontal rulling og alltid vise rullefeltene. Denne artikkelen har demonstrert metoden for å aktivere vertikal og horisontal rulling i Tailwind.