Der ' H-Bildschirm Die Klasse „in Tailwind“ wird verwendet, um einem HTML-Element die Höhe des Ansichtsfensters zuzuweisen. Viewport ist nur ein anderer Name für die Bildschirmgröße eines Clients. Mithilfe dieser Funktion kann der Entwickler ganz einfach das gesamte Ansichtsfenster auswählen. H-Bildschirm ”-Klasse und wenden Sie dann entsprechend mehrere Tailwind-Klassen an.
In diesem Artikel wird das Verfahren zum Hinzufügen der Ansichtsfensterhöhe zu einem Element in Tailwind mithilfe der Funktion „ H-Bildschirm ' Klasse.
Wie stelle ich eine Ansichtsfensterhöhe eines Elements mithilfe der „h-screen“-Klasse in Tailwind ein?
Wenn einem Element die Höhe des Ansichtsfensters mithilfe des „ H-Bildschirm ”-Klasse, passt es seine Höheneigenschaft automatisch an den Bildschirm des Clients an. Um die Höhe des Ansichtsfensters in Tailwind zu verwenden, befolgen Sie die unten angegebene Konvention:
< div Klasse = „H-Bildschirm“ > Hallo < / div >
Aus der obigen Demonstration geht klar hervor, dass „ H-Bildschirm „wird im Klassenattribut des Elements zusammen mit verschiedenen anderen Tailwind-Klassen zum Entwerfen des Layouts verwendet.
Lassen Sie uns ein Dummy-Dashboard erstellen und der Seitenleiste des Dashboard-Bildschirms eine Ansichtsfensterhöhe zuweisen.
< div Klasse = 'biegen' >
< div Klasse = „w-56 h-screen abgerundet-lg bg-blau-600 text-center text-cyan-50 py-6 text-2xl font-bold“ >Dashboard
< ul Klasse = „text-lg py-8 space-y-7“ >
< Das >Team< / Das >
< Das >Projekte< / Das >
< Das >Berichte< / Das >
< Das >Dokumente< / Das >
< / ul >
< / div >
< div Klasse = „text-center text-3xl py-8 ps-5“ >Willkommen im Dashboard!< / div >
< / div >
Erklärung des Codes:
- Zuerst ein ' div Es wird ein Element mit der Klasse „ erstellt. biegen “, richtet diese Klasse die vorhandenen Elemente in einer horizontalen Linie aus.
- Als nächstes erstellen Sie ein weiteres „ div ” mit 8px Polsterung oben und unten unter Verwendung der Option „ py-2 ”-Klasse und weisen Sie ihr mithilfe der Funktion „“ eine feste Breite zu. w-56 ' Klasse. Als nächstes stellen Sie die Höhe des Elements auf die Höhe des Ansichtsfensters ein, indem Sie „ H-Bildschirm ' Klasse. Die Ecken des Containers sind auf abgerundet eingestellt.
- Der ' bg-{color}-{number} Die Klasse „wird verwendet, um dem Container eine Hintergrundfarbe bereitzustellen. Der ' Text-Center Die Klasse „richtet den Textinhalt zentriert aus. Die Schriftstärke für den Text ist auf „ deutlich “, und die Schriftgröße ist „ 2xl “.
- Als nächstes wird eine ungeordnete Liste „< ul >“ wird mit großer Schriftgröße und einem „ 48px ” margin-top unter Verwendung der Rückenwindklasse „space-y“.
- Anschließend werden mit dem Befehl „<“ vier Listenelemente erstellt Das >“-Tags.
- Ein anderer ' div Das Element wird mit 32 Pixeln von oben nach unten und 20 Pixeln Inline-Start-Abstand unter Verwendung der Funktion „ erstellt. py“ und „ps ' Klassen.
Die Ausgabe für den oben erläuterten Code lautet wie folgt:
Aus der obigen Ausgabe geht hervor, dass die Dashboard-Seitenleiste die Ansichtsfensterhöhe des Bildschirms hat. Das ist alles über den Zweck des „ H-Bildschirm ”-Klasse in Tailwind.
Abschluss
Der ' H-Bildschirm Die Klasse „in Tailwind“ wird verwendet, um einem Element die Höhe des Ansichtsfensters zuzuweisen, d. h. die Höhe des Bildschirms des Clients. Verwendung der ' H-Bildschirm ”-Klasse erbt das Element automatisch die Bildschirmhöhe. Um die Höhe des Ansichtsfensters in Tailwind zu verwenden, muss „ H-Bildschirm Die Eigenschaft „ muss als Wert für die Eigenschaft „ übergeben werden. Klasse ” Attribut wie „< div class= „h-screen ”>”. In diesem Artikel wird das Verfahren zur Verwendung des „ H-Bildschirm ”-Klasse in Tailwind.