Jak korzystać z zawisu, fokusu i innych stanów w Tailwind?

CSS oferuje programistom różnorodne frameworki do projektowania dynamicznych stron internetowych. Jest bardziej sympatyczny, ponieważ zapewnia wszystkie ważne funkcje i narzędzia w jednym miejscu. Nie musisz więc używać innych frameworków. Framework Tailwind w CSS jest najpowszechniej stosowany, ponieważ oszczędza czas użytkownika na pisaniu nadmiernych CSS.

W tym przewodniku opisano użycie najechania myszką, fokusu i innych stanów w Tailwind.

Jak korzystać z zawisu, fokusu i innych stanów w Tailwind?

Projektując strony internetowe, konieczne jest dodanie dynamicznych i atrakcyjnych elementów, aby zachować interakcję z użytkownikami. Funkcje Tailwind można wykorzystać do tworzenia interaktywnych i dynamicznych stron bez konieczności pisania dodatkowego niestandardowego CSS. Niektóre funkcje to „najechanie”, „skupienie” i „aktywność”, które pomagają w dodaniu atrakcyjności projektów.

Używanie wariantu najechania w HTML

Właściwość hover służy do stylizowania elementu HTML, gdy użytkownik przesuwa kursor myszy nad określonym elementem. Pomaga zapewnić płynne wrażenia.

Krok 1: Zastosuj właściwość „hover” w HTML
Utwórz plik HTML i zastosuj właściwość hover do jakiegoś elementu w kodzie. Aby mieć pomysł, spójrz na kod podany poniżej:

W tym kodzie:

• Przycisk o nazwie „ Unieś mnie! ” jest tworzony przez znacznik przycisku.
• „ bg-green-500 ” ustawia kolor tła przycisku na zielony.
• „ najedź kursorem: bg-blue-500 ” zmienia kolor przycisku z zielonego na niebieski po najechaniu na niego myszką.
• Tekst na przycisku ma kolor biały „ tekst-biały ' I ' pogrubiona czcionka ” powoduje pogrubienie czcionki.
• Kształt przycisku jest zaokrąglany przez „ bułczasty ”.

Krok 2: Podgląd wyników
Po wykonaniu powyższego kodu ostateczny widok wygląda następująco:

Można zauważyć, że przycisk zmienia kolor po najechaniu na niego kursorem myszy.

Używanie wariantu fokusu w HTML

Właściwość focus służy do stylizowania elementów HTML w taki sposób, że gdy użytkownik kliknie element, zostanie on podświetlony, aby zwrócić jego uwagę.

Krok 1: Zastosuj właściwość Focus w kodzie HTML
Utwórz plik HTML i zastosuj właściwość focus do żądanego elementu. Aby uzyskać wrażenie, rozważ poniższy kod:

W tym kodzie:

• „ przewód ” klasa tworzy flex.
• „ wyśrodkuj ” uzasadnia wyrównanie treści do środka.
• „ centrum przedmiotów ” dopasowuje obiekty do środka ekranu.
• „ ekran h ” ustawia rozmiar ekranu zgodnie z rzutnią.
• „ bg-niebieski-200 ” ustawia kolor tła na niebieski.
• Zostanie utworzone pole wprowadzania tekstu.
• „ ostrość: bg-green-300 ” zmienia kolor pola wprowadzania na zielony po kliknięciu przez użytkownika.
• „ w-64 ” ustawia szerokość na 64px.
• „ godz-10 ” ustawia wysokość na 10 pikseli.
• „ px-4 ” dodaje dopełnienie o wielkości 4 pikseli u góry i po lewej stronie.
• „ py-2 ” dodaje dopełnienie o wielkości 2 pikseli na górze i na dole.

Krok 2: Podgląd właściwości Fokus
Zapisz kod HTML i otwórz utworzoną przez niego stronę internetową. Następnie przesuń kursor na pole wprowadzania i kliknij je, a nastąpi poniższa zmiana:

Używanie aktywnego wariantu w HTML

Ta właściwość służy do stylizowania elementów pod warunkiem, że użytkownik dynamicznie kliknie element. Stan aktywny to okres czasu od momentu aktywacji kursora do jego stanu zwolnienia.

Składnia

Do wybranego elementu zostanie zastosowana określona właściwość CSS.

Krok 1: Zastosuj aktywny wariant w kodzie HTML
Utwórz plik HTML i zastosuj aktywną właściwość do jakiegoś elementu, którym w poniższym przypadku jest przycisk:

W tym kodzie:

• „ bg-green-600 ” ustawia kolor tła na zielony.
• „ str. 4 ” dodaje dopełnienie 4px.
• „ zaokrąglone-md ” sprawia, że ​​kształt przycisku jest zaokrąglony.
• „ transformacja przejściowa ” służy do przekształcania przycisku na krótki czas, który jest ustawiony przez „ transformacja czasu trwania-400 ”.
• „ aktywny:skala-110 ” zmienia przycisk na większy.

Krok 2: Podgląd wyników
Zapisz powyższy kod w pliku HTML i wyświetl podgląd utworzonej przez niego strony internetowej. Strona internetowa będzie wyglądać następująco:

Można zauważyć, że rozmiar przycisku zwiększa się, gdy mysz go przytrzymuje, a po zwolnieniu powraca do stanu początkowego.

Wniosek

Aby używać stanów najechania, fokusu i innych w Tailwind, użyj predefiniowanych klas stanów, takich jak „najechanie”, i zastosuj do nich pewne właściwości stylizacji, takie jak zmiana koloru, utworzenie pierścienia fokusu i tak dalej. Narzędzia wyświetlające służą do prezentowania skalowalnych wyników. W tym artykule zademonstrowano metodę użycia wskaźnika myszy, fokusu i innych stanów w Tailwind.