Hvordan Legge Til Komma Mellom En Liste Over Elementer Dynamisk MED CSS

Tenk deg at du har en liste over elementer. Si, frukt: Banan, Eple, Appelsin, Pære, Nektarin

Vi kunne sette disse kommaene (,) I HTML, men la oss se på hvordan vi kunne gjøre DET I CSS i stedet, noe som gir oss et ekstra nivå av kontroll. Vi sørger for at det siste elementet ikke har et komma mens vi er i gang.

jeg trengte dette for et ekte prosjekt nylig, og en del av kravene var at noen av elementene i listen kunne bli skjult / avslørt via JavaScript. Kommaene måtte fungere riktig uansett hvilke elementer som ble vist for øyeblikket.

En løsning jeg fant ganske elegant løsning, bruker generell søskenkombinator. Vi kommer til det om et minutt. La OSS starte med NOEN EKSEMPEL HTML. Si at du starter med en liste over frukt:

<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 noen grunnleggende CSS for å gjøre dem vises i 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;}

nå sier ting skjer inne i dette grensesnittet, som en bruker veksler kontroller som filtrerer ut alle frukter som vokser i kaldt klima. Nå vises et annet sett med frukt, så fruit.on – klassen er manipulert med classList API.

Så langt vil VÅR HTML og CSS lage en liste som dette:

BananaOrangeNectarine

Nå kan vi nå for den generelle søskenkombinatoren å bruke et komma-og-mellomrom mellom to on elementer:

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

Pent!

Du kan tenke: hvorfor ikke bare bruke komma til alle listeelementene og fjerne det fra det siste med noe som :last-child eller :last-of-type. Problemet med det er det siste barnet kan være » av » til enhver tid. Så hva vi virkelig ønsker er det siste elementet som er «på», som ikke er lett mulig I CSS, siden det er ingenting som «siste klasse» tilgjengelig. Derfor, den generelle søsken combinator triks!

i BRUKERGRENSESNITTET brukte jeg max-width i stedet for display og byttet det mellom 0 og en rimelig maksimumsverdi slik at jeg kunne bruke overganger til å skyve elementer på og av mer naturlig, noe som gjør det lettere for brukeren å se hvilke elementer som blir lagt til eller fjernet fra listen. Du kan legge til samme effekt på pseudo-elementet også for å gjøre det super glatt.

her er en demo med et par eksempler som begge er små variasjoner. Frukteksemplet bruker en hidden klasse i stedet for on, og veggies-eksemplet har animasjonene. SCSS brukes også her for nesting:

jeg håper dette hjelper andre på jakt etter noe lignende!

Legg igjen en kommentar

Din e-postadresse vil ikke bli publisert.