Denne oppskriften vil illustrere:
Hvordan bruke 'overflow-auto' i Tailwind?
« overløpsauto ”-klassen legger automatisk til rullefelt når innholdet renner over. Den viser ikke rullefeltet hvis innholdet ikke renner over. For å bruke 'overflow-auto' i Tailwind, lag et HTML-program og legg til ' overløpsauto ” verktøyklasse til ønsket element i HTML-programmet.
Syntaks
< element klasse = 'overløpsautomatikk ...' > ... element >
Eksempel
I dette eksemplet vil vi bruke 'overløpsautomatikk' nytte til
container: < kropp >
< div klasse = 'overflow-auto bg-lilla-300 p-4 mx-16 mt-5 h-32 tekst-juster' >
Tailwind CSS tilbyr forskjellige 'overflow'-verktøy, for eksempel 'overflow-auto', 'overflow-scroll', 'overflow-hidden', 'overflow-visible' osv. Disse verktøyene bestemmer hvordan et spesifikt element håndterer innholdet som overskrider beholderen størrelse. Hvert verktøy tilbyr unik funksjonalitet, men sluttmålet deres forblir det samme, det vil si å kontrollere overløpsatferden til det valgte elementet.
< / div >
< / kropp >
- 'overløpsautomatikk' klasse brukes til å legge til rullefeltene i beholder og vis dem bare når rulling er nødvendig.
- «bg-lilla-300» klasse setter den lilla fargen til beholderens bakgrunnsfarge.
- 'p-4' klasse setter 4 enheter med polstring på containerens alle sider.
- 'mx-16' klasse bruker de 16 marginenhetene på x-aksen til beholderen.
- 'mt-5' klasse bruker de 5 marginenhetene på toppen av beholderen.
- «h-32» klasse setter høyden på beholderen til 32 enheter.
- 'tekst-begrunne' klasse rettferdiggjør teksten til innholdet inne i beholderen.
Produksjon
Utgangen ovenfor viser en vertikal rullelinje når teksten renner over. Dette indikerer at 'overløp-auto' verktøyet har blitt brukt på elementet.
Hvordan bruke 'overflow-scroll' i Tailwind?
Dette verktøyet legger til rullefeltene i beholderen og viser dem alltid selv om rullingen ikke er nødvendig. Den tillater også rulling i alle retninger. For å bruke 'overflow-scroll' i Tailwind, lag et HTML-program og legg til 'overløp-scroll' verktøyklassen til det bestemte elementet i HTML-programmet.
Syntaks
< element klasse = 'overløp-rull ...' > ... element > Eksempel
I dette eksemplet vil vi bruke 'overløp-scroll' nytte til
< div klasse = 'overløp-scroll bg-lilla-300 p-4 mx-16 mt-5 h-32 tekst-juster' >
Tailwind CSS tilbyr forskjellige 'overflow'-verktøy, for eksempel 'overflow-auto', 'overflow-scroll', 'overflow-hidden', 'overflow-visible' osv. Disse verktøyene bestemmer hvordan et spesifikt element håndterer innholdet som overskrider beholderen størrelse. Hvert verktøy tilbyr unik funksjonalitet, men sluttmålet deres forblir det samme, det vil si å kontrollere overløpsatferden til det valgte elementet.
< / div >
< / kropp >
Her, den 'overløp-scroll' klasse brukes til å legge til rullefeltene i
container og viser dem alltid.Produksjon
I utgangen ovenfor kan både vertikale og horisontale rullefelt sees. Dette indikerer at 'overløp-scroll' verktøyet har blitt brukt på elementet.
Konklusjon
For å bruke 'overflow-auto' og 'overflow-scroll' i Tailwind, er det nødvendig å legge til 'overløpsautomatikk' og 'overløp-scroll' verktøyklasser til de ønskede elementene i HTML-programmet. Begge verktøyklassene legger til rullefelt til de angitte elementene. Imidlertid viser 'overflow-auto'-klassen rullefelt bare når rulling er nødvendig, mens klassen 'overflow-scroll' alltid viser dem selv om rulling ikke er nødvendig. Denne oppskriften har illustrert metodene for å bruke 'overflow-auto' og 'overflow-scroll' i Tailwind.