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.

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 provisional">.
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 contô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 contô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 contô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.

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-tagilfter-noresult">
	<p>Aucun élément ne correspond à cette combinaison de filtres.</p>
</div>

Comportement essentiel de la composante

• Par défaut, pour chaque groupe de filtres de cases à cocher, si aucune case n'est cochée, cela a le même effet que si toutes les cases étaient cochées.
• Le comportement de plusieurs cases à cocher dans un groupe est d'afficher les items dont l'une des balises est sélectionnée (comportement "OR"), et non d'afficher les éléments dont toutes les balises sont sélectionnées (comportement "AND").

Remarques

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

Date de modification :

2022-09-10