-
LangagesJavascript, SCSS, Twig
-
DépendancesAucune
-
Normes WCAGOui
-
AuteursIan Reid Langevin
Description
Extension de la classe MultipleChoicesFilters. Cette extension vous permet de facilement ajouter des tags pour les options sélectionnées de vos filtres. Vous pouvez décider de placer les tags où vous voulez. Ils peuvent être sous chaque filtre ou dans un même div. L'attribut data-tags-row, que vous ajoutez sur chaque input spécifie le id du div où vous souhaitez afficher le tag.
Le template de votre tag est tiré d'une balise <template>. Cela vous permet de modifier facilement la structure html de votre tag sans toucher à la fonction JavaScript.
Demo
Ananas
Avocat
Banane
Brocoli
Celeri
Citron
Filet mignon
Lime
Patate
Pomme
Salade
Steak
Documentation
Importez la fonction dans votre projet
import { MultipleChoicesFiltersWithTags } from "./functions/extends-tags.js"Instance et initialisation
Votre sélecteur est un div qui "wrap" vos multiples data-filters-group. Idéalement, utilisez un ID pour ce wrapper. Inspectez l'exemple ci-dessus si vous avez des questions ou regardez la structure HTML dans le fichier de template.
const myFilterWithTags = new MultipleChoicesFiltersWithTags("#filter-wrapper-tags", {
// your options - view default values below
})
// init your newly created filter wrapper instance
myFilterWithTags.init()Cet élément utilise les mêmes options et argument que le Multiple choices filters.