Kaip taikyti užvedimo, fokusavimo ir aktyvias būsenas su teksto dekoravimo storiu „Tailwind“.

Kaip Taikyti Uzvedimo Fokusavimo Ir Aktyvias Busenas Su Teksto Dekoravimo Storiu Tailwind



Kuriant turiniu pagrįstas svetaines, programuotojas dažnai turi pabrėžti svarbiausius terminus, kad naudotojas galėtų geriau patirti ir suprasti. Tokiu atveju „ Teksto puošybos storis “ Tailwind programa pradeda galioti, kurią galima įtraukti pasirinktu būdu, atsižvelgiant į svetainės išdėstymą.

Šioje pamokoje paaiškinamas toks turinys:

Kaip užvesties, fokusavimo ir aktyvias būsenas su teksto dekoravimo storiu pritaikyti tailwind?

„ Teksto dekoravimas Storis “ gali būti taikoma šioms būsenoms naudojant tikslinę būseną ir „ tekstas-dekoracija-storis “ savybę, po kurios nurodoma tikslinio storio reikšmė pikseliais. Šių metodų integravimas keičia teksto dekoravimo storį (pikseliais) užvedus pelės žymeklį, sufokusavus elementą arba esant aktyviam. Šie pikseliai gali būti ' 1px ', ' 2px ', ' 4 piks “ arba „ 8px “. Tai tokia, kad kuo daugiau pikselių, tuo didesnis storis.



1 pavyzdys: Teksto dekoravimo storio taikymas su „svyravimo“ būsena

Šis pavyzdys taikomas „ tekstas-dekoracija-storis “ turtas su “ užveskite pelės žymeklį “ būsena, kad nustatytumėte storį užvedus pelės žymeklį:





< html >

< galva >

< meta simbolių rinkinys = 'utf-8' >

< meta vardas = 'žiūros sritis' turinys = 'plotis = įrenginio plotis, pradinė skalė = 1' >

< scenarijus src = 'https://cdn.tailwindcss.com' >< / scenarijus >< / galva >

< kūnas >

< teksto sritis klasė = 'pabraukti hover:decoration-4' > Jamesas yra punktualus < / teksto sritis >

< / kūnas >

< / html >

Šiame kodo fragmente įtraukite CDN kelią į žymą „“, kad galėtumėte pasinaudoti „Tailwind“ funkcijomis. Po to per „ “ elementą, nurodykite „ užveskite pelės žymeklį “ būsena kartu su taikoma “ tekstas-dekoracija-storis “ ypatybė, kuri nustato dekoracijos storį nuo numatytojo pabraukimo iki padidinto „4“ pikselių storio, kai pelė užvedama.



Išvestis



Ši išvestis reiškia, kad atitinkamai nustatomas teksto apdailos storis, ty pabraukimas.



2 pavyzdys: Teksto dekoravimo storio taikymas su „fokusavimo“ būsena

Šis pavyzdinis kodas įgyvendina teksto dekoravimo storį iki tikslinės pikselio reikšmės, kai elementas sufokusuojamas naudojant „ Skirtukas ' Raktas:



< html >

< galva >

< meta simbolių rinkinys = 'utf-8' >

< meta vardas = 'žiūros sritis' turinys = 'plotis = įrenginio plotis, pradinė skalė = 1' >

< scenarijus src = 'https://cdn.tailwindcss.com' >< / scenarijus >< / galva >

< kūnas >

< teksto sritis klasė = 'pabraukti dekoraciją-1 fokusas: dekoracija-4' >Jamesas yra punktualus< / teksto sritis >

< / kūnas >

< / html >

Šiame kodo bloke pakartokite aptartus būdus, kaip įtraukti CDN kelią ir „ “ elementas. Dabar nurodykite numatytąjį storį kartu su perkeltu storiu, t. y. „4“ pikselius su „ sutelkti dėmesį “ būseną, kad pakeitimas būtų pritaikytas suaktyvintai būsenai.

Pastaba: Numatytasis ' pabraukti ' ir ' pabraukti dekoracija-1 “ savybės duoda tą patį rezultatą.

Išvestis

Iš šios išvesties galima patikrinti, ar atitinkamai pakeistas teksto dekoravimo storis.

3 pavyzdys: Teksto dekoravimo storio taikymas su „aktyvia“ būsena

Šiame kodo fragmente teksto puošybos storis pakeičiamas, kai elementas yra aktyvus:



< html >

< galva >

< meta simbolių rinkinys = 'utf-8' >

< meta vardas = 'žiūros sritis' turinys = 'plotis = įrenginio plotis, pradinė skalė = 1' >

< scenarijus src = 'https://cdn.tailwindcss.com' >< / scenarijus >< / galva >

< kūnas >

< teksto sritis klasė = 'pabraukti dekoracija-1 aktyvi: dekoracija-8' >Jamesas yra punktualus< / teksto sritis >

< / kūnas >

< / html >

Pagal šias kodo eilutes taip pat įtraukite CDN kelią ir elementą „