Vertikālā un horizontālā ritināšana ir veidi, kā pārvietoties tīmekļa lapā, izmantojot peli, skārienpaliktni vai pirkstu. Vertikālā ritināšana tiek izmantota, ja elementa saturs pārsniedz konteinera augstumu. Horizontālā ritināšana tiek izmantota, ja elementa saturs pārsniedz konteinera platumu. Vertikālā ritināšana ļauj lietotājiem pārvietot tīmekļa lapu uz augšu un uz leju, savukārt horizontālā ritināšana ļauj lapai pārvietoties pa kreisi un pa labi. Tailwind CSS nodrošina utilītu klases, lai nodrošinātu vertikālu un horizontālu ritināšanu tīmekļa lapās.
Šis raksts sniegs piemēru:
- Kā iespējot vertikālo ritināšanu aizmugurējā vējā?
- Kā iespējot horizontālo ritināšanu aizmugurējā vējā?
Kā iespējot vertikālo ritināšanu aizmugurējā vējā?
Lai iespējotu vertikālo ritināšanu programmā Tailwind, izmantojiet “ overflow-y-scroll ” lietderības klase ar vēlamo elementu HTML programmā. Tas nodrošina vertikālu ritināšanu un vienmēr parāda ritjoslas, ja vien lietotājs savos sistēmas iestatījumos nav atspējojis “vienmēr redzamās” ritjoslas.
Sintakse
< elements klasē = 'overflow-y-scroll...' > ... elements >
Piemērs: Vertikālās ritināšanas iespējošana
Šajā piemērā mēs izveidosim elastīgu konteineru ar dažiem elastīgiem vienumiem kolonnā un lietosim “ overflow-y-scroll ” lietderība:
< ķermeni >
< div klasē = 'flex flex-col overflow-y-scroll bg-purple-700 p-4 mx-14 mt-5 h-36' >
< div klasē = 'bg-yellow-400 p-2 m-2' > 1 div >
< div klasē = 'bg-yellow-400 p-2 m-2' > 2 div >
< div klasē = 'bg-yellow-400 p-2 m-2' > 3 div >
< div klasē = 'bg-yellow-400 p-2 m-2' > 4 div >
< div klasē = 'bg-yellow-400 p-2 m-2' > 5 div >
< div klasē = 'bg-yellow-400 p-2 m-2' > 6 div >
div >
ķermeni >
Šeit, vecākajā
- ' flex ” klase tiek izmantota, lai pielāgotu bērna elementa izmērus, pamatojoties uz pieejamo vietu, izveidojot elastīgu izkārtojumu.
- ' flex-col ” klase iestata konteinera elastīgo virzienu uz kolonnu.
- ' overflow-y-scroll ” klase nodrošina vertikālo ritināšanu.
- ' bg-violeta-700 ” klase iestata purpursarkano krāsu konteinera fonam.
- ' p-4 ” klase komplektē 4 polsterējuma vienības uz konteinera visām pusēm.
- ' mx-14 ” klase piemēro 14 rezervju vienības uz konteinera x ass.
- ' mt-5 ” klase piemēro 5 rezerves vienības konteinera augšpusē.
- ' h-36 ” klase nosaka konteinera augstumu uz 36 vienībām.
Bērnā
- ' bg-dzeltens-400 ” klase iestata režģa vienumu fonu uz dzeltenu.
- ' p-2 ” klase pievieno 3 vienību polsterējuma saturam flex vienumu iekšpusē.
- ' m-2 ” klase nosaka 2 vienību rezervi elastīgajiem vienumiem.
Izvade
Iepriekš minētajā izvadā var redzēt, ka vertikālā ritināšana ir veiksmīgi iespējota.
Kā iespējot horizontālo ritināšanu aizmugurējā vējā?
Lai iespējotu horizontālo ritināšanu programmā Tailwind, izmantojiet “ pārpilde-x-scroll ” lietderības klase ar konkrēto elementu HTML programmā. Tas nodrošina horizontālo ritināšanu un vienmēr parāda ritjoslas, ja vien lietotājs savos sistēmas iestatījumos nav atspējojis “vienmēr redzamās” ritjoslas.
Sintakse
< elements klasē = 'overflow-x-scroll ...' > ... elements >
Piemērs: Horizontālās ritināšanas iespējošana
Šajā piemērā mēs izveidosim elastīgu konteineru ar dažiem elastīgiem vienumiem pēc kārtas un lietosim “ pārpilde-x-scroll ” lietderība:
< ķermeni >< div klasē = 'flex flex-row overflow-x-scroll space-x-24 bg-purple-700 p-4 mx-14 mt-5 h-36' >
< div klasē = 'bg-yellow-400 p-2 m-2' > 1 div >
< div klasē = 'bg-yellow-400 p-2 m-2' > 2 div >
< div klasē = 'bg-yellow-400 p-2 m-2' > 3 div >
< div klasē = 'bg-yellow-400 p-2 m-2' > 4 div >
< div klasē = 'bg-yellow-400 p-2 m-2' > 5 div >
< div klasē = 'bg-yellow-400 p-2 m-2' > 6 div >
div >
ķermeni >
Šeit vecākajā
Izvade
Iepriekš redzamā izvade norāda, ka horizontālā ritināšana ir veiksmīgi iespējota.
Secinājums
Lai iespējotu vertikālo un horizontālo ritināšanu programmā Tailwind, overflow-y-scroll ' un ' pārpilde-x-scroll ” tiek izmantotas attiecīgi lietderības klases. Šīs utilītas tiek lietotas vēlamajiem elementiem HTML programmā, lai iespējotu vertikālo un horizontālo ritināšanu un vienmēr rādītu ritjoslas. Šajā rakstā ir parādīta metode, kā iespējot vertikālo un horizontālo ritināšanu programmā Tailwind.