So fügen Sie Kommas zwischen einer Liste von Elementen dynamisch mit CSS hinzu

Stellen Sie sich vor, Sie haben eine Liste von Elementen. Sagen wir, Obst: Banane, Apfel, Orange, Birne, Nektarine

Wir könnten diese Kommas (,) in den HTML-Code einfügen, aber schauen wir uns an, wie wir das stattdessen in CSS tun könnten, um uns ein zusätzliches Maß an Kontrolle zu geben. Wir werden sicherstellen, dass das letzte Element kein Komma hat, während wir dabei sind.

Ich brauchte dies kürzlich für ein echtes Projekt, und ein Teil der Anforderungen bestand darin, dass eines der Elemente in der Liste über JavaScript ausgeblendet / aufgedeckt werden konnte. Die Kommas mussten korrekt funktionieren, unabhängig davon, welche Elemente gerade angezeigt wurden.

Eine Lösung, die ich als ziemlich elegant empfunden habe, ist die Verwendung des allgemeinen Geschwisterkombinators. Dazu kommen wir gleich. Beginnen wir mit einem Beispiel-HTML. Angenommen, Sie beginnen mit einer Liste von Früchten:

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

Und einige grundlegende CSS, um sie in einer Liste erscheinen zu lassen:

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

Sagen Sie nun, dass Dinge in dieser Benutzeroberfläche passieren, wie ein Benutzer die Steuerelemente umschaltet, die alle Früchte herausfiltern, die in kalten Klimazonen wachsen. Jetzt wird ein anderer Satz von Früchten angezeigt, sodass die Klasse fruit.on mit der API classList manipuliert wird.

Bisher würden unser HTML und CSS eine Liste wie diese erstellen:

BananaOrangeNectarine

Jetzt können wir nach diesem allgemeinen Geschwisterkombinator greifen, um ein Komma und Leerzeichen zwischen zwei beliebigen on -Elementen anzuwenden:

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

Schön!

Sie denken vielleicht: Warum nicht einfach Kommas auf alle Listenelemente anwenden und sie mit etwas wie :last-child oder :last-of-type aus dem letzten entfernen. Das Problem dabei ist, dass das letzte Kind zu einem bestimmten Zeitpunkt „aus“ sein könnte. Was wir also wirklich wollen, ist das letzte Element, das „on“ ist, was in CSS nicht einfach möglich ist, da nichts wie „last of class“ verfügbar ist. Daher der allgemeine Geschwister-Kombinator-Trick!

In der Benutzeroberfläche habe ich max-width anstelle von display verwendet und zwischen 0 und einem vernünftigen Maximalwert umgeschaltet, damit ich Übergänge verwenden kann, um Elemente natürlicher ein- und auszuschalten, sodass der Benutzer leichter sehen kann, welche Elemente der Liste hinzugefügt oder daraus entfernt werden. Sie können dem Pseudoelement den gleichen Effekt hinzufügen, um es super glatt zu machen.

Hier ist eine Demo mit ein paar Beispielen, die beide leichte Variationen sind. Das fruits-Beispiel verwendet eine hidden -Klasse anstelle von on, und das veggies-Beispiel enthält die Animationen. SCSS wird auch hier für die Verschachtelung verwendet:

Ich hoffe, das hilft anderen, die nach etwas Ähnlichem suchen!

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht.