Dit artikel illustreert:
Hoe gebruik je 'overflow-auto' in Tailwind?
De ' overloop-auto ” klasse voegt automatisch schuifbalken toe wanneer de inhoud overstroomt. Het toont de schuifbalk niet als de inhoud niet overloopt. Om de “overflow-auto” in Tailwind te gebruiken, maak je een HTML-programma en voeg je de “ overloop-auto ” utility class naar het gewenste element in het HTML-programma.
Syntaxis
< element klas = 'overloop-auto ...' > ... element >
Voorbeeld
In dit voorbeeld passen we de 'overloop-auto' nut aan de
houder: < lichaam >
< div klas = 'overloop-auto bg-paars-300 p-4 mx-16 mt-5 h-32 tekst-uitvullen' >
Tailwind CSS biedt verschillende 'overflow'-hulpprogramma's, zoals 'overflow-auto', 'overflow-scroll', 'overflow-hidden', 'overflow-visible' enz. Deze hulpprogramma's bepalen hoe een specifiek element omgaat met de inhoud die de container overschrijdt maat. Elk hulpprogramma biedt unieke functionaliteit, maar hun einddoel blijft hetzelfde, d.w.z. het overloopgedrag van het geselecteerde element regelen.
< / div >
< / lichaam >
- 'overloop-auto' class wordt gebruikt om de schuifbalken toe te voegen aan het container en laat ze alleen zien wanneer scrollen nodig is.
- “bg-paars-300” class stelt de paarse kleur in op de achtergrondkleur van de container.
- 'p-4' class sets 4 eenheden opvulling aan alle kanten van de container.
- 'mx-16' class past de 16 marge-eenheden toe op de x-as van de container.
- 'mt-5' class past de marge van 5 eenheden toe op de bovenkant van de container.
- 'h-32' class stelt de hoogte van de container in op 32 eenheden.
- 'tekst-uitvullen' klasse rechtvaardigt de tekst van de inhoud in de container.
Uitgang
De bovenstaande uitvoer toont een verticale schuifbalk wanneer de tekst overloopt. Dit geeft aan dat de 'overloop-auto' hulpprogramma is met succes op het element toegepast.
Hoe 'overflow-scroll' gebruiken in Tailwind?
Dit hulpprogramma voegt de schuifbalken toe aan de container en toont ze altijd, zelfs als scrollen niet nodig is. Het maakt ook scrollen in alle richtingen mogelijk. Om de “overflow-scroll” in Tailwind te gebruiken, maak je een HTML-programma en voeg je de 'overloop-scroll' utility-klasse toe aan het specifieke element in het HTML-programma.
Syntaxis
< element klas = 'overloop-scroll ...' > ... element > Voorbeeld
In dit voorbeeld passen we de 'overloop-scroll' nut aan de
< div klas = 'overloop-scroll bg-paars-300 p-4 mx-16 mt-5 h-32 tekst-uitvullen' >
Tailwind CSS biedt verschillende 'overflow'-hulpprogramma's, zoals 'overflow-auto', 'overflow-scroll', 'overflow-hidden', 'overflow-visible' enz. Deze hulpprogramma's bepalen hoe een specifiek element omgaat met de inhoud die de container overschrijdt maat. Elk hulpprogramma biedt unieke functionaliteit, maar hun einddoel blijft hetzelfde, d.w.z. het overloopgedrag van het geselecteerde element regelen.
< / div >
< / lichaam >
Hier de 'overloop-scroll' class wordt gebruikt om de schuifbalken toe te voegen aan het
container en laat ze altijd zien.Uitgang
In de bovenstaande uitvoer zijn zowel verticale als horizontale schuifbalken te zien. Dit geeft aan dat de 'overloop-scroll' hulpprogramma is met succes op het element toegepast.
Conclusie
Om de “overflow-auto” en “overflow-scroll” in Tailwind te gebruiken, is het nodig om de 'overloop-auto' En 'overloop-scroll' utility-klassen naar de gewenste elementen in het HTML-programma. Beide hulpprogrammaklassen voegen schuifbalken toe aan de opgegeven elementen. De klasse 'overflow-auto' toont echter alleen schuifbalken wanneer scrollen nodig is, terwijl de klasse 'overflow-scroll' ze altijd toont, zelfs als scrollen niet nodig is. Dit artikel heeft de methoden geïllustreerd om 'overflow-auto' en 'overflow-scroll' in Tailwind te gebruiken.