Pogojno oblikovanje izbranih elementov v mrežnem vsebniku

Koledarji, nakupovalni vozički, galerije, raziskovalci datotek in spletne knjižnice so nekatere situacije, kjer so izbirni elementi prikazani v mrežah (tj. kvadratne mreže). Saj veste, celo tisti varnostni pregledi, ki zahtevajo, da izberete vse slike s prehodi za pešce ali karkoli drugega.

Našel sem lep način za prikaz izbirnih možnosti v mreži. Ne, ne ponovno ustvarjanje te reCAPTCHA, ampak preprosto možnost izbire več elementov. In ko sta izbrana dva ali več sosednjih elementov, lahko uporabimo clever :nth-of-type kombinatorji, psevdo elementi in :checked psevdorazred, da jih oblikujete tako, da so videti združeni skupaj.

Celotna zamisel o kombinatorjih in psevdojih, da bi dobili zaobljena potrditvena polja, je prišla od a prejšnji članek, ki sem ga napisal. Bila je preprosta zasnova z enim stolpcem:

Tokrat pa je učinek zaokroževanja uporabljen za elemente vzdolž navpične in vodoravne osi na mreži. Za to vam ni treba prebrati mojega zadnjega članka o oblikovanju potrditvenih polj, saj bom tukaj zajel vse, kar morate vedeti. Če pa vas zanima shujšan pogled na to, kar počnemo v tem članku, potem je to vredno preveriti.

Preden začnemo …

Koristno bo, da si zapomnite nekaj stvari. Na primer, v svoji predstavitvi uporabljam statični HTML in CSS zaradi enostavnosti. Odvisno od vaše aplikacije boste morda morali dinamično ustvariti mrežo in elemente v njej. Izpuščam praktična preverjanja dostopnosti, da bi se osredotočil na učinek, vendar bi zagotovo želeli razmisliti o takšni stvari v produkcijskem okolju.

Za postavitev uporabljam tudi CSS Grid. Priporočam enako, vendar je to seveda le osebna želja in vaša kilometrina se lahko razlikuje. Meni uporaba mreže omogoča enostavno uporabo izbirnikov bratov in sester za ciljanje elementov ::before in ::after psevdos.

Zato ne glede na standard postavitve, ki ga morda želite uporabiti v svoji aplikaciji, se prepričajte, da je psevdo še vedno mogoče ciljati v CSS in zagotovite, da postavitev ostane enaka v različnih brskalnikih in zaslonih.

Začnimo zdaj

Kot ste morda opazili v prejšnji predstavitvi, označevanje in odznačevanje elementa potrditvenega polja spremeni zasnovo polj, odvisno od izbirnega stanja drugih potrditvenih polj okoli njega. To je mogoče, ker sem vsako škatlo oblikoval s psevdoelementi njenih sosednjih elementov namesto lastnega elementa.

Naslednja slika prikazuje, kako ::before psevdoelementi škatel v vsaki stolpec (razen prvega stolpca) prekrivajo polja na njihovi levi in ​​kako ::after psevdoelementi škatel v vsaki vrstica (razen prve vrstice) prekrivajo zgornja polja.

Tukaj je osnovna koda

Oznaka je precej enostavna:

<main> <input type=checkbox> <input type=checkbox> <input type=checkbox> <!-- more boxes -->
</main>

V začetnem CSS se dogaja malo več. Toda najprej sama mreža:

/* The grid */
main { display: grid; grid: repeat(5, 60px) / repeat(4, 85px); align-items: center; justify-items: center; margin: 0;
}

To je mreža petih vrstic in štirih stolpcev, ki vsebujejo potrditvena polja. Odločil sem se, da bom izbrisal privzeti videz potrditvenih polj, nato pa jim dal svoje svetlo sivo ozadje in zelo zaobljene robove:

/* all checkboxes */
input { -webkit-appearance: none; appearance: none; background: #ddd; border-radius: 20px; cursor: pointer; display: grid; height: 40px; width: 60px; margin: 0;
}

Upoštevajte tudi, da so sama potrditvena polja mreže. To je ključno za njihovo namestitev ::before in ::after psevdoelementi. Ko smo že pri tem, naredimo to zdaj:

/* pseudo-elements except for the first column and first row */
input:not(:nth-of-type(4n+1))::before,
input:nth-of-type(n+5)::after { content: ''; border-radius: 20px; grid-area: 1 / 1; pointer-events: none;
}

Izbiramo samo psevdoelemente potrditvenih polj, ki niso v prvem stolpcu ali prvi vrstici mreže. input:not(:nth-of-type(4n+1)) se začne pri prvem potrditvenem polju, nato pa izbere ::before vsakega četrtega predmeta od tam. Toda upoštevajte, da pravimo :not(), torej res, kar počnemo je preskakovanje o ::before psevdoelement vsakega četrtega potrditvenega polja, začenši s prvim. Nato uporabimo sloge za ::after psevdo vsakega potrditvenega polja od petega.

Zdaj lahko oblikujemo oboje ::before in ::after psevdo za vsako potrditveno polje, ki ni v prvem stolpcu ali vrstici mreže, tako da se premaknejo levo oziroma navzgor in jih privzeto skrijejo.

/* pseudo-elements other than the first column */
input:not(:nth-of-type(4n+1))::before { transform: translatex(-85px);
} /* pseudo-elements other than the first row */
input:nth-of-type(n+5)::after { transform: translatey(-60px); }

Oblikovanje :checked so bili

Zdaj sledi oblikovanje potrditvenih polj, ko so v a :checked država. Najprej jim dajmo barvo, recimo a limegreen ozadje:

