See artikkel käsitleb rakendamisprotseduuri hõljumise ja muude nähtavuse atribuutidega olekute rakendamiseks Tailwind CSS-i abil.
Kuidas Tailwindis nähtavuse utiliiti rakendada hõljuk ja muud osariigid?
Nähtavuse utiliiti saab kasutada hõljutusrežiimis ja muudes olekutes, et muuta kasutaja suhtlemisel nähtavust. Nähtavuse utiliidi all on kolm klassi, nimelt ' nähtav ”, „ nähtamatuks ”, ja „ kollaps ”. Parema mõistmise huvides integreerime allolevatesse näidetesse mõned hõljutusolekutega nähtavusklassid.
Näide 1: hõljumise oleku rakendamine 'nähtamatule' klassile
Sel juhul peidetakse valitud element, kui kasutaja kursor hõljub elemendi kohal, kood on näidatud allpool:
< keha >
< div klass = 'grid grid-cols-3 gap-4 my-4 mx-4' >
< div klass = 'bg-blue-500 p-3 ümardatud tekstikeskus' > 01 < / div >
< div klass = 'bg-blue-500 p-3 hover: nähtamatu ümar tekstikeskus' > 02 < / div >
< div klass = 'bg-blue-500 p-3 ümardatud tekstikeskus' > 03 < / div >
< / div >
< / keha >
Ülaltoodud koodi selgitus:
- Esiteks luuakse ülem-div, mis loob kolme veeruga ruudustiku paigutuse, mille iga veeru ja veerise vahel on tühik 4 pikslit ”. Tailwind CSS-i kasutamine ' võre ”, „ grid-cols-3 ”, „ lõhe ”, „ minu ”, ja „ mx ” klassid vastavalt.
- Järgmiseks kolm last' div ” elemendid luuakse ja neile rakendatakse põhistiili.
- Siis ' hõljuma olek või valija CSS-is on määratud teisele 'div' ja ' nähtamatuks ” on sellele määratud, eraldatuna kooloniga ” : ” märk. See muudab teise div nähtamatuks, kui hiir selle kohal hõljub.
Veebilehe eelvaade pärast täitmisfaasi:
Ülaltoodud gif näitab, et teine div muutub hiire hõljutamisel nähtamatuks.
Näide 2: Aktiivse oleku rakendamine 'nähtamatule' klassile
Olek 'Aktiivne' rakendab stiile, kui kasutaja valib konkreetse elemendi ja ei lahku. Just nagu tekstikastid, kui kasutaja hakkab väljale andmeid sisestama, on väli aktiivne ka sel ajal. Aktiivse oleku ja selle 'nähtamatu' klassiga töötamise selgemaks mõistmiseks külastage allolevat koodi:
< keha >< div klass = 'grid grid-cols-3 gap-4 my-4 mx-4' >
< div klass = 'bg-blue-500 p-3 ümardatud tekstikeskus' >01< / div >
< div klass = 'bg-blue-500 p-3 aktiivne: nähtamatu ümardatud tekstikeskus' >02< / div >
< div klass = 'bg-blue-500 p-3 ümardatud tekstikeskus' >03< / div >
< / div >
< / keha >
Ülaltoodud koodis on klass ' nähtamatuks ” on määratud „ aktiivne olek teiseks div ” element, et muuta teine div-element valimisel peidetuks.
Pärast täitmist näeb veebilehe eelvaade välja selline:
Ülaltoodud väljund näitab, et teise “div” valimisel muutub element nähtamatuks.
Järeldus
Hõljutust ja muid olekuid, nagu aktiivne või fookus, saab kasutada nähtavuse utiliidi pakutavate klassidega, et muuta valitud elementide nähtavuse atribuute. Elementide nähtavuse muutmiseks hiire hõljutamisel kasutatakse hõljutusklassi nähtavusklasside kõrval, mis on eraldatud värviga nagu ' hõljuta:nähtav ” või „ hõlju: nähtamatu ”. Selles ajaveebis on selgitatud hõljutusolekute rakendamise protseduuri nähtavuse utiliidiga.