tailwindcss dropdown

Liste déroulante CSS Tailwind

Un plugin pour créer des listes déroulantes accessibles et gratuites avec Tailwind CSS. Il ne s'agit pas d'un composant (bien que vous puissiez utiliser les exemples ci-dessous comme modèle).

? Voyez-le en direct sur CodeSandbox

? Installer

npm install tailwindcss-dropdown

Dans tailwind.config.js ajoutez dropdown à vos variantes display et exigez le plugin, comme ceci :

 module . exports = {
  theme : { } ,
  variants : {
    display : [ 'responsive' , 'dropdown' ]
  } ,
  plugins : [ require ( 'tailwindcss-dropdown' ) ] ,
} 

Usage

Ce plugin ajoute dropdown comme variante pour les utilitaires display . Traduction : vous pouvez utiliser dropdown:block pour modifier l' display d'un ul enfant à block (ou toute autre propriété répertoriée ici)

Cela dépend fortement de la structure de votre HTML. par exemple :

 < ul class =" flex space-x-6 " role =" navigation " >
  < li > < a href = # > Home </ a > </ li >
  < li > < a href = # > Support </ a > </ li >
  <!-- 1) dropdown:block -->
  < li class =" relative dropdown:block " aria-haspopup =" true " >
    < a href = # > Products </ a >
    <!-- 2) will transform this ul in a block when focused -->
    < ul class =" hidden absolute right-0 w-auto " aria-label =" submenu " >
      < li > < a href = # > macOS </ a > </ li >
      < li > < a href = # > Windows </ a > </ li >
    </ ul >
  </ li >
</ ul >

Notez que dropdown:block doit contenir un ul en tant qu'enfant. La même chose pourrait être faite avec un button :

 <!-- 1) dropdown:block -->
< button class =" relative dropdown:block " role =" navigation " aria-haspopup =" true " >
  Products
  <!-- 2) will transform this ul in a block when focused -->
  < ul class =" absolute right-0 hidden w-auto " aria-label =" submenu " >
    < li > < a href =" # " > macOS </ a > </ li >
    < li > < a href =" # " > Windows </ a > </ li >
  </ ul >
</ button >

Plus d'exemples sur CodeSandbox

?‍♂️ Comment ça marche ?

Le code pour dropdown:block (et pour toutes les autres valeurs d'affichage, comme dropdown:grid , etc.) ressemblera à ceci :

. dropdown  : block : focus-within > ul {
  display : block;
}

Ainsi, lorsque l'élément avec la classe dropdown:block a le focus à l'intérieur, l' ul à l'intérieur se transforme en block .