Nag-aalok ang CSS ng iba't ibang mga framework para sa mga programmer upang magdisenyo ng mga dynamic na web page. Ito ay mas kawili-wili dahil nagbibigay ito ng lahat ng mahahalagang tampok at tool sa isang lugar. Kaya, hindi mo kailangang gumamit ng iba pang mga frameworks. Ang balangkas ng Tailwind sa CSS ang pinakamalawak na ginagamit dahil nakakatipid ito ng oras ng user na magsulat ng labis na CSS.
Ang gabay na ito ay nagbibigay ng paggamit ng hover, focus, at iba pang mga estado sa Tailwind.
Paano Gamitin ang Hover, Focus, at Ibang Estado sa Tailwind?
Kapag nagdidisenyo ng mga web page, kinakailangang magdagdag ng mga dynamic at kaakit-akit na elemento upang mapanatili ang interaktibidad sa mga user. Ang mga tampok sa Tailwind ay maaaring magamit upang lumikha ng mga interactive at dynamic na pahina nang hindi nagsusulat ng karagdagang custom na CSS. Ang ilang mga tampok ay 'hover', 'focus' at 'aktibo' na tumutulong sa pagdaragdag ng atraksyon sa mga disenyo.
Paggamit ng Hover Variant sa HTML
Ang hover property ay ginagamit upang mag-istilo ng HTML element kapag inilipat ng user ang mouse cursor sa isang partikular na elemento. Nakakatulong itong magpakita ng maayos na karanasan.
Hakbang 1: Ilapat ang 'hover' na Property sa HTML
Gumawa ng HTML file at ilapat ang hover property sa ilang elemento sa code. Upang magkaroon ng ideya, tingnan ang code na ibinigay sa ibaba:
< katawan >
< div klase = 'gitna' >
< pindutan klase = 'bg-green-500 hover:bg-blue-500 text-white font-bold rounded' >
Pasadahan Ako!
< / pindutan >
< / div >
< / katawan >
Sa code na ito:
- Isang button na pinangalanang ' Hover Me! ” ay nilikha ng button na tag.
- “ bg-berde-500 ” itinatakda ang kulay ng background ng button sa berde.
- “ hover: bg-blue-500 ” binabago ang kulay ng button mula berde patungo sa asul kapag inilipat ang mouse sa ibabaw nito.
- Ang teksto sa pindutan ay may puting kulay ' text-white 'at' font-bold ” ginagawang bold ang font.
- Ang hugis ng button ay nakatakdang bilugan ng ' bilugan ”.
Hakbang 2: I-preview ang Output
Pagkatapos isagawa ang code sa itaas, ang huling view ay ganito:
Ito ay makikita na ang pindutan ay nagbabago ng kulay kapag ang mouse cursor ay inilipat sa ibabaw nito.
Paggamit ng Focus Variant sa HTML
Ang focus property ay ginagamit upang i-istilo ang mga elemento ng HTML na kapag nag-click ang user sa elemento ay naka-highlight ito para makuha ang atensyon ng user.
Hakbang 1: Ilapat ang Focus Property sa HTML code
Gumawa ng HTML file at ilapat ang focus property sa ilang gustong elemento. Upang makakuha ng impression isaalang-alang ang code sa ibaba:
< div >
< / div >
< / katawan >
Sa code na ito:
- Ang ' baluktot ” ang klase ay lumilikha ng isang pagbaluktot.
- Ang ' justify-center ” nagbibigay-katwiran sa pagkakahanay ng nilalaman sa gitna.
- Ang ' item-center ” inaayos ng klase ang mga bagay sa gitna ng screen.
- Ang ' h-screen ” nagtatakda ng laki ng screen ayon sa viewport.
- “ bg-blue-200 ” itinatakda ang kulay ng background sa asul.
- Ang isang input box ng uri ng teksto ay nilikha.
- Ang ' focus: bg-berde-300 ' binabago ang kulay ng kahon ng input sa berde kapag na-click ng gumagamit.
- “ w-64 ” itinatakda ang lapad sa 64px.
- “ h-10 ” itinatakda ang taas sa 10px.
- “ px-4 ” nagdaragdag ng padding na 4px sa itaas at kaliwang bahagi.
- “ py-2 ” nagdaragdag ng padding na 2px sa itaas at ibaba.
Hakbang 2: I-preview ang Focus Property
I-save ang HTML code at buksan ang webpage na ginawa nito. Pagkatapos ay ilipat ang cursor sa input box at i-click ito at ang pagbabago sa ibaba ay mangyayari:
Gamit ang Active Variant sa HTML
Ginagamit ang property na ito para i-istilo ang mga elemento para sa kundisyon kapag dynamic na nag-tap ang user sa elemento. Ang aktibong estado ay ang yugto ng panahon mula sa yugto ng pag-activate ng cursor at ang inilabas na estado nito.
Syntax
aktibo: { ari-arian }Ang partikular na CSS property ay mailalapat sa napiling elemento.
Hakbang 1: Ilapat ang Active Variant sa HTML code
Gumawa ng HTML file at ilapat ang aktibong property sa ilang elemento na sa ibabang kaso ay isang button:
< div klase = 'flex justify-center items-center h-screen' >
< pindutan klase = 'bg-green-600 p-4 rounded-md transition-transform duration-400 transform active:scale-110' >
Pindutin mo ako!
< / pindutan >
< / div >
< / katawan >
Sa code na ito:
- “ bg-berde-600 ” itinatakda ang kulay ng background sa berde.
- “ p-4 ” nagdaragdag ng padding na 4px.
- “ bilugan-md ” ginagawang bilugan ang hugis ng button.
- “ transition-transform Ang ” ay ginagamit upang ibahin ang anyo ng button para sa isang maliit na tagal ng oras na itinakda ng “ tagal-400 transform ”.
- Ang ' aktibo:scale-110 ” binabago ang button sa mas malaking sukat.
Hakbang 2: I-preview ang Output
I-save ang code sa itaas sa isang HTML file at i-preview ang webpage na ginawa nito. Ang web page ay magmumukhang:
Makikita na ang laki ng button ay tumataas kapag hawak ito ng mouse at sa sandaling ito ay mabitawan ay bumalik ito sa orihinal nitong estado.
Konklusyon
Upang gumamit ng hover, focus, at iba pang mga estado sa Tailwind, gamitin ang mga paunang natukoy na klase ng estado tulad ng 'hover' at ilapat ang ilang katangian ng pag-istilo dito gaya ng pagpapalit ng kulay, paggawa ng focus ring, at iba pa. Ang mga kagamitan sa pagpapakita ay ginagamit upang ipakita ang isang nasusukat na output. Ang writeup na ito ay nagpakita ng paraan upang gamitin ang hover, focus, at iba pang mga estado sa Tailwind.