Kaip „Tailwind“ naudoti „Hover“, „Focus“ ir kitas būsenas su pozicijos savybe?

Šiame straipsnyje iliustruojamas užvedimo, fokusavimo ir kitų būsenų su padėties savybėmis naudojimas sistemoje Tailwind.

Kaip „Tailwind“ naudoti „Hover“, „Focus“ ir kitas būsenas su pozicijos savybe?

Užvedimas, fokusavimas ir kitos „Tailwind“ būsenos naudojamos „Tailwind“ elementams stilizuoti, suteikiant patrauklią ir patogią sąsają bei patrauklią patirtį. Kartais reikia taikyti pozicijos savybę, kad patirtis atitiktų aukščiausius standartus.

1 būdas: Užvedimo varianto naudojimas su pozicijos ypatybe

Užvedimo ant žymeklio variantas naudojamas pasirinktų elementų stiliui sukurti, kai vartotojas perkelia žymeklį ant pasirinkto elemento. „ padėtis ' atributas gali būti naudojamas kartu su ' užveskite pelės žymeklį “ norėdami nustatyti padėtį prieš ir po užvedimo. Ši pora naudojama norint sukurti patrauklią patirtį vartotojui.

1 veiksmas: pridėkite žymeklio ypatybę su pozicija HTML
Toliau pateiktame kode žymeklio ypatybė taikoma kartu su pozicijos ypatybe „ mygtuką “ elementas:

Šiame kode:

• „ giminaitis “ klasė nustato mygtuką pirminio puslapio atžvilgiu.
• “ w-40 “ nustato 40 pikselių plotį.
• “ h-12 “ nustato aukštį į 12 pikselių.
• “ bg-blue-500 “ nustato fono spalvą į mėlyną.
• “ svyruok: absoliutus “ pakeičia santykinę mygtuko padėtį į absoliučią, kai pelės žymeklis perkeliamas virš jo.
• “ užveskite pelės žymeklį: translate-x-4 “ perkelia mygtuką 4 pikseliais į dešinę x ašyje ir tuo pačiu 4 pikseliais žemyn per „ užveskite pelės žymeklį: translate-y-4 “.
• Tekstas sulygiuotas centre „ teksto centras “.

2 veiksmas: patvirtinimas
Peržiūrėkite anksčiau pateiktu kodu sukurtą tinklalapį, kuris atrodo taip:

Išvestis rodo, kad elementas buvo perkeltas į dešinę ir žemyn 4 pikseliais.

2 būdas: fokusavimo varianto naudojimas su pozicijos ypatybe

Fokusavimo variantas naudojamas stilizuoti HTML elementus, siekiant atkreipti vartotojo dėmesį ir pabrėžti kai kuriuos elementus. Padėtis taip pat gali būti taikoma kartu, norint nustatyti objekto padėtį santykiškai arba absoliučiai pirminio puslapio atžvilgiu. Tai daroma, kad vartotojas būtų įtrauktas.

1 veiksmas: pridėkite fokusavimo ypatybę su pozicija HTML
Sukurkite HTML failą ir pritaikykite fokusavimo ypatybę tinkamoje pozicijoje. Pavyzdžiui, santykinė padėtis taikoma įvesties laukeliui toliau pateiktame kode:

Šiame kode:

• Nustatykite '' padėtį įvestis “ elementai į “ giminaitis “.
• “ fokusavimas: translate-x-4 “ perkelia mygtuką 4 pikseliais į dešinę x ašyje ir tuo pačiu 4 pikseliais žemyn per „ fokusuoti: išversti-y-4 “, kai vartotojas spusteli įvesties laukelį.
• “ dėmesys: kontūras-2 “ sukuria kontūrą aplink teksto laukelį, kai jį spusteli vartotojas.

2 veiksmas: patikrinkite išvestį
Peržiūrėkite pagal kodą sukurtą tinklalapį, kad pastebėtumėte pakeitimą:

Aukščiau pateikta produkcija rodo, kad stilius buvo pritaikytas pasirinktam elementui, kai jis sufokusuojamas.

Aktyvaus varianto naudojimas su pozicijos savybe.

Aktyvus variantas naudojamas HTML elementų stiliui formuoti, siekiant apibrėžti būseną, kai vartotojas spustelėja ir laiko mygtuką ar kitą elementą. Pozicijos ypatybė gali padaryti išvestį patrauklesnę vartotojams ir sukurti dinamiškesnę patirtį.

1 veiksmas: pridėkite žymeklio ypatybę su pozicija HTML
Sukurkite HTML failą ir pritaikykite aktyvų variantą kartu su pozicijos ypatybe. Pavyzdžiui, šios savybės taikomos mygtukui toliau pateiktame kodo pavyzdyje:

Aukščiau pateiktame kode:

• Nustatykite '' padėtį mygtuką “ elementas į “ giminaitis “.
• “ bg-blue-500 “ nustato mygtuko fono spalvą į mėlyną.
• “ aktyvus: translate-y-2 “ perkelia mygtuką 2 pikseliais žemyn ir pakeičia mygtuko spalvą į žalią „ aktyvus: bg-green-400 “.

2 veiksmas: patikrinkite išvestį
Peržiūrėkite anksčiau pateiktu kodu sukurtą tinklalapį ir spustelėkite ir palaikykite mygtuką, kad pamatytumėte pakeitimą:

Aukščiau pateiktas gif rodo, kad pasirinkto mygtuko elemento stilius pasikeičia, kai jis tampa aktyvus.

Tai viskas, kad būtų galima pritaikyti pelės žymeklį, fokusavimą ir kitas būsenas su padėties savybe „Tailwind“.

Išvada

Užvedimo, fokusavimo ir kitos būsenos gali būti naudojamos su padėties ypatybe, naudojant iš anksto nustatytas užvedimo, fokusavimo ir kitų būsenų klases, tada taikant padėties klasės atributus, pvz. absoliutus ', ' giminaitis “ ir taip toliau kartu. Šiame tinklaraštyje parodyta, kaip naudoti pelės žymeklį, fokusavimą ir kitas būsenas su padėties įrankiu Tailwind.