Hoe komma ‘ s dynamisch tussen een lijst met Items toe te voegen met CSS

stel je voor dat je een lijst met items hebt. Laten we zeggen, fruit: banaan, appel, sinaasappel, peer, Nectarine

we zouden die komma ‘ s (,) in de HTML kunnen zetten, maar laten we eens kijken hoe we dat in CSS kunnen doen, wat ons een extra niveau van controle geeft. We zullen ervoor zorgen dat dat laatste item geen komma heeft als we toch bezig zijn.

ik had dit onlangs nodig voor een echt project, en een deel van de vereisten was dat elk van de items in de lijst verborgen/onthuld kon worden via JavaScript. De komma ‘ s moesten correct werken, ongeacht welke items op dit moment werden getoond.

een oplossing die ik vrij elegant vond, is het gebruik van een algemene combinator. Daar komen we zo op terug. Laten we beginnen met een voorbeeld HTML. Stel dat je begint met een lijst van vruchten:

<ul class="fruits"> <li class="fruit on">Banana</li> <li class="fruit on">Apple</li> <li class="fruit on">Orange</li> <li class="fruit on">Pear</li> <li class="fruit on">Nectarine</li></ul>

en een aantal fundamentele CSS om ze te laten verschijnen in een lijst:

.fruits { display: flex; padding-inline-start: 0; list-style: none;}.fruit { display: none; /* hidden by default */} .fruit.on { /* JavaScript-added class to reveal list items */ display: inline-block;}

stel nu dat er dingen gebeuren in deze interface, zoals een gebruiker schakelt besturingselementen die filteren uit alle vruchten die groeien in koude klimaten. Nu wordt een andere set van vruchten getoond, dus de fruit.on klasse wordt gemanipuleerd met de classList API.

tot nu toe zouden onze HTML en CSS een lijst als deze aanmaken:

BananaOrangeNectarine

nu kunnen we bereiken dat die algemene broer of zus combinator een komma-en-spatie toepast tussen twee on elementen:

.fruit.on ~ .fruit.on::before { content: ', '; }

mooi!

u zou kunnen denken: waarom niet gewoon komma ‘ s toepassen op alle items in de lijst en verwijderen van de laatste met iets als :last-child of :last-of-type. Het probleem daarmee is dat het laatste kind op elk moment “off” kan zijn. Dus wat we echt willen is het laatste item dat is ” op, “wat niet gemakkelijk mogelijk is in CSS, omdat er niets als” laatste van klasse ” beschikbaar. Vandaar de Algemene sibling combinator Truc!

In de gebruikersinterface gebruikte ik max-width in plaats van display en schakelde dat tussen 0 en een redelijke maximumwaarde in, zodat ik overgangen kon gebruiken om items natuurlijker in-en uit te duwen, waardoor het voor de gebruiker gemakkelijker werd om te zien welke items worden toegevoegd of verwijderd uit de lijst. Je kunt hetzelfde effect aan het pseudo-element toevoegen om het super glad te maken.

hier is een demo met een paar voorbeelden die beide kleine variaties zijn. Het fruit voorbeeld gebruikt een hidden klasse in plaats van on, en het groenten voorbeeld heeft de animaties. SCSS wordt hier ook gebruikt voor de nesting:

ik hoop dat dit helpt bij het zoeken naar iets dergelijks!

Geef een antwoord

Het e-mailadres wordt niet gepubliceerd.