Så här lägger du till kommatecken mellan en lista med objekt dynamiskt med CSS

Tänk dig att du har en lista med objekt. Säg, frukt: banan, äpple, apelsin, päron, nektarin

vi kunde sätta dessa kommatecken (,) i HTML, men låt oss titta på hur vi kunde göra det i CSS istället, vilket ger oss en extra kontrollnivå. Vi ser till att sista objektet inte har ett komma Medan vi håller på med det.

jag behövde detta för ett riktigt projekt nyligen, och en del av kraven var att någon av objekten i listan kunde döljas/avslöjas via JavaScript. Kommatecken behövde fungera korrekt oavsett vilka objekt som för närvarande visades.

en lösning som jag hittade ganska elegant lösning använder general sibling combinator. Vi kommer till det om en minut. Låt oss börja med några exempel HTML. Säg att du börjar med en lista med frukter:

<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>

och några grundläggande CSS för att få dem att visas i en lista:

.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;}

Säg nu att saker händer inom detta gränssnitt, som en användare växlar kontroller som filtrerar bort alla frukter som växer i kalla klimat. Nu visas en annan uppsättning frukter, så klassen fruit.on manipuleras med classList API.

hittills skulle vår HTML och CSS skapa en lista så här:

BananaOrangeNectarine

nu kan vi nå den allmänna syskonkombinatorn för att tillämpa ett komma-och-mellanslag mellan två on – element:

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

snyggt!

du kanske tänker: varför inte bara använda kommatecken på alla listobjekt och ta bort det från det sista med något som :last-child eller :last-of-type. Problemet med det är det sista barnet kan vara ”off” vid varje given tidpunkt. Så vad vi verkligen vill ha är det sista objektet som är ”på”, vilket inte är lätt möjligt i CSS, eftersom det inte finns något som ”last of class” tillgängligt. Därför det allmänna syskonkombinationstricket!

i användargränssnittet använde jag max-width istället för display och växlade det mellan 0 och ett rimligt maximivärde så att jag kunde använda övergångar för att trycka objekt på och av mer naturligt, vilket gör det lättare för användaren att se vilka objekt som läggs till eller tas bort från listan. Du kan också lägga till samma effekt på pseudoelementet för att göra det super smidigt.

här är en demo med ett par exempel som båda är små variationer. Fruktexemplet använder en hidden – klass istället för on, och veggies-exemplet har animationerna. SCSS används också här för häckningen:

jag hoppas att det hjälper andra som letar efter något liknande!

Lämna ett svar

Din e-postadress kommer inte publiceras.