Stilizarea condiționată a elementelor selectate într-un container grilă

Calendarele, cărucioarele de cumpărături, galeriile, exploratorii de fișiere și bibliotecile online sunt câteva situații în care elementele selectabile sunt afișate în grile (adică grile pătrate). Știi, chiar și acele verificări de securitate care îți cer să selectezi toate imaginile cu treceri de pietoni sau orice altceva.

Am găsit o modalitate bună de a afișa opțiunile selectabile într-o grilă. Nu, nu recrearea reCAPTCHA, ci pur și simplu posibilitatea de a selecta mai multe elemente. Și când sunt selectate două sau mai multe elemente alăturate, putem folosi inteligent :nth-of-type combinatorii, pseudoelementele și :checked pseudo-clasă pentru a le stila într-un mod în care să pară grupate.

Întreaga idee de combinatoare și pseudos pentru a obține casetele de selectare rotunjite a venit de la a articolul anterior pe care l-am scris. Era un design simplu cu o singură coloană:

De data aceasta, însă, efectul de rotunjire este aplicat elementelor de-a lungul axelor verticale și orizontale ale unei grile. Nu trebuie să fi citit ultimul meu articol despre stilul casetei de selectare pentru asta, deoarece voi acoperi tot ce trebuie să știți aici. Dar dacă sunteți interesat de o abordare redusă a ceea ce facem în acest articol, atunci merită verificată.

Înainte să începem…

Vă va fi util să luați notă de câteva lucruri. De exemplu, folosesc HTML static și CSS în demonstrația mea de dragul simplității. În funcție de aplicația dvs., este posibil să fie necesar să generați grila și elementele din ea în mod dinamic. Omit verificările practice pentru accesibilitate pentru a mă concentra asupra efectului, dar cu siguranță ați dori să luați în considerare așa ceva într-un mediu de producție.

De asemenea, folosesc CSS Grid pentru aspect. Aș recomanda același lucru, dar, desigur, este doar o preferință personală și kilometrajul dvs. poate varia. Pentru mine, utilizarea grilei îmi permite să folosesc cu ușurință selectoarele de frați pentru a viza elementele unui articol ::before și ::after pseudos.

Prin urmare, indiferent de standardul de aspect pe care doriți să îl utilizați în aplicația dvs., asigurați-vă că pseudo-urile pot fi în continuare vizate în CSS și asigurați-vă că aspectul rămâne intact pe diferite browsere și ecrane.

Să începem acum

După cum probabil ați observat în demonstrația anterioară, bifarea și debifarea unui element de casetă de selectare modifică designul casetelor, în funcție de starea de selecție a celorlalte casete de selectare din jurul acestuia. Acest lucru este posibil deoarece am stilat fiecare cutie folosind pseudo-elementele elementelor adiacente în loc de propriul element.

Figura următoare arată cum ::before pseudo-elemente de cutii din fiecare coloană (cu excepția primei coloane) se suprapun casetele din stânga lor și modul în care ::after pseudo-elemente de cutii din fiecare rând (cu excepția primului rând) se suprapune casetele de mai sus.

Iată codul de bază

Markup-ul este destul de simplu:

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

Se întâmplă ceva mai mult în CSS inițial. Dar, mai întâi, grila în sine:

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

Aceasta este o grilă de cinci rânduri și patru coloane care conțin casete de selectare. Am decis să șterg aspectul implicit al casetelor de selectare, apoi să le ofer propriul meu fundal gri deschis și margini super rotunjite:

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

Observați, de asemenea, că casetele de selectare în sine sunt grile. Aceasta este cheia pentru plasarea lor ::before și ::after pseudo-elemente. Apropo de asta, hai să facem asta acum:

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

Selectăm doar pseudoelementele casetelor de selectare care nu se află în prima coloană sau în primul rând al grilei. input:not(:nth-of-type(4n+1)) începe la prima casetă de selectare, apoi selectează ::before din fiecare al patrulea articol de acolo. Dar observă că spunem :not(), deci de fapt ceea ce facem este sărind peste il ::before pseudo-element din fiecare a patra casetă de selectare, începând cu prima. Apoi aplicăm stiluri la ::after pseudo al fiecărei casete de selectare din a cincea.

Acum le putem stila pe ambele ::before și ::after pseudos pentru fiecare casetă de selectare care nu se află în prima coloană sau rând a grilei, astfel încât acestea să fie mutate în stânga sau respectiv în sus, ascunzându-le implicit.

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

