Catégories
Astuces et Design

Comment ajouter des virgules entre une liste d'éléments dynamiquement avec CSS

Imaginez que vous ayez une liste d'articles. Dites, fruit: banane, pomme, orange, poire, nectarine

Nous pourrions mettre ces virgules (,) dans le HTML, mais voyons comment nous pourrions le faire en CSS à la place, ce qui nous donne un niveau de contrôle supplémentaire. Nous nous assurerons que le dernier élément n’a pas de virgule pendant que nous y sommes.

J'en avais besoin pour un vrai projet récemment, et une partie des exigences était que l'un des éléments de la liste puisse être caché / révélé via JavaScript. Les virgules doivent fonctionner correctement, quels que soient les éléments actuellement affichés.

Une solution que j'ai trouvée plutôt élégante consiste à utiliser un combinateur général pour les frères et sœurs. Nous y reviendrons dans une minute. Commençons par un exemple de HTML. Disons que vous commencez par une liste de fruits:

  • Banana
  • Apple
  • Orange
  • Pear
  • Nectarine

Et quelques CSS de base pour les faire apparaître dans une 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;
}

Maintenant, disons que les choses se passent à l'intérieur de cette interface, comme un utilisateur bascule les commandes qui filtrent tous les fruits qui poussent dans les climats froids. Maintenant, un autre ensemble de fruits est montré, donc le fruit.on la classe est manipulée avec le classList API.

Jusqu'à présent, notre HTML et CSS créeraient une liste comme celle-ci:

BananaOrangeNectarine

Maintenant, nous pouvons atteindre ce combinateur général pour appliquer une virgule et un espace entre deux on éléments:

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

Agréable!

Vous pensez peut-être: pourquoi ne pas simplement appliquer des virgules à tous les éléments de la liste et les supprimer du dernier avec quelque chose comme :last-child ou :last-of-type. Le problème avec cela est que le dernier enfant pourrait être «éteint» à un moment donné. Donc, ce que nous voulons vraiment, c'est le dernier élément qui soit "activé", ce qui n'est pas facilement possible en CSS, car il n'y a rien de tel que "dernier de classe" disponible. Par conséquent, l'astuce générale du combinateur des frères et sœurs!

Dans l'interface utilisateur, j'ai utilisé max-width au lieu de display et basculé entre 0 et une valeur maximale raisonnable pour que je puisse utiliser des transitions pour activer et désactiver des éléments plus naturellement, ce qui permet à l'utilisateur de voir plus facilement quels éléments sont ajoutés ou supprimés de la liste. Vous pouvez également ajouter le même effet au pseudo-élément pour le rendre super lisse.

Voici une démonstration avec quelques exemples qui sont tous deux de légères variations. L'exemple des fruits utilise un hidden classe au lieu de on, et l'exemple des légumes a les animations. SCSS est également utilisé ici pour l'imbrication:

J'espère que cela aidera les autres à rechercher quelque chose de similaire!

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *