Przewijanie w pionie i poziomie to sposoby poruszania się po stronie internetowej za pomocą myszy, touchpada lub palca. Przewijanie w pionie jest stosowane, gdy zawartość elementu przekracza wysokość kontenera. Podczas gdy przewijanie w poziomie jest używane, gdy zawartość elementu przekracza szerokość kontenera. Przewijanie w pionie umożliwia użytkownikom przesuwanie strony internetowej w górę iw dół, podczas gdy przewijanie w poziomie umożliwia przesuwanie strony w lewo i w prawo. Tailwind CSS zapewnia klasy narzędzi umożliwiające pionowe i poziome przewijanie stron internetowych.
Ten artykuł będzie przykładem:
Jak włączyć przewijanie w pionie w Tailwind?
Aby włączyć przewijanie w pionie w Tailwind, użyj opcji „ przepełnienie-y-przewiń ” klasa narzędziowa z żądanym elementem w programie HTML. Umożliwia przewijanie w pionie i zawsze pokazuje paski przewijania, chyba że użytkownik wyłączył „zawsze widoczne” paski przewijania w ustawieniach systemowych.
Składnia
< element klasa = 'przepełnienie-z-przewiń...' > ... element >
Przykład: Włączanie przewijania w pionie
W tym przykładzie utworzymy elastyczny kontener z kilkoma elastycznymi elementami w kolumnie i zastosujemy „ przepełnienie-y-przewiń użyteczność:
< ciało >
< dz klasa = 'flex flex-col overflow-y-scroll bg-purple-700 p-4 mx-14 mt-5 h-36' >
< dz klasa = 'bg-żółty-400 p-2 m-2' > 1 dz >
< dz klasa = 'bg-żółty-400 p-2 m-2' > 2 dz >
< dz klasa = 'bg-żółty-400 p-2 m-2' > 3 dz >
< dz klasa = 'bg-żółty-400 p-2 m-2' > 4 dz >
< dz klasa = 'bg-żółty-400 p-2 m-2' > 5 dz >
< dz klasa = 'bg-żółty-400 p-2 m-2' > 6 dz >
dz >
ciało >
Tutaj, w rodzicu
- “ przewód ” służy do dostosowywania rozmiarów elementu podrzędnego na podstawie dostępnej przestrzeni poprzez tworzenie elastycznego układu.
- “ flex-kol ” ustawia kierunek wygięcia kontenera na kolumnę.
- “ przepełnienie-y-przewiń ” umożliwia przewijanie w pionie.
- “ bg-fioletowy-700 ” ustawia fioletowy kolor tła kontenera.
- “ p-4 ” klasa ustawia 4 jednostki wyściółki na wszystkie strony kontenera.
- “ mx-14 ” stosuje 14 jednostek marginesu na osi x kontenera.
- “ mt-5 ” stosuje 5 jednostek marginesu do górnej części kontenera.
- “ h-36 ” ustawia wysokość kontenera na 36 jednostek.
W dziecku
- “ bg-żółty-400 ” ustawia tło elementów siatki na żółty.
- “ p-2 ” dodaje 3 jednostki wypełnienia do zawartości elementów elastycznych.
- “ m-2 ” class ustawia margines 2 jednostek dla elementów elastycznych.
Wyjście
Na powyższym wyjściu widać, że przewijanie w pionie zostało pomyślnie włączone.
Jak włączyć przewijanie w poziomie w Tailwind?
Aby włączyć przewijanie w poziomie w Tailwind, użyj opcji „ przepełnienie-x-przewiń ” klasa narzędziowa z określonym elementem w programie HTML. Umożliwia przewijanie w poziomie i zawsze pokazuje paski przewijania, chyba że użytkownik wyłączył „zawsze widoczne” paski przewijania w swoich ustawieniach systemowych.
Składnia
< element klasa = 'przepełnienie-x-przewiń...' > ... element >
Przykład: Włączanie przewijania w poziomie
W tym przykładzie utworzymy elastyczny kontener z kilkoma elastycznymi elementami w rzędzie i zastosujemy „ przepełnienie-x-przewiń użyteczność:
< ciało >< dz klasa = 'flex flex-row overflow-x-scroll space-x-24 bg-purple-700 p-4 mx-14 mt-5 h-36' >
< dz klasa = 'bg-żółty-400 p-2 m-2' > 1 dz >
< dz klasa = 'bg-żółty-400 p-2 m-2' > 2 dz >
< dz klasa = 'bg-żółty-400 p-2 m-2' > 3 dz >
< dz klasa = 'bg-żółty-400 p-2 m-2' > 4 dz >
< dz klasa = 'bg-żółty-400 p-2 m-2' > 5 dz >
< dz klasa = 'bg-żółty-400 p-2 m-2' > 6 dz >
dz >
ciało >
Tutaj w rodzicu
Wyjście
Powyższe dane wyjściowe wskazują, że przewijanie w poziomie zostało pomyślnie włączone.
Wniosek
Aby włączyć pionowe i poziome przewijanie w Tailwind, „ przepełnienie-y-przewiń ' I ' przepełnienie-x-przewiń ” klasy użyteczności są używane odpowiednio. Te narzędzia są stosowane do żądanych elementów w programie HTML, aby umożliwić przewijanie w pionie i poziomie i zawsze wyświetlać paski przewijania. W tym artykule pokazano metodę włączania przewijania w pionie i poziomie w Tailwind.