Skip to main content

Dropdown

Demo

Voici un demo simple

Installation

Importez la fonction dans votre projet

import { Dropdown } from "@overdog/fn"

Créez et initialisez une instance

new Dropdown(".filter-dropdown", {
   closeClickOutside: true
}).init()

Ajoutez les variants Tailwind dans la section plugins de votre fichier de config

Note : si vous utilisez plusieurs éléments de Overdog FN qui nécessitent les mêmes variants, vous les ajoutez seulement une fois.

module.exports = {
   // ...
   plugins: [
      plugin(function ({ addVariant }) {
         addVariant("is-open", "&[data-fn-is-open]")
         addVariant("parent-is-open", "[data-fn-is-open] &")
      })
   ]
}

Twig template Code


<div class="filter-dropdown max-w-[500px] relative"> {# the class filter-dropdown is only use for targeting with your JS instance #}
   <button 
      class="flex items-center border-b border-[#a5adb9] h-[50px] justify-between text-left w-full"
      aria-expanded="false"
      aria-controls="my-dropdown-id"
   >
      <span>Open me</span>
      {# caret #}
      <span class="
         border-b-0 border-x-transparent border-x-[0.3em] border-t-[0.3em] border-t-slate-600
         transition-all ease-linear duration-200
         parent-is-open:rotate-180"
      >
      </span>
   </button>
   <div 
      id="my-dropdown-id" {# only for aria-controls - not used by JS #}
      class="absolute hidden left-0 p-4 bg-white rounded-b-md shadow-md overflow-hidden w-full z-10
      parent-is-open:block
      ">
      <p>Hey wassup! Add a form here with checkbox, radio, etc. See an example in the Multiple dropdown filters or Single choice filter sections.</p>
   </div>
</div>

Options