Ang pagsulat na ito ay maglalarawan:
Paano Gamitin ang 'overflow-auto' sa Tailwind?
Ang ' overflow-auto Awtomatikong nagdaragdag ang klase ng mga scrollbar kapag umapaw ang nilalaman. Hindi nito ipinapakita ang scrollbar kung hindi umaapaw ang nilalaman. Upang gamitin ang 'overflow-auto' sa Tailwind, gumawa ng HTML program at idagdag ang ' overflow-auto ” utility class sa gustong elemento sa HTML program.
Syntax
< elemento klase = 'overflow-auto ...' > ... elemento >
Halimbawa
Sa halimbawang ito, ilalapat natin ang 'overflow-auto' utility sa
lalagyan: < katawan >
< div klase = 'overflow-auto bg-purple-300 p-4 mx-16 mt-5 h-32 text-justify' >
Nagbibigay ang Tailwind CSS ng iba't ibang 'overflow' na mga utility, tulad ng 'overflow-auto', 'overflow-scroll', 'overflow-hidden', 'overflow-visible' atbp. Tinutukoy ng mga utility na ito kung paano pinangangasiwaan ng isang partikular na elemento ang content na lumalampas sa container laki. Ang bawat utility ay nag-aalok ng natatanging functionality, gayunpaman, ang kanilang layunin ay nananatiling pareho, ibig sabihin, upang makontrol ang overflow na pag-uugali ng napiling elemento.
< / div >
< / katawan >
- 'overflow-auto' class ay ginagamit upang idagdag ang mga scrollbar sa lalagyan at ipakita lamang ang mga ito kapag kailangan ang pag-scroll.
- “bg-purple-300” itinatakda ng klase ang lilang kulay sa kulay ng background ng lalagyan.
- “p-4” Ang klase ay nagtatakda ng 4 na yunit ng padding sa lahat ng panig ng lalagyan.
- “mx-16” inilalapat ng klase ang 16 na yunit ng margin sa x-axis ng lalagyan.
- “mt-5” inilalapat ng klase ang 5 unit ng margin sa tuktok ng lalagyan.
- “h-32” Itinatakda ng klase ang taas ng lalagyan sa 32 units.
- 'text-justify' binibigyang-katwiran ng klase ang teksto ng nilalaman sa loob ng lalagyan.
Output
Ang output sa itaas ay nagpapakita ng patayong scrollbar kapag umaapaw ang text. Ito ay nagpapahiwatig na ang 'overflow-auto' Ang utility ay matagumpay na nailapat sa elemento.
Paano Gamitin ang 'overflow-scroll' sa Tailwind?
Idinaragdag ng utility na ito ang mga scrollbar sa lalagyan at palaging ipinapakita ang mga ito kahit na hindi kinakailangan ang pag-scroll. Pinapayagan din nito ang pag-scroll sa lahat ng direksyon. Upang gamitin ang 'overflow-scroll' sa Tailwind, gumawa ng HTML program at idagdag ang 'overflow-scroll' utility class sa partikular na elemento sa HTML program.
Syntax
< elemento klase = 'overflow-scroll ...' > ... elemento > Halimbawa
Sa halimbawang ito, ilalapat natin ang 'overflow-scroll' utility sa
< div klase = 'overflow-scroll bg-purple-300 p-4 mx-16 mt-5 h-32 text-justify' >
Nagbibigay ang Tailwind CSS ng iba't ibang 'overflow' na mga utility, tulad ng 'overflow-auto', 'overflow-scroll', 'overflow-hidden', 'overflow-visible' atbp. Tinutukoy ng mga utility na ito kung paano pinangangasiwaan ng isang partikular na elemento ang content na lumalampas sa container laki. Ang bawat utility ay nag-aalok ng natatanging functionality, gayunpaman, ang kanilang layunin ay nananatiling pareho, ibig sabihin, upang makontrol ang overflow na pag-uugali ng napiling elemento.
< / div >
< / katawan >
Dito, ang 'overflow-scroll' class ay ginagamit upang idagdag ang mga scrollbar sa
lalagyan at palaging ipinapakita ang mga ito.Output
Sa output sa itaas, parehong patayo at pahalang na mga scrollbar ay makikita. Ito ay nagpapahiwatig na ang 'overflow-scroll' Ang utility ay matagumpay na nailapat sa elemento.
Konklusyon
Upang magamit ang 'overflow-auto' at 'overflow-scroll' sa Tailwind, kinakailangang idagdag ang 'overflow-auto' at 'overflow-scroll' mga utility class sa mga gustong elemento sa HTML program. Ang parehong mga klase ng utility ay nagdaragdag ng mga scrollbar sa mga tinukoy na elemento. Gayunpaman, ang klase ng 'overflow-auto' ay nagpapakita lamang ng mga scrollbar kapag kailangan ang pag-scroll habang ang klase ng 'overflow-scroll' ay palaging ipinapakita ang mga ito kahit na ang pag-scroll ay hindi kinakailangan. Ang write-up na ito ay naglalarawan ng mga pamamaraan sa paggamit ng 'overflow-auto' at 'overflow-scroll' sa Tailwind.