Sådan tilføjes kommaer mellem en liste over emner dynamisk med CSS

Forestil dig, at du har en liste over emner. Sig, frugt: banan, æble, appelsin, pære, nektarin

vi kunne sætte disse kommaer (,) i HTML, men lad os se på, hvordan vi kunne gøre det i CSS i stedet, hvilket giver os et ekstra niveau af kontrol. Vi sørger for, at sidste element ikke har et komma, mens vi er ved det.

jeg havde brug for dette til et rigtigt projekt for nylig, og en del af kravene var, at nogen af elementerne på listen kunne skjules/afsløres via JavaScript. Kommaerne skulle fungere korrekt, uanset hvilke elementer der blev vist i øjeblikket.

en løsning, jeg fandt temmelig elegant løsning, bruger general sibling combinator. Vi kommer til det om et øjeblik. Lad os starte med et eksempel HTML. Sig, at du starter med en liste over frugter:

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

og nogle grundlæggende CSS for at få dem til at vises på en liste:

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

sig nu, at der sker ting inde i denne grænseflade, som en bruger skifter kontroller, der filtrerer alle frugter, der vokser i kolde klimaer. Nu vises et andet sæt frugter, så fruit.on – klassen manipuleres med classList API.

indtil videre ville vores HTML og CSS oprette en liste som denne:

BananaOrangeNectarine

nu kan vi nå til den generelle søskendekombinator for at anvende et komma – og-mellemrum mellem to on elementer:

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

flot!

du tænker måske: hvorfor ikke bare anvende kommaer på alle listeelementerne og fjerne det fra det sidste med noget som :last-child eller :last-of-type. Problemet med det er, at det sidste barn kan være “slukket” til enhver tid. Så hvad vi virkelig ønsker, er det sidste element, der er “på”, hvilket ikke er let muligt i CSS, da der ikke er noget som “sidste klasse” til rådighed. Derfor er det generelle søskendekombinator trick!

i brugergrænsefladen brugte jeg max-width i stedet for display og skiftede det mellem 0 og en rimelig maksimal værdi, så jeg kunne bruge overgange til at skubbe elementer til og fra mere naturligt, hvilket gør det lettere for brugeren at se, hvilke elementer der tilføjes eller fjernes fra listen. Du kan også tilføje den samme effekt til pseudoelementet for at gøre det super glat.

her er en demo med et par eksempler, der begge er små variationer. Frugteksemplet bruger en hidden klasse i stedet for on, og veggies-eksemplet har animationerne. SCSS bruges også her til indlejring:

jeg håber, at dette hjælper andre på udkig efter noget lignende!

Skriv et svar

Din e-mailadresse vil ikke blive publiceret.