Šis užrašas parodys:
Kaip naudoti „overflow-auto“ „Tailwind“?
„ perpildymas-auto “ klasė automatiškai prideda slinkties juostas, kai turinys persipildo. Jei turinys neperpildytas, slinkties juosta nerodoma. Norėdami „Tailwind“ naudoti „overflow-auto“, sukurkite HTML programą ir pridėkite „ perpildymas-auto ” naudingumo klasę į norimą elementą HTML programoje.
Sintaksė
< elementas klasė = „automatinis perpildymas...“ > ... elementas >
Pavyzdys
Šiame pavyzdyje taikysime „automatinis perpildymas“ naudingumas
konteineris: < kūnas >
< div klasė = 'overflow-auto bg-purple-300 p-4 mx-16 mt-5 h-32 text-justify' >
Tailwind CSS teikia įvairias „perpildymo“ programas, tokias kaip „overflow-auto“, „overflow-scroll“, „overflow-hidden“, „overflow-visible“ ir kt. Šios priemonės nustato, kaip konkretus elementas apdoroja turinį, kuris viršija konteinerį. dydis. Kiekviena programa siūlo unikalias funkcijas, tačiau jų galutinis tikslas išlieka tas pats, ty kontroliuoti pasirinkto elemento perpildymo elgesį.
< / div >
< / kūnas >
- „automatinis perpildymas“ klasė naudojama slinkties juostoms pridėti prie konteinerį ir rodyti juos tik tada, kai reikia slinkti.
- „bg-purple-300“ klasė nustato purpurinę konteinerio fono spalvą.
- „p-4“ klasės komplektai 4 vienetai kamšalo iš visų konteinerio pusių.
- 'mx-16' klasė taiko 16 paraštės vienetų konteinerio x ašyje.
- „mt-5“ klasė taiko 5 maržos vienetus konteinerio viršuje.
- 'h-32' klasė nustato konteinerio aukštį iki 32 vnt.
- „teksto pagrindimas“ klasė pateisina turinio tekstą konteinerio viduje.
Išvestis
Pirmiau pateiktame išvestyje rodoma vertikali slinkties juosta, kai tekstas persipildo. Tai rodo, kad „automatinis perpildymas“ naudingumas buvo sėkmingai pritaikytas elementui.
Kaip „Tailwind“ naudoti „perpildymo slinktį“?
Ši programa prideda slinkties juostas prie konteinerio ir visada rodo jas, net jei slinkti nereikia. Tai taip pat leidžia slinkti visomis kryptimis. Norėdami „Tailwind“ naudoti „perpildymo slinktį“, sukurkite HTML programą ir pridėkite „perpildymas-slinkimas“ naudingumo klasė konkrečiam elementui HTML programoje.
Sintaksė
< elementas klasė = 'perpildymas-slinkimas...' > ... elementas > Pavyzdys
Šiame pavyzdyje taikysime „perpildymas-slinkimas“ naudingumas
< div klasė = 'overflow-scroll bg-purple-300 p-4 mx-16 mt-5 h-32 text-justify' >
Tailwind CSS teikia įvairias „perpildymo“ programas, tokias kaip „overflow-auto“, „overflow-scroll“, „overflow-hidden“, „overflow-visible“ ir kt. Šios priemonės nustato, kaip konkretus elementas apdoroja turinį, kuris viršija konteinerį. dydis. Kiekviena programa siūlo unikalias funkcijas, tačiau jų galutinis tikslas išlieka tas pats, ty kontroliuoti pasirinkto elemento perpildymo elgesį.
< / div >
< / kūnas >
Čia, „perpildymas-slinkimas“ klasė naudojama slinkties juostoms pridėti prie
konteinerį ir visada juos rodo.Išvestis
Aukščiau pateiktame išvestyje galima matyti vertikalias ir horizontalias slinkties juostas. Tai rodo, kad „perpildymas-slinkimas“ naudingumas buvo sėkmingai pritaikytas elementui.
Išvada
Norint naudoti „overflow-auto“ ir „overflow-scroll“ „Tailwind“, reikia pridėti „automatinis perpildymas“ ir „perpildymas-slinkimas“ naudingumo klases į norimus elementus HTML programoje. Abi naudingumo klasės prideda slinkties juostas prie nurodytų elementų. Tačiau „perpildymo-auto“ klasė rodo slinkties juostas tik tada, kai slinkti būtina, o klasė „perpildymas-slinktis“ jas rodo visada, net jei slinkti nereikia. Šiame įraše iliustruoti metodai, kaip naudoti „overflow-auto“ ir „overflow-scroll“ „Tailwind“.