Filtre de balise
Fonctionnalité instable
À utiliser à vos risques et périls. Cette fonctionnalité décrite ci-dessous peut être supprimée dans toute version mineure/majeure ultérieure
Jetez un coup d'oeil aux autres fonctionnalités provisoires disponibles.
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
Comment mettre en œuvre
Enveloppez votre section et ajoutez les balises à vos items.
- Enveloppez toute la section qui va être filtrée par balises dans un
<div class="wb-tagfilter provisional">
. - 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
- Créez votre case à cocher. L'attribut
name
est obligatoire pour les cases à cocher. - 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"
. - 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
- Créez votre bouton radio. L'attribut
name
est obligatoire pour les boutons radio. - 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"
. - 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
- Créez votre liste déroulante avec votre option par défaut. L'attribut
name
est obligatoire pour les listes déroulantes. - Ajoutez la classe CSS
wb-tagfilter-ctrl
à la case à cocher. - 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 :