Vertikálne a horizontálne rolovanie sú spôsoby navigácie na webovej stránke pomocou myši, touchpadu alebo prsta. Vertikálne posúvanie sa používa, keď obsah prvku presahuje výšku kontajnera. Vodorovné posúvanie sa používa, keď obsah prvku presahuje šírku kontajnera. Vertikálne posúvanie umožňuje používateľom posúvať webovú stránku nahor a nadol, zatiaľ čo horizontálne posúvanie umožňuje posúvať stránku doľava a doprava. Tailwind CSS poskytuje pomocné triedy, ktoré umožňujú vertikálne a horizontálne posúvanie na webových stránkach.
Tento článok bude príkladom:
Ako povoliť vertikálne posúvanie v Tailwinde?
Ak chcete povoliť vertikálne posúvanie v Tailwinde, použite „ overflow-y-scroll ” pomocná trieda s požadovaným prvkom v programe HTML. Umožňuje vertikálne posúvanie a vždy zobrazuje posúvače, pokiaľ používateľ vo svojich systémových nastaveniach nezakázal „vždy viditeľné“ posúvače.
Syntax
< element trieda = 'overflow-y-scroll ...' > ... element >
Príklad: Povolenie vertikálneho posúvania
V tomto príklade vytvoríme flexibilný kontajner s niekoľkými flexibilnými položkami v stĺpci a použijeme „ overflow-y-scroll ” pomôcka k tomu:
< telo >
< div trieda = 'flex flex-col overflow-y-scroll bg-purple-700 p-4 mx-14 mt-5 h-36' >
< div trieda = 'bg-yellow-400 p-2 m-2' > 1 div >
< div trieda = 'bg-yellow-400 p-2 m-2' > 2 div >
< div trieda = 'bg-yellow-400 p-2 m-2' > 3 div >
< div trieda = 'bg-yellow-400 p-2 m-2' > 4 div >
< div trieda = 'bg-yellow-400 p-2 m-2' > 5 div >
< div trieda = 'bg-yellow-400 p-2 m-2' > 6 div >
div >
telo >
Tu v nadradenom prvku
- “ flex ” sa používa na úpravu veľkostí podriadeného prvku na základe dostupného priestoru vytvorením flexibilného rozloženia.
- “ flex-kol ” nastaví smer ohybu kontajnera na stĺpec.
- “ overflow-y-scroll ” umožňuje vertikálne rolovanie.
- “ bg-purple-700 ” nastaví fialovú farbu na pozadie kontajnera.
- “ p-4 “ trieda nastavuje 4 jednotky výplne na všetky strany kontajnera.
- “ mx-14 ” použije 14 jednotiek okraja na osi x kontajnera.
- “ mt-5 ” trieda aplikuje 5 jednotiek okraja na hornú časť kontajnera.
- “ h-36 ” trieda nastavuje výšku kontajnera na 36 jednotiek.
V podradenom prvku
- “ bg-žltá-400 ” nastaví pozadie položiek mriežky na žlté.
- “ p-2 “ trieda pridáva 3 jednotky výplne k obsahu vo vnútri ohybných predmetov.
- “ m-2 ” trieda nastavuje 2 jednotky rozpätia pre flexibilné položky.
Výkon
Vo vyššie uvedenom výstupe je vidieť, že vertikálne rolovanie bolo úspešne povolené.
Ako povoliť horizontálne posúvanie v Tailwinde?
Ak chcete v Tailwinde povoliť vodorovné posúvanie, použite „ overflow-x-scroll ” pomocná trieda so špecifickým prvkom v programe HTML. Umožňuje horizontálne posúvanie a vždy zobrazuje posúvače, pokiaľ používateľ nezakázal „vždy viditeľné“ posúvače vo svojich systémových nastaveniach.
Syntax
< element trieda = 'overflow-x-scroll ...' > ... element >
Príklad: Povolenie horizontálneho rolovania
V tomto príklade vytvoríme flexibilný kontajner s niekoľkými flexibilnými položkami v rade a použijeme „ overflow-x-scroll ” pomôcka k tomu:
< telo >< div trieda = 'flex flex-row overflow-x-scroll space-x-24 bg-purple-700 p-4 mx-14 mt-5 h-36' >
< div trieda = 'bg-yellow-400 p-2 m-2' > 1 div >
< div trieda = 'bg-yellow-400 p-2 m-2' > 2 div >
< div trieda = 'bg-yellow-400 p-2 m-2' > 3 div >
< div trieda = 'bg-yellow-400 p-2 m-2' > 4 div >
< div trieda = 'bg-yellow-400 p-2 m-2' > 5 div >
< div trieda = 'bg-yellow-400 p-2 m-2' > 6 div >
div >
telo >
Tu v nadradenom prvku
Výkon
Vyššie uvedený výstup naznačuje, že horizontálne rolovanie bolo úspešne povolené.
Záver
Ak chcete povoliť vertikálne a horizontálne posúvanie v Tailwinde, „ overflow-y-scroll “ a „ overflow-x-scroll ” sa používajú úžitkové triedy resp. Tieto nástroje sa aplikujú na požadované prvky v programe HTML, aby umožnili vertikálne a horizontálne posúvanie a vždy zobrazovali posúvače. Tento článok demonštroval spôsob povolenia vertikálneho a horizontálneho posúvania v Tailwinde.