Tento zápis bude ilustrovať:
Ako používať funkciu overflow-auto v Tailwinde?
' pretečenie-auto ” pri pretečení obsahu automaticky pridáva posuvníky. Ak obsah nepreteká, nezobrazí sa posúvač. Ak chcete použiť „overflow-auto“ v Tailwinde, vytvorte program HTML a pridajte „ pretečenie-auto ” pomocnej triedy na požadovaný prvok v programe HTML.
Syntax
< element trieda = 'overflow-auto...' > ... element >
Príklad
V tomto príklade použijeme 'automatické pretečenie' užitočnosť pre
kontajner: < telo >
< div trieda = 'overflow-auto bg-purple-300 p-4 mx-16 mt-5 h-32 text-justify' >
Tailwind CSS poskytuje rôzne „overflow“ nástroje, ako napríklad „overflow-auto“, „overflow-scroll“, „overflow-hidden“, „overflow-visible“ atď. Tieto nástroje určujú, ako konkrétny prvok narába s obsahom, ktorý presahuje kontajner. veľkosť. Každá utilita ponúka jedinečnú funkcionalitu, avšak ich konečný cieľ zostáva rovnaký, t. j. ovládať správanie pri pretečení zvoleného prvku.
< / div >
< / telo >
- 'automatické pretečenie' trieda sa používa na pridanie posúvačov do kontajnera a zobraziť ich iba vtedy, keď je potrebné posúvanie.
- 'bg-purple-300' trieda nastaví fialovú farbu na farbu pozadia kontajnera.
- 'p-4' trieda nastavuje 4 jednotky výplne na všetky strany kontajnera.
- 'mx-16' triedy aplikuje 16 jednotiek okraja na os x kontajnera.
- 'mt-5' trieda aplikuje 5 jednotiek okraja na vrch nádoby.
- 'h-32' triedy nastavuje výšku kontajnera na 32 jednotiek.
- 'zarovnať text' class zarovná text obsahu vnútri kontajnera.
Výkon
Vyššie uvedený výstup zobrazuje pri pretečení textu zvislý posuvník. To naznačuje, že 'automatické pretečenie' nástroj bol úspešne aplikovaný na prvok.
Ako v Tailwinde používať rolovanie cez pretečenie?
Tento nástroj pridá posuvníky do kontajnera a vždy ich zobrazí, aj keď posúvanie nie je potrebné. Umožňuje tiež rolovanie vo všetkých smeroch. Ak chcete v Tailwinde použiť „overflow-scroll“, vytvorte program HTML a pridajte súbor 'preplniť-posúvať' pomocná trieda na konkrétny prvok v programe HTML.
Syntax
< element trieda = 'overflow-scroll...' > ... element > Príklad
V tomto príklade použijeme 'preplniť-posúvať' užitočnosť pre
< div trieda = 'overflow-scroll bg-purple-300 p-4 mx-16 mt-5 h-32 text-justify' >
Tailwind CSS poskytuje rôzne „overflow“ nástroje, ako napríklad „overflow-auto“, „overflow-scroll“, „overflow-hidden“, „overflow-visible“ atď. Tieto nástroje určujú, ako konkrétny prvok narába s obsahom, ktorý presahuje kontajner. veľkosť. Každá utilita ponúka jedinečnú funkcionalitu, avšak ich konečný cieľ zostáva rovnaký, t. j. ovládať správanie pri pretečení zvoleného prvku.
< / div >
< / telo >
Tu, 'preplniť-posúvať' trieda sa používa na pridanie posúvačov do
kontajnera a vždy ich zobrazuje.Výkon
Vo vyššie uvedenom výstupe je možné vidieť vertikálne aj horizontálne posuvníky. To naznačuje, že 'preplniť-posúvať' nástroj bol úspešne aplikovaný na prvok.
Záver
Ak chcete v Tailwinde použiť funkcie „overflow-auto“ a „overflow-scroll“, je potrebné pridať 'automatické pretečenie' a 'preplniť-posúvať' pomocné triedy na požadované prvky v programe HTML. Obe pomocné triedy pridávajú k špecifikovaným prvkom posuvníky. Trieda „overflow-auto“ však zobrazuje posúvacie lišty iba vtedy, keď je potrebné posúvanie, zatiaľ čo trieda „overflow-scroll“ ich zobrazuje vždy, aj keď posúvanie nie je potrebné. Tento zápis ilustruje metódy používania „automatického pretečenia“ a „pretáčania pri pretečení“ v Tailwinde.