Valittujen elementtien ehdollinen muotoilu ruudukkosäiliössä

Kalenterit, ostoskärryt, galleriat, tiedostojen tutkijat ja online-kirjastot ovat joitain tilanteita, joissa valittavat kohteet näkyvät ruudukoissa (eli neliöhilassa). Tiedätkö, jopa ne turvatarkastukset, joissa sinua pyydetään valitsemaan kaikki kuvat, joissa on suojatie tai mitä tahansa.

Löysin siistin tavan näyttää valittavat vaihtoehdot ruudukossa. Ei, en luo tätä reCAPTCHAa uudelleen, vaan pystymme yksinkertaisesti valitsemaan useita kohteita. Ja kun valitaan kaksi tai useampi vierekkäinen kohde, voimme käyttää älykkäitä :nth-of-type kombinaattorit, pseudoelementit ja :checked pseudoluokka tyylistä ne tavalla, jossa ne näyttävät ryhmiteltyiltä.

Koko idea kombinaattoreista ja pseudoista pyöristetyn valintaruudun saamiseksi tuli a edellinen kirjoittamani artikkeli. Se oli yksinkertainen yksisarainen malli:

Tällä kertaa pyöristysvaikutelma kohdistuu kuitenkin elementteihin ruudukon sekä pysty- että vaaka-akselilla. Sinun ei tarvitse olla lukenut viimeisintä valintaruutujen muotoilua koskevaa artikkeliani, koska aion käsitellä täällä kaiken, mitä sinun tarvitsee tietää. Mutta jos olet kiinnostunut kevennetystä näkemyksestä, mitä teemme tässä artikkelissa, se kannattaa tarkistaa.

Ennen kuin aloitamme…

Sinun on hyödyllistä ottaa huomioon muutamia asioita. Käytän esimerkiksi staattista HTML:ää ja CSS:ää demossani yksinkertaisuuden vuoksi. Sovelluksestasi riippuen saatat joutua luomaan ruudukon ja sen kohteet dynaamisesti. Käytännön esteettömyyden tarkistukset jätän huomioimatta tehosteen huomioimiseksi, mutta tuota kannattaisi ehdottomasti harkita tuota tuotantoympäristössä.

Lisäksi käytän asettelussa CSS-ruudukkoa. Suosittelisin samaa, mutta tietysti se on vain henkilökohtainen mieltymys ja kilometrimääräsi voi vaihdella. Minulle ruudukon avulla voin helposti käyttää sisarusvalitsimia kohteen kohdistamiseen ::before ja ::after pseudot.

Tästä syystä riippumatta siitä, mitä asettelustandardia haluat käyttää sovelluksessasi, varmista, että pseudot voidaan edelleen kohdistaa CSS:ssä ja varmistaa, että asettelu pysyy tahdissa eri selaimissa ja näytöissä.

Aloitetaan nyt

Kuten olet ehkä huomannut aikaisemmassa esittelyssä, valintaruutuelementin valinta ja valinnan poistaminen muuttaa ruutujen suunnittelua sen mukaan, mikä on muiden valintaruutujen valintatila. Tämä on mahdollista, koska olen tyylistänyt jokaisen laatikon käyttämällä sen viereisten elementtien pseudoelementtejä oman elementin sijaan.

Seuraava kuva näyttää kuinka ::before laatikoiden pseudoelementtejä kussakin sarake (lukuun ottamatta ensimmäistä saraketta) päällekkäin niiden vasemmalla puolella olevien ruutujen kanssa, ja miten ::after laatikoiden pseudoelementtejä kussakin rivi (lukuun ottamatta ensimmäistä riviä) päällekkäin yllä olevien ruutujen kanssa.

Tässä on peruskoodi

Merkintä on melko suoraviivainen:

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

Alkuperäisessä CSS:ssä tapahtuu vähän enemmän. Mutta ensin itse ruudukko:

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

Se on viiden rivin ja neljän sarakkeen ruudukko, joka sisältää valintaruudut. Päätin pyyhkiä pois valintaruutujen oletusulkoasun ja antaa niille oman vaaleanharmaan taustan ja erittäin pyöristetyt reunat:

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

Huomaa myös, että itse valintaruudut ovat ruudukoita. Se on avain niiden sijoittamiseen ::before ja ::after pseudoelementtejä. Siitä puheen ollen, tehdään se nyt:

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

Valitsemme vain valintaruutujen pseudoelementit, jotka eivät ole ruudukon ensimmäisessä sarakkeessa tai ensimmäisessä rivissä. input:not(:nth-of-type(4n+1)) alkaa ensimmäisestä valintaruudusta ja valitsee sitten ::before joka neljännestä tuotteesta. Mutta huomaa, että me sanomme :not(), joten todellakin mitä teemme sivuutan Ishayoiden opettaman ::before joka neljännen valintaruudun pseudoelementti ensimmäisestä alkaen. Sitten käytämme tyylejä ::after pseudo jokaisesta valintaruudusta viidennestä alkaen.

