Skip to main content

Dropdown

Demo

Voici un demo simple

Hey wassup! Add a form here with checkbox, radio, etc. See an example in the Multiple dropdown filters or Single choice filter sections.

Documentation

Importez la fonction dans votre projet

Le path peut changer selon votre structure de projet.

import { Dropdown } from "./functions/dropdown.js"

Créez et initialisez une instance

À noter que vous pouvez créer une seule instance pour tous les dropdown de votre site s'ils ont les mêmes options.

const dropdown = new Dropdown(".filter-dropdown", {
 // your options here - see options below
})
// init your newly created instance
dropdown.init()
Note : Ajoutez data-dropdown="select" à votre <div> qui a la classe du selector (par défaut, "filter-dropdown") si vous souhaitez que le titre du dropdown soit remplacé par la valeur sélectionnée d'un form. Voir le "Filter by colors" de la section Multiple dropdown filters pour la démo.

Cette façon de faire avec l'attribut data-dropdown permettra dans le futur d'ajouter d'autres comportements selon un type différent de contenu à l'intérieur du dropdown.

Options

  • Name
    Type
    Default
    Description
  • activeClass
    CSS class
    "filter-dropdown--active"
    Classe ajoutée lors de l'ouverture
  • closeClickOutside
    Boolean
    false
    Ferme le dropdown quand on clique ailleurs
  • headingText
    CSS selector
    ".filter-dropdown__heading-text"
    Selector utile pour remplacer le titre du dropdown par la valeur sélectionnée si un form a l'attribut data-type="select"

Code

Dossier de base

Dossier complet