Composants

Puces de filtreNouveau

Des boutons ronds qui filtrent une liste dans la page, sans recharger : « Tout 53 », « 🧾 Facture 7 »… Une ligne qui défile sur téléphone (la page ne déborde jamais), des tons pour une ligne « À faire ». CSS seulement : la page garde sa logique de filtre. Premier usage : Gestion › Papiers.

Essayer

9 papiers

Le HTML

HTML

<div class="aub-puces" role="group" aria-label="Filtrer par type">
  <button type="button" class="aub-puce" aria-pressed="true">Tout <span class="aub-puce__n">53</span></button>
  <button type="button" class="aub-puce" aria-pressed="false"><span aria-hidden="true">🧾</span> Facture <span class="aub-puce__n">7</span></button>
</div>

<!-- Une ligne « À faire » : des tons, et le nombre en gras -->
<div class="aub-puces aub-puces--retour" role="group" aria-label="À faire">
  <button type="button" class="aub-puce aub-puce--danger" aria-pressed="false"><b>2</b> expirés</button>
  <button type="button" class="aub-puce aub-puce--accent" aria-pressed="false"><b>6</b> à vérifier</button>
</div>

Classe / attribut	Rôle
`.aub-puces`	La rangée : une seule ligne qui défile (fondu à droite) ; sous 720 px elle va jusqu’aux bords de l’écran. `--retour` : revient à la ligne à la place.
`.aub-puce`	Un bouton (`<button type="button">`). `aria-pressed="true"` = choisie (fond d’accent, gras).
`.aub-puce__n`	Le nombre, discret, en chiffres alignés.
`--danger` · `--warning` · `--accent`	Tons pour ce qui demande une action (expiré, bientôt, à vérifier). Le texte dit toujours la chose : la couleur ne fait que la souligner.

Le filtre

Les puces ne filtrent rien toutes seules : la page met à jour aria-pressed et cache ce qui ne correspond pas. Un re-clic sur la puce choisie revient à « Tout ».

puces.forEach(function (b) {
  b.addEventListener('click', function () {
    choix = choix === b.dataset.f ? '' : b.dataset.f;
    puces.forEach(function (x) { x.setAttribute('aria-pressed', String(x.dataset.f === choix)); });
    appliquer(); // cache les lignes, met à jour « n papiers sur N » (aria-live)
  });
});