Valitud elementide tinglik kujundamine ruudustikukonteineris

Kalendrid, ostukorvid, galeriid, failiuurijad ja veebiteegid on mõned olukorrad, kus valitavad üksused kuvatakse ruudustikuna (st ruudukujuliste võredega). Teate, isegi need turvakontrollid, kus palutakse valida kõik pildid, millel on ülekäigurajad või mis iganes.

Leidsin korraliku viisi valitavate valikute kuvamiseks ruudustikus. Ei, mitte selle reCAPTCHA taasloomine, vaid lihtsalt võimalus valida mitu üksust. Ja kui kaks või enam külgnevat üksust on valitud, saame kasutada nutikaid :nth-of-type kombinaatorid, pseudoelemendid ja :checked pseudoklass, et kujundada need nii, et nad näevad koos välja.

Kombinaatorite ja pseudode idee ümarate märkeruutude saamiseks pärineb a eelmine artikkel, mille kirjutasin. See oli lihtne üheveeruline kujundus:

Seekord aga rakendatakse ümardamisefekti ruudustiku nii vertikaal- kui ka horisontaaltelgede piki elementidele. Selleks ei pea te olema lugenud minu viimast artiklit märkeruutude kujundamise kohta, sest ma käsitlen siin kõike, mida peate teadma. Kuid kui olete huvitatud sellest, mida me selles artiklis teeme, on seda väärt vaadata.

Enne kui alustame…

Teil on kasulik võtta teadmiseks mõned asjad. Näiteks kasutan ma oma demos lihtsuse huvides staatilist HTML-i ja CSS-i. Olenevalt teie rakendusest peate võib-olla genereerima ruudustiku ja selles olevad üksused dünaamiliselt. Jätan välja praktilised ligipääsetavuse kontrollid, et keskenduda efektile, kuid tootmiskeskkonnas tahaksite kindlasti sellist asja kaaluda.

Samuti kasutan paigutuseks CSS-võrku. Soovitaksin sama, kuid loomulikult on see ainult isiklik eelistus ja teie läbisõit võib erineda. Minu jaoks võimaldab ruudustiku kasutamine üksuse sihtimiseks hõlpsasti kasutada õdede-vendade valijaid ::before ja ::after pseudod.

Seega, olenemata paigutusstandardist, mida soovite oma rakenduses kasutada, veenduge, et pseudosid saaks CSS-is siiski sihtida, ja veenduge, et paigutus püsiks erinevates brauserites ja ekraanidel ühtlane.

Alustame kohe

Nagu olete võib-olla varasemas demos märganud, muudab märkeruudu elemendi märkimine ja märke eemaldamine kastide kujundust sõltuvalt teiste seda ümbritsevate märkeruutude valikuolekust. See on võimalik, kuna ma kujundasin iga kasti enda elemendi asemel külgnevate elementide pseudoelemente kasutades.

Järgmine joonis näitab, kuidas ::before kastide pseudoelemendid igas veerg (välja arvatud esimene veerg) kattuvad neist vasakul olevad kastid ja kuidas ::after kastide pseudoelemendid igas rida (välja arvatud esimene rida) kattuvad ülaltoodud kastidega.

Siin on põhikood

Märgistus on üsna lihtne:

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

Algses CSS-is toimub natuke rohkem. Kuid esiteks võrk ise:

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

See on viiest reast ja neljast veerust koosnev ruudustik, mis sisaldab märkeruutusid. Otsustasin kustutada märkeruutude vaikimisi välimuse, seejärel anda neile oma helehall taust ja üliümmargused äärised:

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

Pange tähele ka seda, et märkeruudud ise on ruudustikud. See on nende paigutamise võti ::before ja ::after pseudoelemendid. Rääkides sellest, teeme seda nüüd:

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

Me valime ainult nende märkeruutude pseudoelemendid, mis ei asu ruudustiku esimeses veerus ega esimeses reas. input:not(:nth-of-type(4n+1)) algab esimesest märkeruudust, seejärel valib ::before igast neljandast sealt pärit kaubast. Kuid pange tähele, me ütleme :not(), nii et tegelikult on see, mida me teeme kareldes the,en ::before iga neljanda märkeruudu pseudoelement, alustades esimesest. Seejärel rakendame stiile ::after iga märkeruudu pseudo alates viiendast.

Nüüd saame mõlemat stiilida ::before ja ::after pseudod iga märkeruudu jaoks, mis ei asu ruudustiku esimeses veerus või reas, nii et neid liigutatakse vastavalt vasakule või üles, peites need vaikimisi.

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

