Dieser Artikel soll Folgendes veranschaulichen:
Wie verwende ich „overflow-auto“ in Tailwind?
Der ' Überlauf-Auto Die Klasse „fügt automatisch Bildlaufleisten hinzu, wenn der Inhalt überläuft. Die Bildlaufleiste wird nicht angezeigt, wenn der Inhalt nicht überläuft. Um „overflow-auto“ in Tailwind zu verwenden, erstellen Sie ein HTML-Programm und fügen Sie „ Überlauf-Auto ” Utility-Klasse zum gewünschten Element im HTML-Programm.
Syntax
< Element Klasse = „overflow-auto …“ > ... Element >
Beispiel
In diesem Beispiel wenden wir an „Überlauf-Auto“ Dienstprogramm für die
Container: < Körper >
< div Klasse = „overflow-auto bg-purple-300 p-4 mx-16 mt-5 h-32 text-justify“ >
Tailwind CSS bietet verschiedene „Überlauf“-Dienstprogramme, wie „overflow-auto“, „overflow-scroll“, „overflow-hidden“, „overflow-visible“ usw. Diese Dienstprogramme bestimmen, wie ein bestimmtes Element mit dem Inhalt umgeht, der über den Container hinausgeht Größe. Jedes Dienstprogramm bietet einzigartige Funktionen, ihr Endziel bleibt jedoch dasselbe, nämlich die Steuerung des Überlaufverhaltens des ausgewählten Elements.
< / div >
< / Körper >
- „Überlauf-Auto“ Die Klasse wird verwendet, um die Bildlaufleisten zum hinzuzufügen Container und zeigen Sie sie nur an, wenn ein Scrollen erforderlich ist.
- „bg-purple-300“ Die Klasse legt die violette Farbe auf die Hintergrundfarbe des Containers fest.
- „p-4“ Die Klasse legt 4 Polstereinheiten an allen Seiten des Containers fest.
- „mx-16“ Die Klasse wendet die 16 Margin-Einheiten auf der x-Achse des Containers an.
- „mt-5“ Die Klasse wendet die 5 Einheiten Rand auf die Oberseite des Containers an.
- „h-32“ Die Klasse legt die Höhe des Containers auf 32 Einheiten fest.
- „Text-Rechtfertigung“ Die Klasse richtet den Text des Inhalts im Container aus.
Ausgang
Die obige Ausgabe zeigt eine vertikale Bildlaufleiste, wenn der Text überläuft. Dies weist darauf hin, dass die „Überlauf-Auto“ Das Dienstprogramm wurde erfolgreich auf das Element angewendet.
Wie verwende ich „Overflow-Scroll“ in Tailwind?
Dieses Dienstprogramm fügt die Bildlaufleisten zum Container hinzu und zeigt sie immer an, auch wenn das Scrollen nicht erforderlich ist. Es ermöglicht auch das Scrollen in alle Richtungen. Um den „Overflow-Scroll“ in Tailwind zu verwenden, erstellen Sie ein HTML-Programm und fügen Sie das hinzu „Überlauf-Scroll“ Dienstprogrammklasse für das jeweilige Element im HTML-Programm.
Syntax
< Element Klasse = „Überlauf-Scroll …“ > ... Element > Beispiel
In diesem Beispiel wenden wir an „Überlauf-Scroll“ Dienstprogramm für die
< div Klasse = „overflow-scroll bg-purple-300 p-4 mx-16 mt-5 h-32 text-justify“ >
Tailwind CSS bietet verschiedene „Überlauf“-Dienstprogramme, wie „overflow-auto“, „overflow-scroll“, „overflow-hidden“, „overflow-visible“ usw. Diese Dienstprogramme bestimmen, wie ein bestimmtes Element mit dem Inhalt umgeht, der über den Container hinausgeht Größe. Jedes Dienstprogramm bietet einzigartige Funktionen, ihr Endziel bleibt jedoch dasselbe, nämlich die Steuerung des Überlaufverhaltens des ausgewählten Elements.
< / div >
< / Körper >
Hier das „Überlauf-Scroll“ Die Klasse wird verwendet, um die Bildlaufleisten zum hinzuzufügen
Container und zeigt sie immer an.Ausgang
In der obigen Ausgabe sind sowohl vertikale als auch horizontale Bildlaufleisten zu sehen. Dies weist darauf hin, dass die „Überlauf-Scroll“ Das Dienstprogramm wurde erfolgreich auf das Element angewendet.
Abschluss
Um „overflow-auto“ und „overflow-scroll“ in Tailwind zu verwenden, ist es erforderlich, das hinzuzufügen „Überlauf-Auto“ Und „Überlauf-Scroll“ Utility-Klassen den gewünschten Elementen im HTML-Programm zuordnen. Beide Dienstprogrammklassen fügen den angegebenen Elementen Bildlaufleisten hinzu. Die Klasse „overflow-auto“ zeigt Bildlaufleisten jedoch nur dann an, wenn ein Bildlauf erforderlich ist, während die Klasse „overflow-scroll“ sie immer anzeigt, auch wenn kein Bildlauf erforderlich ist. Dieser Artikel hat die Methoden zur Verwendung von „overflow-auto“ und „overflow-scroll“ in Tailwind veranschaulicht.