Lodret og vandret rulning er måder at navigere på en webside ved hjælp af en mus, en touchpad eller en finger. Lodret rulning bruges, når indholdet af et element overstiger beholderens højde. Mens vandret rulning bruges, når indholdet i et element overstiger beholderens bredde. Lodret rulning gør det muligt for brugere at flytte websiden op og ned, mens vandret rulning tillader siden at flytte til venstre og højre. Tailwind CSS giver hjælpeklasser til at muliggøre lodret og vandret rulning på websider.
Denne artikel vil eksemplificere:
Hvordan aktiverer man lodret rulning i medvind?
For at aktivere lodret rulning i Tailwind, brug ' overløb-y-rulle ” hjælpeklasse med det ønskede element i HTML-programmet. Det tillader lodret rulning og viser altid rullepanelerne, medmindre brugeren har deaktiveret de 'altid-synlige' rullepaneler i deres systemindstillinger.
Syntaks
< element klasse = 'overløb-y-rul ...' > ... element >
Eksempel: Aktivering af lodret rulning
I dette eksempel vil vi oprette en flex-beholder med nogle flex-elementer i en kolonne og anvende ' overløb-y-rulle ' nytte til det:
< legeme >
< 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 >
legeme >
Her, i overordnet
- “ bøje ” klasse bruges til at justere underelementets størrelser på basis af tilgængelig plads ved at skabe et fleksibelt layout.
- “ flex-col ” klasse indstiller containerens flex-retning til en kolonne.
- “ overløb-y-rulle ” klasse muliggør lodret rulning.
- “ bg-lilla-700 ” klasse indstiller den lilla farve til beholderens baggrund.
- “ p-4 ” klasse sæt 4 enheder polstring på alle sider af containeren.
- “ mx-14 ”-klassen anvender de 14 marginenheder på containerens x-akse.
- “ mt-5 ”-klassen anvender de 5 enheder margin til toppen af beholderen.
- “ h-36 ” klasse indstiller højden af containeren til 36 enheder.
I barnet
- “ bg-gul-400 ” klasse indstiller baggrunden for gitterelementerne til gul.
- “ p-2 ” klasse tilføjer 3 enheder polstring til indholdet inde i flex-emnerne.
- “ m-2 ” klasse indstiller 2 enheders margen til flex-varerne.
Produktion
I ovenstående output kan det ses, at vertikal rulning er blevet aktiveret med succes.
Hvordan aktiverer man horisontal rulning i medvind?
For at aktivere vandret rulning i Tailwind, brug ' overløb-x-rulle ” hjælpeklasse med det specifikke element i HTML-programmet. Det muliggør vandret rulning og viser altid rullepanelerne, medmindre brugeren har deaktiveret de 'altid-synlige' rullepaneler i deres systemindstillinger.
Syntaks
< element klasse = 'overløb-x-scroll ...' > ... element >
Eksempel: Aktivering af vandret rulning
I dette eksempel vil vi oprette en flex-beholder med nogle flex-elementer i en række og anvende ' overløb-x-rulle ' nytte til det:
< legeme >< 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 >
legeme >
Her i overordnet
Produktion
Ovenstående output indikerer, at vandret rulning er blevet aktiveret.
Konklusion
For at aktivere lodret og vandret rulning i Tailwind, ' overløb-y-rulle ' og ' overløb-x-rulle ” bruges brugsklasser hhv. Disse værktøjer anvendes på de ønskede elementer i HTML-programmet for at aktivere lodret og vandret rulning og altid vise rullepanelerne. Denne artikel har demonstreret metoden til at aktivere lodret og vandret rulning i Tailwind.