Ez az írás szemlélteti:
- Hogyan kell használni az „overflow-auto”-t a Tailwindben?
- Hogyan kell használni a „túlcsordulási görgetést” a Tailwindben?
Hogyan kell használni az „overflow-auto”-t a Tailwindben?
A ' túlfolyó-auto ” osztály automatikusan görgetősávokat ad hozzá, amikor a tartalom túlcsordul. Nem jeleníti meg a görgetősávot, ha a tartalom nem csordul túl. Az „overflow-auto” használatához a Tailwindben készítsen egy HTML programot, és adja hozzá a „ túlfolyó-auto ” segédprogram osztályt a kívánt elemhez a HTML programban.
Szintaxis
< elem osztály = 'túlcsordulás-auto...' > ... elem >
Példa
Ebben a példában a „túlcsordulás-automatikus” segédprogram a
tartály: < test >
< div osztály = 'overflow-auto bg-purple-300 p-4 mx-16 mt-5 h-32 text-justify' >
A Tailwind CSS különféle 'túlcsordulási' segédprogramokat biztosít, például 'overflow-auto', 'overflow-scroll', 'overflow-hidden', 'overflow-visible' stb. méret. Mindegyik segédprogram egyedi funkcionalitást kínál, azonban a végcéljuk ugyanaz, azaz a kiválasztott elem túlcsordulási viselkedésének szabályozása.
< / div >
< / test >
- „túlcsordulás-automatikus” osztály a görgetősávok hozzáadására szolgál konténerben, és csak akkor jelenítse meg őket, ha görgetés szükséges.
- 'bg-lila-300' osztály a lila színt a tároló háttérszínére állítja.
- 'p-4' osztály 4 egység párnázatot tartalmaz a konténer minden oldalán.
- 'mx-16' osztály a 16 egységnyi margót alkalmazza a konténer x tengelyére.
- 'mt-5' osztály az 5 egységnyi margót a tartály tetejére alkalmazza.
- 'h-32' osztály a konténer magasságát 32 egységre állítja be.
- „szöveges igazítás” osztály sorkizárja a tárolón belüli tartalom szövegét.
Kimenet
A fenti kimenet egy függőleges görgetősávot mutat, amikor a szöveg túlcsordul. Ez azt jelzi, hogy a „túlcsordulás-automatikus” segédprogramot sikeresen alkalmaztuk az elemre.
Hogyan kell használni a „túlcsordulási görgetést” a Tailwindben?
Ez a segédprogram hozzáadja a görgetősávokat a tárolóhoz, és mindig megjeleníti őket, még akkor is, ha a görgetés nem szükséges. Ezenkívül lehetővé teszi a görgetést minden irányban. A „túlcsordulási görgetés” használatához a Tailwindben készítsen egy HTML programot, és adja hozzá a „túlcsordulás-görgetés” segédprogram osztályt a HTML program adott eleméhez.
Szintaxis
< elem osztály = 'túlcsordulás-görgetés...' > ... elem > Példa
Ebben a példában a „túlcsordulás-görgetés” segédprogram a
< div osztály = 'overflow-scroll bg-purple-300 p-4 mx-16 mt-5 h-32 text-justify' >
A Tailwind CSS különféle 'túlcsordulási' segédprogramokat biztosít, például 'overflow-auto', 'overflow-scroll', 'overflow-hidden', 'overflow-visible' stb. méret. Mindegyik segédprogram egyedi funkcionalitást kínál, azonban a végcéljuk ugyanaz, azaz a kiválasztott elem túlcsordulási viselkedésének szabályozása.
< / div >
< / test >
Itt, a „túlcsordulás-görgetés” osztály a görgetősávok hozzáadására szolgál
és mindig megmutatja őket.Kimenet
A fenti kimenetben függőleges és vízszintes görgetősávok is láthatók. Ez azt jelzi, hogy a „túlcsordulás-görgetés” segédprogramot sikeresen alkalmaztuk az elemre.
Következtetés
A „overflow-auto” és „overflow-scroll” használatához a Tailwindben, hozzá kell adni a „túlcsordulás-automatikus” és „túlcsordulás-görgetés” segédprogram osztályokat a HTML program kívánt elemeire. Mindkét segédprogram-osztály görgetősávokat ad a megadott elemekhez. Az „overflow-scroll” osztály azonban csak akkor jeleníti meg a görgetősávokat, ha a görgetés szükséges, míg az „overflow-scroll” osztály mindig akkor is, ha a görgetés nem szükséges. Ez az írás bemutatja az „overflow-auto” és „overflow-scroll” használatának módszereit a Tailwindben.