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", {
closeClickingOutside: 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
-
NameTypeDefaultDescription
-
closeClickingOutsideBooleanfalseFerme le dropdown quand on clique ailleurs