Paano Gamitin ang Hover, Focus, at Iba Pang Mga Estado na may Property ng Posisyon sa Tailwind?

Inilalarawan ng artikulong ito ang paggamit ng hover, focus, at iba pang mga estado na may mga katangian ng posisyon sa Tailwind.

Paano Gamitin ang Hover, Focus, at Iba Pang Mga Estado na may Property ng Posisyon sa Tailwind?

Ang hover, focus, at iba pang mga estado sa Tailwind ay ginagamit upang i-istilo ang mga elemento sa Tailwind na nagpapakita ng isang kaakit-akit at user-friendly na interface at nakakaengganyo na karanasan sa mga user. Minsan, ilalapat ang property ng posisyon upang mapanatili ang karanasan sa pinakamataas na pamantayan nito.

Paraan 1: Paggamit ng Hover Variant na may Position Property

Ang variant ng hover ay ginagamit upang i-istilo ang mga napiling elemento kapag inilipat ng user ang cursor sa napiling elementong iyon. Ang ' posisyon Maaaring gamitin ang katangiang 'kasabay ng ' hover ” para itakda ang posisyon bago at pagkatapos ng hover. Ginagamit ang pares na ito upang lumikha ng nakakaengganyong karanasan para sa user.

Hakbang 1: Idagdag ang Hover Property na may Posisyon sa HTML
Sa code sa ibaba, ang hover property ay inilapat sa kahabaan ng position property sa “ pindutan ' elemento:

Sa code na ito:

• Ang ' kamag-anak Itinakda ng klase ang button na nauugnay sa parent page.
• “ w-40 ” itinatakda ang lapad sa 40px.
• “ h-12 ” itinatakda ang taas sa 12px.
• “ bg-blue-500 ” itinatakda ang kulay ng background sa asul.
• “ hover: ganap ” binabago ang relatibong posisyon ng button sa absolute kapag ang mouse cursor ay gumagalaw sa ibabaw nito.
• “ hover: isalin-x-4 Ang ” ay inililipat ang button na 4px pakanan sa x axis at sabay na 4px pababa ng “ hover: isalin-y-4 ”.
• Ang teksto ay nakahanay sa gitna ng ' text-center ”.

Hakbang 2: Pag-verify
I-preview ang webpage na ginawa ng code sa itaas, na ganito ang hitsura:

Ipinapakita ng output na ang elemento ay inilipat sa kanan at pababang direksyon ng 4px.

Paraan 2: Paggamit ng Focus Variant na may Position Property

Ang variant ng focus ay ginagamit upang lagyan ng istilo ang mga elemento ng HTML para makuha ang atensyon ng user at bigyan ng diin ang ilang elemento. Ang posisyon ay maaari ding ilapat kasabay ng pagpoposisyon ng bagay na kamag-anak o ganap sa parent page. Ginagawa ito upang panatilihing nakatuon ang user.

Hakbang 1: Idagdag ang Focus Property na may Posisyon sa HTML
Gumawa ng HTML file at ilapat ang focus property na may angkop na posisyon. Halimbawa, inilapat ang kamag-anak na posisyon sa isang input box sa ibaba ng code:

Sa code na ito:

• Itakda ang posisyon ng ' input 'mga elemento sa' kamag-anak ”.
• “ focus: isalin-x-4 Ang ” ay inililipat ang button na 4px pakanan sa x axis at sabay na 4px pababa ng “ focus: isalin-y-4 ” kapag nag-click ang user sa input box.
• “ pokus: balangkas-2 ” ay gumagawa ng outline sa paligid ng text box kapag na-click ng user.

Hakbang 2: I-verify ang Output
Silipin ang webpage na ginawa ng code upang mapansin ang pagbabago:

Ang output sa itaas ay nagpapakita na ang istilo ay nailapat sa napiling elemento kapag ito ay nakatutok.

Paggamit ng Active Variant na may Position Property.

Ang aktibong variant ay ginagamit upang i-istilo ang mga elemento ng HTML upang tukuyin ang estado kapag nag-click at humawak ang user ng isang button o iba pang elemento. Ang property ng posisyon ay maaaring gawing mas nakakaengganyo ang output para sa mga user na lumilikha ng mas dynamic na karanasan.

Hakbang 1: Idagdag ang Hover Property na may Posisyon sa HTML
Gumawa ng HTML file at ilapat ang aktibong variant kasabay ng property ng posisyon. Halimbawa, ang mga pag-aari na ito ay inilapat sa isang pindutan sa halimbawa ng code sa ibaba:

Sa code sa itaas:

• Itakda ang posisyon ng ' pindutan 'elemento sa' kamag-anak ”.
• “ bg-blue-500 ” itinatakda ang kulay ng background ng button sa asul.
• “ aktibo: isalin-y-2 ' ginagalaw ang button 2px pababa at binabago ang kulay ng button sa berde ng ' aktibo: bg-berde-400 ”.

Hakbang 2: I-verify ang Output
I-preview ang webpage na ginawa ng code sa itaas, at i-click nang matagal ang button para makita ang pagbabago:

Ang gif sa itaas ay nagpapakita ng estilo ng napiling elemento ng button na mababago kapag naging aktibo ito.

Iyon lang para ilapat ang hover, focus, at iba pang mga estado na may property ng posisyon sa Tailwind.

Konklusyon

Ang hover, focus, at iba pang mga estado ay maaaring gamitin sa pag-aari ng posisyon sa pamamagitan ng paggamit ng mga paunang natukoy na klase ng hover, focus, at iba pang mga estado pagkatapos ay naglalapat ng mga katangian ng klase ng posisyon tulad ng ' ganap ',' kamag-anak ” at iba pa kasabay nito. Ipinakita ng blog na ito kung paano gamitin ang hover, focus, at iba pang mga estado na may position utility sa Tailwind.