Filtre de balise

Questions ou commentaires?

Objectif

Filtre le contenu et affiche/masque le contenu qui correspond à certaines balises.

Utiliser quand

Vous souhaitez filtrer une longue liste d'éléments.

Conseils d'accessibilité

Les contrôles de filtre (cases à cocher, boutons radio, listes déroulantes) doivent apparaître avant la liste des éléments qu'ils contrôlent.

Évaluations et rapports

Exemple fonctionnel

Exemple en anglais

Exemple français

Comment mettre en œuvre

Enveloppez votre section et ajoutez les balises à vos items.

  1. Enveloppez toute la section qui va être filtrée par balises dans un <div class="wb-tagfilter"> ou un <section class="wb-tagfilter">.
  2. Ajoutez l'attribut data-wb-tags à chaque item dont vous souhaitez contrôler la visibilité, et définissez une ou plusieurs balises comme valeur. Utilisez un espace régulier entre chaque balise, par exemple, data-wb-tags="balise1 balise2 balise3".

Identifiez le conteneur de vos items

Ajoutez la classe .wb-tagfilter-items à l'élément enveloppant vos items avec balises. Par exemple:

<ul class="wb-tagfilter-items">
	<li data-wb-tags="tag1">Item 1</li>
	<li data-wb-tags="tag2">Item 2</li>
	<li data-wb-tags="tag1">Item 3</li>
	<li data-wb-tags="tag2">Item 4</li>
	<li data-wb-tags="tag1">Item 5</li>
	...
</ul>

Ajoutez vos contrôles de filtre

Pour les cases à cocher

  1. Créez votre case à cocher. L'attribut name est obligatoire pour les cases à cocher.
  2. Ajoutez l'attribut value à la case à cocher. Remarque : la valeur de cet attribut doit être identique à celle de la balise ajoutée à l'élément ou aux éléments qui pourront être contrôlés, par exemple, value="maBalise".
  3. Ajoutez la classe CSS wb-tagfilter-ctrl à la case à cocher.

Votre case à cocher finale devrait ressembler à ceci :

<input type="checkbox" name="myCheckboxGroup" class="wb-tagfilter-ctrl" value="maBalise">

Pour les boutons radio

  1. Créez votre bouton radio. L'attribut name est obligatoire pour les boutons radio.
  2. Ajoutez l'attribut value au bouton radio. Remarque : la valeur de cet attribut doit être la même que celle de la balise ajoutée à l'élément ou aux éléments qui pourront être contrôlés, par exemple, value="maBalise".
  3. Ajoutez la classe CSS wb-tagfilter-ctrl à la case à cocher.

Votre bouton radio final devrait ressembler à ceci :

<input type="radio" name="myRadioGroup" class="wb-tagfilter-ctrl" value="maBalise">

Pour les listes déroulantes

  1. Créez votre liste déroulante avec votre option par défaut. L'attribut name est obligatoire pour les listes déroulantes.
  2. Ajoutez la classe CSS wb-tagfilter-ctrl à la case à cocher.
  3. Ajoutez vos autres options et définissez l'attribut value. Remarque : la valeur de cet attribut doit être la même que celle de la balise ajoutée à l'élément ou aux éléments qui pourront être contrôlés, par exemple, value="maBalise".

Votre liste déroulante finale devrait ressembler à ceci :

<select name="myDropdown" class="wb-tagfilter-ctrl">
	<option value="">Tous</option>
	<option value="maBalise">Ma balise</option>
	<option value="maBalise2">Ma balise 2</option>
	<option value="maBalise3">Ma balise 3</option>
</select>

Remarque : ajoutez une valeur vide à votre option afin d'afficher tous les items.

Pour la plage de dates

  1. Créez votre champ type="date" pour la date de début ou de fin
  2. L'attribut name est obligatoire et doit être soit startDate soit endDate
  3. Ajoutez la classe CSS wb-tagfilter-ctrl à l'input.

    Vos champs de date finaux devraient ressembler à ceci :

    <label for="dateRangeStart">Date de début :</label>
	<input type="date" id="dateRangeStart" name="startDate" class="wb-tagfilter-ctrl form-control">
	<label for="dateRangeEnd">Date de fin :</label>
	<input type="date" id="dateRangeEnd" name="endDate" class="wb-tagfilter-ctrl form-control">

  4. Ajoutez un élément <time> à l'élément étiqueté. L'attribut datetime de l'élément <time> doit contenir la date ISO de l'élément. C'est ce que le filtre de plage de dates utilise pour faire correspondre les éléments.

    <li data-wb-tags="tag1 tag2">
<time datetime="2025-09-10">Mercredi 10 septembre 2025</time>
...
	</li>

Cela permet au plugiciel de filtrer les éléments étiquetés en fonction de l'attribut datetime de leurs éléments <time>. Vous pouvez utiliser soit la date de début, soit la date de fin, ou les deux ensemble.

Ajoutez votre élément pour aucun résultat

En option, vous pouvez ajouter un élément qui s'affichera lorsqu'aucun item n'est visible. Identifiez cet élément avec la classe CSS wb-tagfilter-noresult.

Cet élément doit être ajouté directement après l'élément enveloppant votre liste d'items (.wb-tagfilter-items).

Par exemple :

<ul class="wb-tagfilter-items">
	<li data-wb-tags="tag1">Item 1</li>
	<li data-wb-tags="tag2">Item 2</li>
	<li data-wb-tags="tag1">Item 3</li>
	<li data-wb-tags="tag2">Item 4</li>
	<li data-wb-tags="tag1">Item 5</li>
	...
</ul>
<div class="wb-tagfilter-noresult">
	<p>Aucun élément ne correspond à cette combinaison de filtres.</p>
</div>

Comportement essentiel de la composante

Remarques

Pour des raisons sémantiques, chaque groupe logique de filtres devrait être enveloppé par un élément <fieldset>.

Date de modification :