tailwindcss dropdown

Tailwind CSS ドロップダウン

Tailwind CSS を使用して、アクセス可能な JavaScript フリーのドロップダウンを作成するプラグイン。これはコンポーネントではありません (ただし、以下の例を青写真として使用できます)。

? CodeSandbox でライブをご覧ください

?インストール

npm install tailwindcss-dropdown

tailwind.config.jsで、次のようにdisplayバリアントにdropdownを追加し、プラグインを要求します。

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

使用法

このプラグインは、 displayユーティリティのバリアントとしてdropdownを追加します。翻訳： dropdown:blockを使用して、子ulのdisplayをblock （またはここにリストされている他のプロパティ）に変更できます。

それは HTML の構造に大きく依存します。例えば：

Home

Support

Products

• macOS
• Windows

">

 < ul class =" flex space-x-6 " role =" navigation " >
  < li > < a href = # > Home  a >  li >
  < li > < a href = # > Support  a >  li >
  
  < li class =" relative dropdown:block " aria-haspopup =" true " >
    < a href = # > Products  a >
    
    < 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 >

dropdown:block子としてul含まれている必要があることに注意してください。 buttonでも同じことができます。

Products

• macOS
• Windows

">

 
< button class =" relative dropdown:block " role =" navigation " aria-haspopup =" true " >
  Products
  
  < 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 >

CodeSandbox のその他の例

?‍♂️ 仕組みは?

dropdown:block (および、 dropdown:gridなどの他のすべての表示値) のコードは次のようになります。

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

したがって、クラスdropdown:blockの要素にフォーカスがある場合、その要素内のul blockに変わります。