Stiili kujundamine :checked riik

Nüüd tuleb märkeruutude kujundamine, kui need on a :checked olek. Esiteks anname neile värvi, ütleme a limegreen taust:

input:checked { background: limegreen; }

Märgistatud ruut peaks suutma kõiki külgnevaid märkeruutusid ümber kujundada. Teisisõnu, kui valime ruudustikus üheteistkümnenda märkeruudu, peaksime saama stiilida ka seda ümbritsevad kastid üleval, all, vasakul ja paremal.

Seda tehakse õigete pseudoelementide sihtimisega. Kuidas me seda teeme? Noh, see sõltub ruudustiku tegelikust veergude arvust. Siin on CSS, kui 5⨉4 ruudustikus on märgitud kaks külgnevat kasti:

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

Soovi korral saate ülaltoodud koodi dünaamiliselt genereerida. Kuid tüüpilise ruudustiku, näiteks pildigalerii, veergude arv on väike ja tõenäoliselt fikseeritud arv üksusi, samas kui ridade arv võib pidevalt suureneda. Eriti kui see on mõeldud mobiiliekraanidele. Seetõttu on see lähenemisviis endiselt tõhus viis. Kui teie rakendusel on mingil põhjusel piiratud read ja laienevad veerud, siis kaaluge ruudustiku külgsuunas pööramist, sest üksuste voo korral korraldab CSS-võrk need vasakult paremale ja ülalt alla (st ridade kaupa) .

Peame lisama ka ruudustiku viimaste märkeruutude stiili – need kõik ei ole pseudoelementidega kaetud, kuna need on iga telje viimased üksused.

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

Need on mõned keerulised valijad! Esimene…

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

... ütleb põhimõtteliselt seda:

A kontrollitud <input> element märgistatud kõrval <input> teises viimases veerus.

Ja nth-of-type arvutatakse järgmiselt:

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

Seega alustame kolmandast märkeruudust ja valime sealt iga neljanda. Ja kui selle järjestuse märkeruut on märgitud, siis stiilime ka kõrvuti olevad märkeruudud, kui need on samuti märgitud.

Ja see rida:

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

Ütleb seda:

An <input> tingimusel, et element on kontrollitud, külgneb vahetult elemendiga, mis külgneb vahetult teise elemendiga, mis külgneb samuti vahetult teise elemendiga, mis omakorda külgneb vahetult elemendiga. <input> element, mis on kontrollitud olekus.

See tähendab, et me valime iga neljanda märgistatud märkeruudu. Ja kui selle järjestuse märkeruut on märgitud, kujundame selle märkeruudu järgmise neljanda märkeruudu, kui ka see on märgitud.

Selle kasutusele võtmine

See, mida me just vaatasime, on disaini üldpõhimõte ja loogika. Jällegi, kui kasulik see teie rakenduses on, sõltub ruudustiku kujundusest.

Kasutasin ümaraid ääriseid, kuid võite proovida muid kujundeid või isegi katsetada taustaefektidega (Temani pakub teile ideid). Nüüd, kui teate, kuidas valem töötab, on ülejäänu täielikult teie kujutlusvõime teha.

Siin on näide sellest, kuidas see lihtsas kalendris välja näeb:

Jällegi on see staatilist märgistust kasutav umbkaudne prototüüp. Ja kalendrifunktsiooni puhul tuleks arvesse võtta palju ja palju juurdepääsetavuse kaalutlusi.

---

See on mähis! Päris korralik, eks? Ma mõtlen, et selles, mis toimub, pole midagi täpselt "uut". Aga see on hea näide asjade valimine CSS-is. Kui meil on käepide keerukamate valikutehnikatega, mis kasutavad kombinaatoreid ja pseudosid, siis võivad meie stiilivõimed ulatuda ühe elemendi stiilimisest palju kaugemale – nagu nägime, saame elemente tinglikult stiilida teise elemendi oleku alusel.

---

Valitud elementide tinglik kujundamine ruudustikukonteineris algselt avaldatud CSS-nipid. Sa peaksid hankige uudiskiri.

• Münditark. Euroopa parim Bitcoini ja krüptobörs.
• Platoblockchain. Web3 metaversiooni intelligentsus. Täiustatud teadmised. TASUTA PÄÄS.
• CryptoHawk. Altcoini radar. Tasuta prooviversioon.
• Source: https://css-tricks.com/conditionally-styling-selected-elements-in-a-grid-container/