W tym artykule przedstawiono użycie najechania kursorem, skupienia i innych stanów z właściwościami pozycji w Tailwind.
Jak używać zawisu, fokusu i innych stanów z właściwością pozycji w Tailwind?
Najechanie kursorem, fokus i inne stany w Tailwind służą do stylizowania elementów w Tailwind, zapewniając atrakcyjny i przyjazny dla użytkownika interfejs oraz wciągające wrażenia dla użytkowników. Czasami należy zastosować właściwość pozycji, aby utrzymać doświadczenie na najwyższym poziomie.
Metoda 1: Używanie wariantu najechania z właściwością pozycji
Wariant najechania służy do stylizowania wybranych elementów, gdy użytkownik najedzie kursorem na wybrany element. „ pozycja Atrybut ” może być używany w połączeniu z atrybutem „ unosić się ”, aby ustawić pozycję przed i po najechaniu myszką. Ta para służy do stworzenia angażującego doświadczenia dla użytkownika.
Krok 1: Dodaj właściwość Hover z pozycją w HTML
W poniższym kodzie właściwość hover jest stosowana wraz z właściwością position na „ przycisk ' element:
< ciało >
< przycisk klasa = „względny w-40 h-12 bg-blue-500 hover:absolute hover:translate-x-4 hover:translate-y-4 ' >
< P klasa = „tekst-biały środek tekstu” > Unieś mnie < / P >
< / przycisk >
< / ciało >
W tym kodzie:
- „ względny ” class ustawia przycisk względem strony nadrzędnej.
- „ w-40 ” ustawia szerokość na 40 pikseli.
- „ godz-12 ” ustawia wysokość na 12 pikseli.
- „ bg-blue-500 ” ustawia kolor tła na niebieski.
- „ najedź: bezwzględnie ” zmienia względną pozycję przycisku na bezwzględną, gdy najedzie się na niego kursorem myszy.
- „ najedź kursorem: tłumacz-x-4 ” przesuwa przycisk o 4 piksele w prawo na osi x i jednocześnie o 4 piksele w dół o „ najedź kursorem: tłumacz-y-4 ”.
- Tekst jest wyśrodkowany przez „ centrum tekstowe ”.
Krok 2: Weryfikacja
Wyświetl podgląd strony utworzonej za pomocą powyższego kodu, która wygląda następująco:
Dane wyjściowe pokazują, że element został przesunięty w prawo i w dół o 4 piksele.
Metoda 2: Używanie wariantu fokusu z właściwością pozycji
Wariant fokusowy służy do stylizowania elementów HTML w celu przyciągnięcia uwagi użytkownika i uwypuklenia niektórych elementów. Pozycję można również zastosować w połączeniu, aby ustawić obiekt względem strony nadrzędnej lub bezwzględnie. Ma to na celu utrzymanie zaangażowania użytkownika.
Krok 1: Dodaj właściwość Focus z pozycją w HTML
Utwórz plik HTML i zastosuj właściwość focus w odpowiedniej pozycji. Na przykład położenie względne jest stosowane do pola wejściowego w poniższym kodzie:
< / ciało >
W tym kodzie:
- Ustaw pozycję „ wejście „elementy do” względny ”.
- „ fokus: tłumaczenie-x-4 ” przesuwa przycisk o 4 piksele w prawo na osi x i jednocześnie o 4 piksele w dół o „ fokus: tłumacz-y-4 ”, gdy użytkownik kliknie pole wprowadzania.
- „ fokus: zarys-2 ” tworzy kontur wokół pola tekstowego po kliknięciu przez użytkownika.
Krok 2: Sprawdź dane wyjściowe
Wyświetl podgląd strony utworzonej za pomocą kodu, aby zauważyć zmianę:
Powyższe dane wyjściowe pokazują, że styl został zastosowany do wybranego elementu po jego skupieniu.
Używanie aktywnego wariantu z właściwością pozycji.
Wariant aktywny służy do stylizowania elementów HTML w celu zdefiniowania stanu, gdy użytkownik kliknie i przytrzyma przycisk lub inny element. Właściwość position może sprawić, że dane wyjściowe będą bardziej atrakcyjne dla użytkowników, tworząc bardziej dynamiczne wrażenia.
Krok 1: Dodaj właściwość Hover z pozycją w HTML
Utwórz plik HTML i zastosuj aktywny wariant w połączeniu z właściwością position. Na przykład te właściwości są stosowane do przycisku w poniższym przykładzie kodu:
< przycisk klasa = „względny w-48 h-12 bg-blue-500 aktywny:tłumacz-y-2 aktywny:bg-green-400” >
< Zakres klasa = „tekst-biały” >Kliknij mnie< / Zakres >
< / przycisk >
< / ciało >
W powyższym kodzie:
- Ustaw pozycję „ przycisk „element do” względny ”.
- „ bg-blue-500 ” ustawia kolor tła przycisku na niebieski.
- „ aktywny: tłumacz-y-2 ” przesuwa przycisk 2px w dół i zmienia kolor przycisku na zielony poprzez „ aktywny: bg-green-400 ”.
Krok 2: Sprawdź dane wyjściowe
Wyświetl podgląd strony utworzonej za pomocą powyższego kodu, a następnie kliknij i przytrzymaj przycisk, aby zobaczyć zmianę:
Powyższy gif pokazuje, że styl wybranego elementu przycisku zmienia się, gdy staje się on aktywny.
To wszystko, aby zastosować najechanie kursorem, fokus i inne stany z właściwością pozycji w Tailwind.
Wniosek
Stany najechania, skupienia i innych stanów mogą być używane z właściwością pozycji, używając predefiniowanych klas najechania, skupienia i innych stanów, a następnie stosując atrybuty klasy pozycji, takie jak „ absolutny „”, „ względny ” i tak dalej w połączeniu. W tym blogu pokazano, jak używać najechania myszką, fokusu i innych stanów z narzędziem pozycjonowania w Tailwind.