Kiválasztott elemek feltételes formázása egy rácsos tárolóban

Naptárak, bevásárlókocsik, galériák, fájlkezelők és online könyvtárak olyan helyzetek, amikor a kiválasztható elemek rácsokban (azaz négyzetrácsokban) jelennek meg. Tudod, még azok a biztonsági ellenőrzések is, amelyek arra kérik, hogy válasszon ki minden olyan képet, amelyen átkelőhelyek vagy bármi más látható.

Találtam egy ügyes módot a választható opciók rácsban való megjelenítésére. Nem, nem újból létrehozni a reCAPTCHA-t, hanem egyszerűen több elemet kiválasztani. És ha két vagy több szomszédos elemet választunk ki, használhatunk okosat :nth-of-type kombinátorok, pszeudo elemek és a :checked pszeudoosztály, hogy úgy alakítsa őket, hogy csoportosítva nézzenek ki.

A lekerekített jelölőnégyzetek létrehozására szolgáló kombinátorok és pszeudók egész ötlete a előző cikket írtam. Ez egy egyszerű egyoszlopos terv volt:

Ezúttal azonban a kerekítési hatást a rács függőleges és vízszintes tengelye mentén lévő elemekre alkalmazzuk. Ehhez nem kell elolvasnia a jelölőnégyzet stílusáról szóló legutóbbi cikkemet, mivel itt mindent meg fogok ismertetni, amit tudnia kell. De ha érdekli Önt a cikkben leírtakkal kapcsolatos karcsúsított felfogás, akkor érdemes ezt megnézni.

Mielőtt elkezdenénk…

Hasznos lesz, ha tudomásul vesz néhány dolgot. Például statikus HTML-t és CSS-t használok a bemutatómban az egyszerűség kedvéért. Az alkalmazástól függően előfordulhat, hogy dinamikusan kell létrehoznia a rácsot és a benne lévő elemeket. Kihagyom az akadálymentesítés gyakorlati ellenőrzését, hogy a hatásra összpontosíthassak, de az ilyesmit mindenképpen érdemes megfontolni éles környezetben.

Ezenkívül CSS Grid-et használok az elrendezéshez. Ugyanezt javaslom, de természetesen ez csak személyes preferencia, és a futásteljesítmény változhat. Számomra a rács használata lehetővé teszi, hogy a testvérválasztók segítségével egyszerűen megcélozzam egy tételt ::before és a ::after álhírek.

Ezért bármilyen elrendezési szabványt is szeretne használni az alkalmazásában, győződjön meg arról, hogy a pszeudók továbbra is célozhatók a CSS-ben, és biztosítsa, hogy az elrendezés változatos maradjon a különböző böngészőkben és képernyőkön.

Kezdjük most

Amint azt a korábbi bemutatóban észrevette, egy jelölőnégyzet elem bejelölése és kijelölésének törlése módosítja a négyzetek kialakítását, a körülötte lévő többi jelölőnégyzet kijelölési állapotától függően. Ez azért lehetséges, mert minden dobozt a saját eleme helyett a szomszédos elemeinek pszeudoelemeivel alakítottam ki.

A következő ábra azt mutatja be, hogyan a ::before dobozok pszeudoelemei mindegyikben oszlop (az első oszlop kivételével) átfedik a tőlük balra lévő négyzeteket, és hogyan a ::after dobozok pszeudoelemei mindegyikben sor (az első sor kivételével) fedje át a fenti mezőket.

Itt az alapkód

A jelölés meglehetősen egyszerű:

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

Egy kicsit több történik a kezdeti CSS-ben. De először maga a rács:

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

Ez egy öt sorból és négy oszlopból álló rács, amely jelölőnégyzeteket tartalmaz. Úgy döntöttem, hogy törlöm a jelölőnégyzetek alapértelmezett megjelenését, majd saját világosszürke hátteret és rendkívül lekerekített szegélyeket adok nekik:

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

Vegye figyelembe azt is, hogy maguk a jelölőnégyzetek rácsok. Ez a kulcs az elhelyezésükhöz ::before és a ::after pszeudo-elemek. Apropó, most tegyük ezt:

/* 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;
}

Csak azon jelölőnégyzetek pszeudoelemeit jelöljük ki, amelyek nincsenek a rács első oszlopában vagy első sorában. input:not(:nth-of-type(4n+1)) az első jelölőnégyzetnél kezdődik, majd kiválasztja a ::before onnan minden negyedik tételből. De vedd észre, mondjuk :not(), tehát tényleg az, amit csinálunk ugrás a ::before minden negyedik jelölőnégyzet pszeudoeleme, az elsőtől kezdve. Ezután stílusokat alkalmazunk a ::after pszeudo minden jelölőnégyzetet az ötödiktől kezdve.

Most mindkettőt stílusozhatjuk ::before és a ::after pszeudókat minden olyan jelölőnégyzethez, amely nem található a rács első oszlopában vagy sorában, így azok balra vagy felfelé kerülnek, alapértelmezés szerint elrejtve őket.

/* 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); }

Stilizálás a :checked voltak

Most jön a jelölőnégyzetek stílusa, amikor azok a :checked állapot. Először is adjunk nekik egy színt, mondjuk a limegreen háttér:

input:checked { background: limegreen; }

A bejelölt négyzetnek képesnek kell lennie az összes szomszédos jelölőnégyzet stílusának megváltoztatására. Más szóval, ha bejelöljük a tizenegyedik jelölőnégyzetet a rácsban, akkor az azt körülvevő négyzetek stílusát is be kell tudni alakítani felül, alul, balra és jobbra.

Ez a megfelelő pszeudoelemek megcélzásával történik. Hogyan csináljuk? Nos, ez a rács oszlopainak tényleges számától függ. Íme a CSS, ha két szomszédos négyzet be van jelölve egy 5⨉4-es rácsban:

/* 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;
}

Ha szeretné, dinamikusan is előállíthatja a fenti kódot. Azonban egy tipikus rácsban, mondjuk egy képgalériában, az oszlopok száma kicsi lesz, és valószínűleg rögzített számú elem lesz, miközben a sorok folyamatosan növekedhetnek. Főleg, ha mobil képernyőkre tervezték. Ezért ez a megközelítés még mindig hatékony módszer. Ha valamilyen oknál fogva az alkalmazás korlátozott sorokkal és bővülő oszlopokkal rendelkezik, fontolja meg a rács oldalirányú elforgatását, mert a CSS Grid az elemek folyamával balról jobbra és fentről lefelé (azaz soronként) rendezi őket. .

A rács utolsó jelölőnégyzeteihez is stílust kell adnunk – nem mindegyiket fedik pszeudoelemek, mivel ezek az utolsó elemek az egyes tengelyeken.

/* 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;
}

Ezek trükkös válogatók! Az első…

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

...alapvetően ezt mondja:

Egy ellenőrzött <input> elem mellett egy bejelölt <input> a második utolsó oszlopban.

És az nth-of-type így számítják ki:

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

Tehát a harmadik jelölőnégyzetnél kezdjük, és onnan jelöljük ki minden negyediket. És ha ebben a sorrendben egy jelölőnégyzet be van jelölve, akkor a szomszédos jelölőnégyzeteket is stílusozzuk, ha azok is be vannak jelölve.

És ez a sor:

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

Ezt mondja:

An <input> Feltéve, hogy az elem be van jelölve, közvetlenül szomszédos egy elemmel, amely közvetlenül szomszédos egy másik elemmel, amely szintén közvetlenül szomszédos egy másik elemmel, amely viszont közvetlenül szomszédos egy másik elemmel. <input> elem, amely ellenőrzött állapotban van.

Ez azt jelenti, hogy minden negyedik bejelölt jelölőnégyzetet bejelölünk. És ha az adott sorozatban egy jelölőnégyzet be van jelölve, akkor a következő negyedik jelölőnégyzetet formáljuk abból a jelölőnégyzetből, ha az is be van jelölve.

Használatba vétel

Amit most megnéztünk, az a tervezés mögött meghúzódó általános elv és logika. Ismételten a rács kialakításától függ, hogy mennyire hasznos az alkalmazásában.

Lekerekített szegélyeket használtam, de kipróbálhatsz más formákat, vagy akár kísérletezhetsz a háttéreffektusokkal (Temani fedezi az ötleteket). Most, hogy tudja, hogyan működik a képlet, a többi már csak a képzeletén múlik.

Íme egy példa, hogyan nézhet ki egy egyszerű naptárban:

Ez megint csak egy statikus jelölést használó durva prototípus. És sok-sok akadálymentesítési szempontot figyelembe kell venni egy naptárfunkciónál.

---

Ez egy pakolás! Elég ügyes, igaz? Úgy értem, nincs semmi „új” abban, ami történik. De jó példa arra a dolgok kiválasztása a CSS-ben. Ha rendelkezünk fejlettebb, kombinátorokat és pszeudókat használó kiválasztási technikákkal, akkor a stíluserőnk messze túlmutat az egyik elem stílusán – mint láttuk, az elemeket feltételesen stílusozhatjuk egy másik elem állapota alapján.

---

Kiválasztott elemek feltételes formázása egy rácsos tárolóban eredetileg megjelent CSS-trükkök. Neked kellene kapja meg a hírlevelet.

• Coinsmart. Európa legjobb Bitcoin- és kriptográfiai tőzsdéje.
• Platoblockchain. Web3 metaverzum intelligencia. Felerősített tudás. SZABAD HOZZÁFÉRÉS.
• CryptoHawk. Altcoin radar. Ingyenes próbaverzió.
• Forrás: https://css-tricks.com/conditionally-styling-selected-elements-in-a-grid-container/