input:checked { background: limegreen; }

Potrjeno polje bi moralo imeti možnost preoblikovanja vseh sosednjih označenih polj. Z drugimi besedami, če izberemo enajsto potrditveno polje v mreži, bi morali imeti možnost oblikovati tudi polja, ki ga obdajajo na vrhu, spodaj, levo in desno.

To naredimo tako, da ciljamo na pravilne psevdoelemente. Kako to naredimo? No, odvisno je od dejanskega števila stolpcev v mreži. Tukaj je CSS, če sta označeni dve sosednji polji v mreži 5⨉4:

/* a checked box's right borders (if the element to its right is checked) */
input:not(:nth-of-type(4n)):checked + input:checked::before { border-top-right-radius: 0; border-bottom-right-radius: 0; background: limegreen;
}
/* a checked box's bottom borders (if the element below is checked) */
input:nth-last-of-type(n+5):checked + * + * + * + input:checked::after { border-bottom-right-radius: 0; border-bottom-left-radius: 0; background: limegreen;
}
/* a checked box's adjacent (right side) checked box's left borders */
input:not(:nth-of-type(4n)):checked + input:checked + input::before { border-top-left-radius: 0; border-bottom-left-radius: 0; background: limegreen;
}
/* a checked box's adjacent (below) checked box's top borders */
input:not(:nth-of-type(4n)):checked + * + * + * + input:checked + input::before { border-top-left-radius: 0; border-top-right-radius: 0; background: limegreen;
}

Če želite, lahko zgornjo kodo ustvarite dinamično. Vendar pa bo v tipični mreži, recimo v galeriji slik, število stolpcev majhno in verjetno fiksno število elementov, medtem ko se lahko vrstice še naprej povečujejo. Še posebej, če je zasnovan za mobilne zaslone. Zato je ta pristop še vedno učinkovit način. Če ima vaša aplikacija iz nekega razloga omejene vrstice in razširljive stolpce, potem razmislite o obračanju mreže vstran, ker jih CSS Grid s tokom elementov razporedi od leve proti desni in od zgoraj navzdol (tj. vrstico za vrstico). .

Dodati moramo tudi slog za zadnja potrditvena polja v mreži — niso vsa pokrita s psevdoelementi, saj so zadnji elementi na vsaki osi.

/* a checked box's (in last column) left borders */
input:nth-of-type(4n-1):checked + input:checked { border-top-left-radius: 0; border-bottom-left-radius: 0;
}
/* a checked box's (in last column) adjacent (below) checked box's top borders */
input:nth-of-type(4n):checked + * + * + * + input:checked { border-top-left-radius: 0; border-top-right-radius: 0;
}

To so zapleteni selektorji! Prvi…

input:nth-of-type(4n-1):checked + input:checked

... v bistvu pravi tole:

A preverjeno <input> element poleg označenega <input> v predzadnjem stolpcu.

In nth-of-type se izračuna takole:

4(0) - 1 = no match
4(1) - 1 = 3rd item
4(2) - 1 = 7th item
4(3) - 1 = 11th item
etc.

Torej, začnemo pri tretjem potrditvenem polju in od tam izberemo vsako četrto. In če je potrjeno potrditveno polje v tem zaporedju, potem stiliziramo tudi sosednja potrditvena polja, če so prav tako označena.

In ta vrstica:

input:nth-of-type(4n):checked + * + * + * + input:checked

Pravi tole:

An <input> element, ki je označen, neposredno meji na element, ki meji neposredno na drug element, ki prav tako neposredno meji na drug element, ki pa neposredno meji na <input> element, ki je v označenem stanju.

To pomeni, da izberemo vsako četrto potrjeno polje. In če je potrjeno potrditveno polje v tem zaporedju, oblikujemo naslednje četrto potrditveno polje iz tega potrditvenega polja, če je tudi to potrjeno.

Uporaba

Pravkar smo si ogledali splošno načelo in logiko zasnove. Še enkrat, kako uporaben je v vaši aplikaciji, bo odvisno od zasnove mreže.

Uporabil sem zaobljene obrobe, vendar lahko poskusite z drugimi oblikami ali celo eksperimentirate z učinki ozadja (Temani vam nudi ideje). Zdaj, ko veste, kako formula deluje, je ostalo povsem odvisno od vaše domišljije.

Tukaj je primer, kako bi to lahko izgledalo v preprostem koledarju:

Še enkrat, to je le grob prototip, ki uporablja statično oznako. In pri funkciji koledarja bi bilo treba upoštevati veliko in veliko pomislekov glede dostopnosti.

---

To je zavitek! Precej lepo, kajne? Mislim, v tem, kar se dogaja, ni nič prav »novega«. Je pa dober primer izbiranje stvari v CSS. Če imamo roko z naprednejšimi tehnikami izbire, ki uporabljajo kombinatorje in psevdo, lahko naše stilske moči sežejo daleč preko stilskega oblikovanja enega predmeta – kot smo videli, lahko pogojno oblikujemo elemente na podlagi stanja drugega elementa.

---

Pogojno oblikovanje izbranih elementov v mrežnem vsebniku prvotno objavljeno na CSS-triki. Moral bi prejemanje glasila.

• Coinsmart. Najboljša evropska borza bitcoinov in kriptovalut.
• Platoblockchain. Web3 Metaverse Intelligence. Razširjeno znanje. PROST DOSTOP.
• CryptoHawk. Altcoin radar. Brezplačen preizkus.
• Vir: https://css-tricks.com/conditionally-styling-selected-elements-in-a-grid-container/