Nyt voimme muotoilla molemmat ::before ja ::after pseudot jokaiselle valintaruudulle, joka ei ole ruudukon ensimmäisessä sarakkeessa tai rivissä, jolloin ne siirretään vasemmalle tai ylös, jolloin ne piilotetaan oletuksena.

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

Muotoilu :checked olivat

Nyt tulee valintaruutujen muotoilu, kun ne ovat kohdassa a :checked osavaltio. Ensin annetaan heille väri, sano a limegreen tausta:

input:checked { background: limegreen; }

Valitun ruudun pitäisi pystyä muokkaamaan kaikkien viereisten valintaruutujen tyyliä. Toisin sanoen, jos valitsemme ruudukosta yhdennentoista valintaruudun, meidän pitäisi myös pystyä tyylittämään sitä ympäröivät ruudut ylä-, ala-, vasemmalla ja oikealla.

Tämä tehdään kohdistamalla oikeat pseudoelementit. Miten se tehdään? No, se riippuu ruudukon sarakkeiden todellisesta määrästä. Tässä on CSS, jos kaksi vierekkäistä ruutua on valittuna 5⨉4-ruudukossa:

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

Halutessasi voit luoda yllä olevan koodin dynaamisesti. Tyypillisessä ruudukossa, esimerkiksi kuvagalleriassa, sarakkeiden määrä on kuitenkin pieni ja todennäköisesti kiinteä määrä kohteita, kun taas rivit saattavat kasvaa jatkuvasti. Varsinkin jos se on suunniteltu mobiilinäytöille. Siksi tämä lähestymistapa on edelleen tehokas tapa edetä. Jos sovelluksessasi jostain syystä sattuu olemaan rajoitettuja rivejä ja laajennettavia sarakkeita, harkitse ruudukon kääntämistä sivusuunnassa, koska CSS-ruudukko järjestää ne vasemmalta oikealle ja ylhäältä alas (eli rivi riviltä) kohdevirran kanssa. .

Meidän on myös lisättävä tyyli ruudukon viimeisiin valintaruutuihin – niitä ei kaikkia peitä pseudoelementit, koska ne ovat kunkin akselin viimeisiä kohteita.

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

Nämä ovat hankalia valitsimia! Ensimmäinen…

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

...pohjimmiltaan sanoo näin:

Tarkistettu <input> elementti valitun vieressä <input> toisessa viimeisessä sarakkeessa.

Ja nth-of-type lasketaan näin:

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

Joten aloitamme kolmannesta valintaruudusta ja valitsemme sieltä joka neljännen. Ja jos valintaruutu kyseisessä sarjassa on valittuna, tyyliimme myös viereiset valintaruudut, jos ne on myös valittu.

Ja tämä rivi:

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

Sanoo näin:

An <input> elementti, jos se on tarkistettu, on suoraan elementin vieressä, joka on suoraan toisen elementin vieressä, joka on myös suoraan toisen elementin vieressä, joka puolestaan ​​on suoraan vieressä <input> elementti, joka on tarkistetussa tilassa.

Tämä tarkoittaa, että valitsemme joka neljännen valitun valintaruudun. Ja jos valintaruutu kyseisessä sarjassa on valittuna, muotoilemme seuraavan neljännen valintaruudun kyseisestä valintaruudusta, jos sekin on valittuna.

Käyttöönotto

Tarkastelimme juuri suunnittelun yleistä periaatetta ja logiikkaa. Jälleen kuinka hyödyllinen se on sovelluksessasi, riippuu ruudukon suunnittelusta.

Käytin pyöristettyjä reunuksia, mutta voit kokeilla muita muotoja tai jopa kokeilla taustatehosteita (Temani tarjoaa sinulle ideoita). Nyt kun tiedät kuinka kaava toimii, loppu on täysin mielikuvituksesi varassa.

Tässä on esimerkki siitä, miltä se saattaa näyttää yksinkertaisessa kalenterissa:

Jälleen tämä on vain karkea prototyyppi, joka käyttää staattista merkintää. Ja kalenteriominaisuuden yhteydessä on otettava huomioon monia esteettömyysnäkökohtia.

---

Se on kääre! Aika siisti, eikö? Tarkoitan, että siinä, mitä tapahtuu, ei ole mitään aivan "uutta". Mutta se on hyvä esimerkki asioiden valitseminen CSS:ssä. Jos hallitsemme edistyneempiä valintatekniikoita, joissa käytetään kombinaattoreita ja pseudoja, muotoiluvoimamme voivat ulottua paljon pidemmälle kuin yhden kohteen muotoilu – kuten näimme, voimme ehdollisesti muotoilla kohteita toisen elementin tilan perusteella.

---

Valittujen elementtien ehdollinen muotoilu ruudukkosäiliössä alun perin julkaistu CSS-temppuja. Sinun pitäisi hanki uutiskirje.

• Coinsmart. Euroopan paras Bitcoin- ja kryptopörssi.
• Platoblockchain. Web3 Metaverse Intelligence. Tietoa laajennettu. VAPAA PÄÄSY.
• CryptoHawk. Altcoinin tutka. Ilmainen kokeilu.
• Lähde: https://css-tricks.com/conditionally-styling-selected-elements-in-a-grid-container/