Denne tekst vil illustrere:
Hvordan bruger man 'overflow-auto' i Tailwind?
Det ' overløbs-auto ” klasse tilføjer automatisk rullepaneler, når indholdet flyder over. Den viser ikke rullepanelet, hvis indholdet ikke flyder over. For at bruge 'overflow-auto' i Tailwind skal du lave et HTML-program og tilføje ' overløbs-auto ” hjælpeklasse til det ønskede element i HTML-programmet.
Syntaks
< element klasse = 'overløbsautomatik...' > ... element >
Eksempel
I dette eksempel vil vi anvende 'overløbsautomatik' nytte til
beholder: < legeme >
< div klasse = 'overflow-auto bg-lilla-300 p-4 mx-16 mt-5 h-32 tekst-justify' >
Tailwind CSS leverer forskellige 'overflow'-værktøjer, såsom 'overflow-auto', 'overflow-scroll', 'overflow-skjult', 'overflow-synlig' osv. Disse hjælpeprogrammer bestemmer, hvordan et specifikt element håndterer indholdet, der overskrider containeren størrelse. Hvert hjælpeprogram tilbyder unik funktionalitet, men deres slutmål forbliver det samme, dvs. at kontrollere overløbsadfærden for det valgte element.
< / div >
< / legeme >
- 'overløbsautomatik' klasse bruges til at tilføje rullepanelerne til beholder og vis dem kun, når det er nødvendigt at rulle.
- 'bg-lilla-300' klasse indstiller den lilla farve til beholderens baggrundsfarve.
- 'p-4' klasse sæt 4 enheder polstring på containerens alle sider.
- 'mx-16' klasse anvender de 16 marginenheder på containerens x-akse.
- 'mt-5' klasse anvender de 5 enheder margen til toppen af beholderen.
- 'h-32' klasse indstiller containerens højde til 32 enheder.
- 'tekst-begrund' klasse retfærdiggør teksten af indholdet inde i beholderen.
Produktion
Ovenstående output viser en lodret rullebjælke, når teksten flyder over. Dette indikerer, at 'overløbsautomatik' hjælpeprogrammet er blevet anvendt på elementet med succes.
Hvordan bruger man 'overflow-scroll' i Tailwind?
Dette værktøj tilføjer rullepanelerne til beholderen og viser dem altid, selvom rulning ikke er nødvendig. Det giver også mulighed for at rulle i alle retninger. For at bruge 'overflow-scroll' i Tailwind skal du lave et HTML-program og tilføje 'overløb-scroll' utility klasse til det bestemte element i HTML-programmet.
Syntaks
< element klasse = 'overløb-rul ...' > ... element > Eksempel
I dette eksempel vil vi anvende 'overløb-scroll' nytte til
< div klasse = 'overløb-rul bg-lilla-300 p-4 mx-16 mt-5 h-32 tekst-juster' >
Tailwind CSS leverer forskellige 'overflow'-værktøjer, såsom 'overflow-auto', 'overflow-scroll', 'overflow-skjult', 'overflow-synlig' osv. Disse hjælpeprogrammer bestemmer, hvordan et specifikt element håndterer indholdet, der overskrider containeren størrelse. Hvert hjælpeprogram tilbyder unik funktionalitet, men deres slutmål forbliver det samme, dvs. at kontrollere overløbsadfærden for det valgte element.
< / div >
< / legeme >
Her, den 'overløb-scroll' klasse bruges til at tilføje rullepanelerne til
container og viser dem altid.Produktion
I ovenstående output kan både lodrette og vandrette rullebjælker ses. Dette indikerer, at 'overløb-scroll' hjælpeprogrammet er blevet anvendt på elementet med succes.
Konklusion
For at bruge 'overflow-auto' og 'overflow-scroll' i Tailwind, er det nødvendigt at tilføje 'overløbsautomatik' og 'overløb-scroll' hjælpeklasser til de ønskede elementer i HTML-programmet. Begge hjælpeklasser tilføjer rullepaneler til de angivne elementer. Men 'overflow-auto'-klassen viser kun rullebjælker, når rulning er nødvendig, mens 'overflow-scroll'-klassen altid viser dem, selvom rulning ikke er nødvendig. Denne opskrivning har illustreret metoderne til at bruge 'overflow-auto' og 'overflow-scroll' i Tailwind.