So wenden Sie Hover-, Fokus- und Aktivzustände mit Textdekorationsdicke in Rückenwind an

So Wenden Sie Hover Fokus Und Aktivzustande Mit Textdekorationsdicke In Ruckenwind An



Beim Erstellen inhaltsbasierter Websites besteht häufig die Anforderung, dass der Programmierer die wichtigen Terminologien hervorhebt, um die Benutzererfahrung und das Verständnis zu verbessern. In einem solchen Fall ist die „ Dicke der Textdekoration In Tailwind kommt das Dienstprogramm zum Einsatz, das je nach Layout der Website individuell integriert werden kann.

In diesem Tutorial werden folgende Inhalte erläutert:

Wie wende ich Hover-, Fokus- und Aktivzustände mit Textdekorationsdicke im Rückenwind an?

Der ' Dicke der Textdekoration „ kann auf diese Zustände angewendet werden, indem der Zielzustand und die „ Textdekorationsdicke ”-Eigenschaft, gefolgt vom Zieldickenwert in Pixeln. Durch die Integration dieser Ansätze ändert sich die Dicke der Textdekoration (in Pixel), wenn Sie mit der Maus darüber fahren, das Element fokussiert oder das Element aktiv ist. Diese Pixel können „ 1px ',' 2px ',' 4px ' oder ' 8px “. Es gilt: Je mehr Pixel, desto größer die Dicke.





Beispiel 1: Anwenden der Textdekorationsdicke im Schwebezustand

In diesem Beispiel wird das „ Textdekorationsdicke „Eigenschaft mit dem“ schweben ”-Status, um die Dicke beim Bewegen der Maus festzulegen:





< html >

< Kopf >

< Meta Zeichensatz = „utf-8“ >

< Meta Name = „Ansichtsfenster“ Inhalt = „width=device-width, initial-scale=1“ >

< Skript src = „https://cdn.tailwindcss.com“ >< / Skript >< / Kopf >

< Körper >

< Textbereich Klasse = „unterstreichen hover:decoration-4“ > James ist pünktlich < / Textbereich >

< / Körper >

< / html >

Fügen Sie in diesem Codeausschnitt den CDN-Pfad in das „“-Tag ein, um die Tailwind-Funktionen zu nutzen. Danach innerhalb der „ ”-Element, geben Sie das „ schweben ” Zustand zusammen mit dem angewendeten „ Textdekorationsdicke ”-Eigenschaft, die die Dekorationsdicke von der Standardunterstreichung auf eine erhöhte Dicke von „4“ Pixeln festlegt, wenn Sie mit der Maus darüber fahren.



Ausgabe



Diese Ausgabe impliziert, dass die Stärke der Textdekoration, d. h. der Unterstreichung, entsprechend eingestellt wird.



Beispiel 2: Anwenden der Textdekorationsdicke mit dem Status „Fokus“.

Der folgende Beispielcode implementiert die Textdekorationsdicke auf einen Zielpixelwert, wenn das Element mithilfe der Option „fokussiert“ wird. Tab ' Schlüssel:



< html >

< Kopf >

< Meta Zeichensatz = „utf-8“ >

< Meta Name = „Ansichtsfenster“ Inhalt = „width=device-width, initial-scale=1“ >

< Skript src = „https://cdn.tailwindcss.com“ >< / Skript >< / Kopf >

< Körper >

< Textbereich Klasse = „Dekoration-1 Fokus unterstreichen: Dekoration-4“ >James ist pünktlich< / Textbereich >

< / Körper >

< / html >

Wiederholen Sie in diesem Codeblock die besprochenen Ansätze zur Einbindung des CDN-Pfades und des „ ' Element. Geben Sie nun die Standarddicke zusammen mit der Übergangsdicke an, d. h. „4“ Pixel mit dem „ Fokus ”-Status, um die Änderung auf den ausgelösten Status anzuwenden.

Notiz: Der Standard ' unterstreichen ' und das ' unterstreichen Dekoration-1 „Eigenschaften führen zum gleichen Ergebnis.

Ausgabe

Anhand dieser Ausgabe kann überprüft werden, dass die Dicke der Textdekoration entsprechend geändert wird.

Beispiel 3: Anwenden der Textdekorationsdicke im „aktiven“ Zustand

In diesem Codeausschnitt wird die Dicke der Textdekoration geändert, sobald das Element aktiv ist:



< html >

< Kopf >

< Meta Zeichensatz = „utf-8“ >

< Meta Name = „Ansichtsfenster“ Inhalt = „width=device-width, initial-scale=1“ >

< Skript src = „https://cdn.tailwindcss.com“ >< / Skript >< / Kopf >

< Körper >

< Textbereich Klasse = „Dekoration-1 aktiv unterstreichen:Dekoration-8“ >James ist pünktlich< / Textbereich >

< / Körper >

< / html >

Fügen Sie diesen Codezeilen zufolge auch den CDN-Pfad und das Element „