See artikkel illustreerib hõljumise, fookuse ja muude asukohaomadustega olekute kasutamist Tailwindis.
Kuidas kasutada Tailwindis positsiooniomadusega hõljumist, fookust ja muid olekuid?
Tailwindi hõljukit, fookust ja muid olekuid kasutatakse Tailwindi elementide stiilimiseks, pakkudes kasutajatele atraktiivset ja kasutajasõbralikku liidest ning kaasahaaravat kogemust. Mõnikord tuleb positsiooni omadust rakendada, et säilitada kogemus kõrgeimate standardite kohaselt.
1. meetod: hõljukvariandi kasutamine asukoha atribuudiga
Hõljutusvariant kasutatakse valitud elementide stiiliks, kui kasutaja viib kursori selle valitud elemendi kohale. ' positsiooni ' atribuuti saab kasutada koos atribuudiga ' hõljuma ”, et määrata asend enne ja pärast hõljutamist. Seda paari kasutatakse kasutaja jaoks köitva kogemuse loomiseks.
1. toiming: lisage hõljukatribuut koos positsiooniga HTML-is
Allolevas koodis rakendatakse hõljutamise atribuuti koos asukoha atribuudiga ' nuppu ” element:
< keha >
< nuppu klass = 'suhteline w-40 h-12 bg-blue-500 hover:absolute hover:translate-x-4 hover:translate-y-4' >
< lk klass = 'tekst-valge tekstikeskus' > Hõljutage mind < / lk >
< / nuppu >
< / keha >
Selles koodis:
- ' sugulane ” klass määrab nupu emalehe suhtes.
- “ w-40 ” määrab laiuseks 40 pikslit.
- “ h-12 ” määrab kõrguseks 12 pikslit.
- “ bg-blue-500 ” määrab taustavärvi siniseks.
- “ hõljuda: absoluutne ” muudab nupu suhtelise asukoha absoluutseks, kui hiirekursor liigub selle kohal.
- “ hõljutage: translate-x-4 ” liigutab nuppu x-teljel 4 pikslit paremale ja samal ajal 4 pikslit alla „ hõljutage: translate-y-4 ”.
- Tekst on joondatud keskele ' tekstikeskus ”.
2. samm: kinnitamine
Vaadake ülaltoodud koodiga loodud veebilehe eelvaadet, mis näeb välja järgmine:
Väljund näitab, et elementi on nihutatud paremale ja allapoole 4 pikslit.
2. meetod: fookusvariandi kasutamine koos asukoha atribuudiga
Fookuse varianti kasutatakse HTML-i elementide stiilimiseks, et tõmmata kasutaja tähelepanu ja anda rõhku mõnele elemendile. Positsiooni saab rakendada ka koos objekti positsioneerimiseks emalehe suhtes või absoluutselt. Seda tehakse selleks, et kasutajat kaasas hoida.
1. toiming: lisage HTML-is fookuse atribuut koos positsiooniga
Looge HTML-fail ja rakendage fookuse atribuut sobiva asukohaga. Näiteks rakendatakse suhtelist asukohta alloleva koodi sisestuskastile:
< / keha >
Selles koodis:
- Määrake '' asukoht sisend ' elemendid ' sugulane ”.
- “ fookus: translate-x-4 ” liigutab nuppu x-teljel 4 pikslit paremale ja samal ajal 4 pikslit alla „ fookus: translate-y-4 ”, kui kasutaja klõpsab sisestuskastil.
- “ fookus: kontuur-2 ” loob kasutaja klõpsamisel tekstikasti ümber kontuuri.
2. samm: kontrollige väljundit
Muudatuse märkamiseks vaadake koodiga loodud veebilehe eelvaadet:
Ülaltoodud väljund näitab, et stiil on valitud elemendile fokusseerimisel rakendatud.
Aktiivse variandi kasutamine positsiooniomadusega.
Aktiivset varianti kasutatakse HTML-i elementide stiilimiseks, et määrata olek, kui kasutaja klõpsab ja hoiab all nuppu või mõnda muud elementi. Positsiooni atribuut võib muuta väljundi kasutajate jaoks köitvamaks, luues dünaamilisema kogemuse.
1. toiming: lisage hõljukatribuut koos positsiooniga HTML-is
Looge HTML-fail ja rakendage aktiivne variant koos asukoha atribuudiga. Näiteks rakendatakse neid omadusi nupule allolevas koodinäites:
< nuppu klass = 'suhteline w-48 h-12 bg-blue-500 active:translate-y-2 active:bg-green-400' >
< ulatus klass = 'tekst-valge' >Klõpsake mind< / ulatus >
< / nuppu >
< / keha >
Ülaltoodud koodis:
- Määrake '' asukoht nuppu ' element ' sugulane ”.
- “ bg-blue-500 ” määrab nupu taustavärvi siniseks.
- “ aktiivne: translate-y-2 ” liigutab nuppu 2 pikslit allapoole ja muudab nupu värvi roheliseks. aktiivne: bg-green-400 ”.
2. samm: kontrollige väljundit
Vaadake ülaltoodud koodiga loodud veebilehe eelvaadet ja klõpsake muudatuse nägemiseks ja hoidke nuppu all:
Ülaltoodud gif näitab, et valitud nupuelemendi stiil muutub selle aktiveerimisel.
See on kõik, et rakendada Tailwindis hõljutus-, fookus- ja muud positsiooniomadusega olekud.
Järeldus
Hõljutus-, fookus- ja muid olekuid saab kasutada koos asukoha atribuudiga, kasutades eelmääratletud hõljumise, fookuse ja muude olekute klasse, seejärel rakendades positsiooniklassi atribuute nagu ' absoluutne ', ' sugulane ” ja nii edasi koos. See ajaveeb on näidanud, kuidas kasutada Tailwindis positsiooniutiliidi abil hõljutust, fookust ja muid olekuid.