Stilizarea :checked de stat

Acum vine stilul casetelor de selectare când sunt într-un :checked stat. Mai întâi, să le dăm o culoare, să zicem a limegreen fundal:

input:checked { background: limegreen; }

O casetă bifată ar trebui să poată modifica toate casetele bifate adiacente. Cu alte cuvinte, dacă bifam a unsprezecea casetă de selectare din grilă, ar trebui să putem, de asemenea, să stilăm casetele care o înconjoară în partea de sus, jos, stânga și dreapta.

Acest lucru se face prin țintirea pseudo-elementelor corecte. Cum facem asta? Ei bine, depinde de numărul real de coloane din grilă. Iată CSS-ul dacă două casete adiacente sunt bifate într-o grilă 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;
}

Dacă preferați, puteți genera codul de mai sus în mod dinamic. Cu toate acestea, într-o grilă tipică, să zicem o galerie de imagini, numărul de coloane va fi mic și probabil un număr fix de articole, în timp ce rândurile ar putea continua să crească. Mai ales dacă este conceput pentru ecrane mobile. De aceea, această abordare este încă o cale eficientă de urmat. Dacă, dintr-un motiv oarecare, aplicația dvs. se întâmplă să aibă rânduri limitate și coloane extinse, atunci luați în considerare rotirea grilei în lateral, deoarece, cu un flux de elemente, Grila CSS le aranjează de la stânga la dreapta și de sus în jos (adică rând cu rând) .

De asemenea, trebuie să adăugăm stil pentru ultimele casete de selectare din grilă - nu sunt toate acoperite de pseudo-elemente, deoarece sunt ultimele elemente din fiecare axă.

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

Acestea sunt niște selectoare dificile! Primul…

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

... practic spune asta:

Un verificat <input> element de lângă un bifat <input> în ultima coloană.

Și nth-of-type se calculeaza astfel:

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

Deci, începem cu a treia casetă de selectare și selectăm fiecare a patra casetă de acolo. Și dacă o casetă de selectare din acea secvență este bifată, atunci stilăm casetele de selectare adiacente, dacă sunt de asemenea bifate.

Și această linie:

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

Spune asta:

An <input> elementul, cu condiția să fie verificat, este direct adiacent unui element, care este direct adiacent unui alt element, care este, de asemenea, direct adiacent unui alt element, care, la rândul său, este direct adiacent unui <input> element care se află într-o stare verificată.

Ceea ce înseamnă că bifam fiecare a patra casetă de selectare care este bifată. Și dacă o casetă de selectare din acea secvență este bifată, atunci stilăm următoarea a patra casetă de selectare din acea casetă de selectare dacă și aceasta este bifată.

Punându-l în folosință

Ceea ce tocmai ne-am uitat este principiul general și logica din spatele designului. Din nou, cât de util este în aplicația dvs. va depinde de designul grilei.

Am folosit margini rotunjite, dar puteți încerca alte forme sau chiar experimentați cu efecte de fundal (Temani vă oferă idei). Acum că știi cum funcționează formula, restul depinde în totalitate de imaginația ta.

Iată un exemplu despre cum ar putea arăta într-un calendar simplu:

Din nou, acesta este doar un prototip brut care folosește marcajul static. Și, ar fi o mulțime de considerații de accesibilitate de luat în considerare într-o funcție de calendar.

---

Asta-i o înfășurare! Destul de îngrijit, nu? Adică, nu este nimic exact „nou” în ceea ce se întâmplă. Dar este un bun exemplu selectarea lucrurilor în CSS. Dacă ne pricepem la tehnici de selecție mai avansate care folosesc combinatoare și pseudo-uri, atunci puterile noastre de stilare pot depăși cu mult stilul unui articol - așa cum am văzut, putem stila articole condiționat în funcție de starea altui element.

---

Stilizarea condiționată a elementelor selectate într-un container grilă publicat inițial pe CSS-trucuri. Tu ar trebui primiți buletinul informativ.

• Coinsmart. Cel mai bun schimb de Bitcoin și Crypto din Europa.
• Platoblockchain. Web3 Metaverse Intelligence. Cunoștințe amplificate. ACCES LIBER.
• CryptoHawk. Radar Altcoin. Încercare gratuită.
• Source: https://css-tricks.com/conditionally-styling-selected-elements-in-a-grid-container/