Ovaj zapis će ilustrirati:
Kako koristiti “overflow-auto” u Tailwindu?
' preljev-auto ” klasa automatski dodaje trake za pomicanje kada se sadržaj prelije. Ne prikazuje traku za pomicanje ako se sadržaj ne prelije. Da biste koristili 'overflow-auto' u Tailwindu, napravite HTML program i dodajte ' preljev-auto ” uslužne klase na željeni element u HTML programu.
Sintaksa
< element razreda = 'overflow-auto ...' > ... element >
Primjer
U ovom primjeru primijenit ćemo “automatski preljev” korisnost za
kontejner: < tijelo >
< div razreda = 'overflow-auto bg-purple-300 p-4 mx-16 mt-5 h-32 text-justify' >
Tailwind CSS pruža razne 'overflow' uslužne programe, kao što su 'overflow-auto', 'overflow-scroll', 'overflow-hidden', 'overflow-visible' itd. Ovi uslužni programi određuju kako određeni element rukuje sadržajem koji premašuje spremnik veličina. Svaki uslužni program nudi jedinstvenu funkcionalnost, međutim, njihov krajnji cilj ostaje isti, tj. kontrolirati ponašanje prelijevanja odabranog elementa.
< / div >
< / tijelo >
- “automatski preljev” klasa se koristi za dodavanje traka za pomicanje u spremnik i prikazati ih samo kada je potrebno listanje.
- “bg-ljubičasta-300” klasa postavlja ljubičastu boju na boju pozadine spremnika.
- “p-4” klasa postavlja 4 jedinice podloge na svim stranama kontejnera.
- 'mx-16' klasa primjenjuje 16 jedinica margine na x-osi spremnika.
- “mt-5” klasa primjenjuje 5 jedinica margine na vrh spremnika.
- “h-32” klasa postavlja visinu spremnika na 32 jedinice.
- “text-justify” klasa poravnava tekst sadržaja unutar spremnika.
Izlaz
Gornji izlaz prikazuje okomitu traku za pomicanje kada se tekst prelije. Ovo ukazuje da je “automatski preljev” uslužni program je uspješno primijenjen na element.
Kako koristiti 'overflow-scroll' u Tailwindu?
Ovaj uslužni program dodaje trake za pomicanje u spremnik i uvijek ih prikazuje čak i ako pomicanje nije potrebno. Također omogućuje pomicanje u svim smjerovima. Da biste koristili 'overflow-scroll' u Tailwindu, napravite HTML program i dodajte “overflow-scroll” utility class određenom elementu u HTML programu.
Sintaksa
< element razreda = 'overflow-scroll ...' > ... element > Primjer
U ovom primjeru primijenit ćemo “overflow-scroll” korisnost za
< div razreda = 'overflow-scroll bg-purple-300 p-4 mx-16 mt-5 h-32 text-justify' >
Tailwind CSS pruža razne 'overflow' uslužne programe, kao što su 'overflow-auto', 'overflow-scroll', 'overflow-hidden', 'overflow-visible' itd. Ovi uslužni programi određuju kako određeni element rukuje sadržajem koji premašuje spremnik veličina. Svaki uslužni program nudi jedinstvenu funkcionalnost, međutim, njihov krajnji cilj ostaje isti, tj. kontrolirati ponašanje prelijevanja odabranog elementa.
< / div >
< / tijelo >
Evo, “overflow-scroll” klasa se koristi za dodavanje traka za pomicanje u
spremnik i uvijek ih pokazuje.Izlaz
U gornjem izlazu mogu se vidjeti i okomite i vodoravne trake za pomicanje. Ovo ukazuje da je “overflow-scroll” uslužni program je uspješno primijenjen na element.
Zaključak
Za korištenje 'overflow-auto' i 'overflow-scroll' u Tailwindu, potrebno je dodati “automatski preljev” i “overflow-scroll” korisnih klasa na željene elemente u HTML programu. Obje klase pomoćnih programa dodaju trake za pomicanje navedenim elementima. Međutim, klasa 'overflow-auto' prikazuje trake za pomicanje samo kada je potrebno pomicanje, dok ih klasa 'overflow-scroll' uvijek prikazuje čak i ako pomicanje nije potrebno. Ovaj zapis je ilustrirao metode za korištenje 'overflow-auto' i 'overflow-scroll' u Tailwindu.