In diesem Artikel wird das Verfahren zum Anwenden der Eigenschaft „Mindesthöhe“ auf Schweben, Fokus und andere Zustände in Tailwind beschrieben.
Notiz: Um mehr über Mindestgrößenklassen in Tailwind zu erfahren, lesen Sie hier Artikel auf unserer Website.
Wie wende ich die Min-Height-Eigenschaft auf Schweben, Fokus und andere Zustände im Rückenwind an?
Tailwind stellt Standardzustandsvarianten bereit, die mit den Designeigenschaften versehen werden können. Zu diesen Zustandsvarianten gehören „Hover“, „Focus“ und „Active“. Die Beschreibung dieser Zustandsvarianten lautet wie folgt:
- Der' schweben Der Zustand „wird immer dann ausgelöst, wenn sich der Mauszeiger über einem Element befindet.
- Der ' Fokus Der Zustand wird immer dann ausgelöst, wenn das Element im Fokus ist.
- Der ' aktiv Der Zustand wird immer dann ausgelöst, wenn das Element aktiviert oder angeklickt wird.
Lassen Sie uns die Eigenschaft „Mindesthöhe“ nacheinander für jeden dieser Zustände verwenden.
Verwenden der Eigenschaft „Mindesthöhe“ mit Schwebezustand
Um das „ Mindesthöhe ”-Klasse mit einer Hover-State-Variante in Tailwind wird die folgende Syntax verwendet:
< div Klasse = „hover:min-h-{size}…“ > < / div >
Lassen Sie uns die oben definierte Syntax in einer Demonstration verwenden. In diesem Beispiel erhöhen wir die Mindesthöhe eines Elements, wann immer sich der Mauszeiger über dem Element befindet.
< div Klasse = „min-h-fit abgerundet-md bg-blau-700 text-center text-white hover:min-h-screen“ >Bewegen Sie den Mauszeiger, um das Minimum zu erhöhen Höhe < / div >Die Erklärung des obigen Codes lautet wie folgt:
- Der ' min-w-fit Die Klasse „Legt die minimale Höhenbeschränkung auf die Höhe fest, die das div-Element benötigt, um zu seinem Inhalt zu passen.
- Der ' hover:min-w-screen Die Klasse „“ bietet eine Mindesthöhenbeschränkung von 100 % der Bildschirmgröße.
- Der ' gerundet-md ',' bg-{color}-{number} ',' Text-Center ', Und ' Textweiß „Klassen sind für abgerundete Ecken, Hintergrundfarbe, zentrierten Text und weiße Textfarbe für das div-Element verantwortlich. Die Ecken des div-Elements sind abgerundet.
Ausgabe:
Aus der folgenden Ausgabe geht hervor, dass die Mindesthöhe des Elements auf 100 % der Bildschirmgröße ansteigt, wenn der Mauszeiger darüber schwebt.
Verwenden der Eigenschaft „Mindesthöhe“ mit Fokusstatus
Um das „ Mindesthöhe ”-Klasse mit dem Fokusstatus in Tailwind wird die folgende Syntax verwendet:
< div Klasse = „focus:min-h-{size}…“ > < / div >Lassen Sie uns die oben definierte Syntax in einer Demonstration verwenden. In diesem Beispiel erhöht sich die Mindesthöhe eines Eingabefelds, wenn der Benutzer darauf fokussiert.
< Eingang Platzhalter = „Konzentrieren Sie sich auf dieses Eingabefeld“ Klasse = „min-h-0 h-fit w-48 abgerundet-md bg-grau-200 text-center focus:min-h-[35 %]“ >< / Eingang >Die Erklärung des obigen Codes lautet wie folgt:
- Ein ' Eingang Das Feld „“ wird mit etwas Text im Platzhalterattribut erstellt.
- Es wird eine Mindesthöhenbeschränkung von 0 Pixel mit dem „ min-h-0 ' Klasse. Daher hat der Entwickler die Standardhöhe des Elements auf die Höhe festgelegt, die erforderlich ist, um in den Inhalt zu passen, indem er „ h-fit ' Klasse.
- Der ' Fokus:min-h-[35%] Die Klasse „“ erhöht die minimale Höhenbeschränkung des Eingabefelds, wenn der Benutzer sich darauf konzentriert.
Ausgabe:
Aus der folgenden Ausgabe geht hervor, dass die Höhe des Eingabefelds zunimmt, wenn der Benutzer sich darauf konzentriert. Dies liegt daran, dass die Mindesthöhenbeschränkung von 0 Pixel auf 35 % der Bildschirmhöhe steigt.
Verwenden der Eigenschaft „Mindesthöhe“ mit aktivem Zustand im Rückenwind
Um das „ Mindesthöhe ”-Eigenschaft mit der aktiven Zustandsvariante in Tailwind wird die folgende Syntax verwendet:
< div Klasse = „active:min-h-{size}…“ > < / div >Lassen Sie uns die oben definierte Syntax in einer Demonstration verwenden. In diesem Beispiel erhöht sich die Mindesthöhe der Schaltfläche, wenn der Benutzer aktiv darauf klickt.
< Taste Klasse = „min-h-0 h-fit w-48 abgerundet-md bg-blau-300 text-center aktiv:min-h-[35 %]“ > Klicken Sie zum Erhöhen Höhe < / Taste >Eine Schaltfläche wird mit einer minimalen Höhenbeschränkung von 0 Pixel erstellt. Allerdings verwendet man „ aktiv:min-h-[35%] „Die Mindesthöhenbeschränkung erhöht sich von 0 Pixel auf 35 % der Bildschirmgröße, wenn auf die Schaltfläche geklickt wird.
Ausgabe:
In der folgenden Ausgabe ist zu sehen, dass die Mindesthöhe der Schaltfläche zunimmt, wenn der Benutzer darauf klickt.
Dabei geht es darum, die Eigenschaft „Mindesthöhe“ auf Tailwind-Hover, Focus und die anderen Zustände in Tailwind anzuwenden.
Abschluss
Die Zustandsvarianten wie Hover, Focus und Active in Tailwind ermöglichen es Benutzern, dynamische Design-Layouts zu erstellen. Um die Mindesthöhenklasse mit Zustandsvarianten in Tailwind zu verwenden, muss „ hover:min-h-{Wert} ',' focus:min-h-{Wert} ', Und ' aktiv:min-h-{Wert} ”-Klassen werden verwendet. In diesem Artikel wird das Verfahren zum Anwenden von Schweben, Fokus und anderen Zuständen mit der Mindesthöhenklasse in Tailwind beschrieben.