Dieser Artikel veranschaulicht die Verwendung von Hover, Focus und anderen Zuständen mit Positionseigenschaften in Tailwind.
Wie verwende ich Hover, Focus und andere Zustände mit der Positionseigenschaft in Tailwind?
Der Hover-, Fokus- und andere Status in Tailwind werden verwendet, um Elemente in Tailwind zu gestalten und den Benutzern eine attraktive und benutzerfreundliche Oberfläche und ein ansprechendes Erlebnis zu bieten. Manchmal wird die Positionseigenschaft eingesetzt, um das Erlebnis auf höchstem Niveau zu halten.
Methode 1: Hover-Variante mit Positionseigenschaft verwenden
Die Hover-Variante wird verwendet, um ausgewählte Elemente zu formatieren, wenn der Benutzer den Cursor über das ausgewählte Element bewegt. Der ' Position Das Attribut „kann in Verbindung mit „ verwendet werden schweben ” um die Position vor und nach dem Schwebeflug festzulegen. Dieses Paar wird verwendet, um dem Benutzer ein ansprechendes Erlebnis zu bieten.
Schritt 1: Fügen Sie die Hover-Eigenschaft mit Position in HTML hinzu
Im folgenden Code wird die Hover-Eigenschaft zusammen mit der Positionseigenschaft auf „ Taste ' Element:
< Körper >
< Taste Klasse = „relative w-40 h-12 bg-blue-500 hover:absolute hover:translate-x-4 hover:translate-y-4“ >
< P Klasse = „text-white text-center“ > Schwebe über mich < / P >
< / Taste >
< / Körper >
In diesem Code:
- Der ' relativ Die Klasse „Setzt die Schaltfläche relativ zur übergeordneten Seite.
- „ w-40 „Setzt die Breite auf 40 Pixel.
- „ h-12 „Setzt die Höhe auf 12 Pixel.
- „ bg-blau-500 „Setzt die Hintergrundfarbe auf Blau.
- „ schweben: absolut „Ändert die relative Position der Schaltfläche in eine absolute, wenn sich der Mauszeiger darüber bewegt.
- „ Hover: Translate-x-4 „Bewegt den Button auf der X-Achse um 4 Pixel nach rechts und gleichzeitig um 4 Pixel nach unten um „ Hover: Translate-y-4 “.
- Der Text wird mittig ausgerichtet durch „ Text-Center “.
Schritt 2: Verifizierung
Sehen Sie sich eine Vorschau der mit dem obigen Code erstellten Webseite an, die wie folgt aussieht:
Die Ausgabe zeigt, dass das Element um 4 Pixel nach rechts und unten verschoben wurde.
Methode 2: Fokusvariante mit Positionseigenschaft verwenden
Die Fokusvariante wird verwendet, um HTML-Elemente so zu gestalten, dass sie die Aufmerksamkeit des Benutzers erregen und einige Elemente hervorheben. Die Position kann auch in Verbindung angewendet werden, um das Objekt relativ oder absolut zur übergeordneten Seite zu positionieren. Dies geschieht, um den Benutzer zu beschäftigen.
Schritt 1: Fügen Sie die Focus-Eigenschaft mit Position in HTML hinzu
Erstellen Sie eine HTML-Datei und wenden Sie die Fokuseigenschaft an einer geeigneten Position an. Im folgenden Code wird beispielsweise die relative Position auf ein Eingabefeld angewendet:
< / Körper >
In diesem Code:
- Stellen Sie die Position des „ Eingang „Elemente zu“ relativ “.
- „ Fokus: Translate-x-4 „Bewegt den Button auf der X-Achse um 4 Pixel nach rechts und gleichzeitig um 4 Pixel nach unten um „ Fokus: Translate-y-4 ” wenn der Benutzer auf das Eingabefeld klickt.
- „ Fokus: Gliederung-2 ” erstellt einen Umriss um das Textfeld, wenn der Benutzer darauf klickt.
Schritt 2: Überprüfen Sie die Ausgabe
Zeigen Sie eine Vorschau der vom Code erstellten Webseite an, um die Änderung zu bemerken:
Die obige Ausgabe zeigt, dass der Stil auf das ausgewählte Element angewendet wurde, als es fokussiert wurde.
Aktive Variante mit Positionseigenschaft verwenden.
Die aktive Variante wird zum Formatieren der HTML-Elemente verwendet, um den Zustand zu definieren, wenn der Benutzer auf eine Schaltfläche oder ein anderes Element klickt und diese gedrückt hält. Die Positionseigenschaft kann die Ausgabe für Benutzer ansprechender machen und ein dynamischeres Erlebnis schaffen.
Schritt 1: Fügen Sie die Hover-Eigenschaft mit Position in HTML hinzu
Erstellen Sie eine HTML-Datei und wenden Sie die aktive Variante in Verbindung mit der Positionseigenschaft an. Im folgenden Codebeispiel werden diese Eigenschaften beispielsweise auf eine Schaltfläche angewendet:
< Taste Klasse = „relative w-48 h-12 bg-blue-500 aktiv:translate-y-2 aktiv:bg-green-400“ >
< Spanne Klasse = „text-weiß“ >Klicken Sie auf mich< / Spanne >
< / Taste >
< / Körper >
Im obigen Code:
- Stellen Sie die Position des „ Taste „Element zu“ relativ “.
- „ bg-blau-500 ” setzt die Hintergrundfarbe der Schaltfläche auf Blau.
- „ aktiv: Translate-y-2 „ verschiebt die Schaltfläche um 2 Pixel nach unten und ändert die Schaltflächenfarbe in Grün um „ aktiv: bg-green-400 “.
Schritt 2: Überprüfen Sie die Ausgabe
Zeigen Sie eine Vorschau der mit dem obigen Code erstellten Webseite an und klicken Sie auf die Schaltfläche und halten Sie sie gedrückt, um die Änderung anzuzeigen:
Das obige GIF zeigt, dass der Stil des ausgewählten Schaltflächenelements geändert wird, wenn es aktiv wird.
Das ist alles, um Hover, Focus und andere Zustände mit der Positionseigenschaft in Tailwind anzuwenden.
Abschluss
Die Zustände „Hover“, „Fokus“ und andere Zustände können mit der Positionseigenschaft verwendet werden, indem die vordefinierten Klassen „Hover“, „Fokus“ und andere Zustände verwendet werden und dann Positionsklassenattribute wie „ absolut ',' relativ “ und so weiter in Verbindung. In diesem Blog wurde gezeigt, wie Sie den Schwebezustand, den Fokus und andere Zustände mit dem Positionsdienstprogramm in Tailwind verwenden.