tailwindcss dropdown

Tailwind CSS 下拉菜单

一个使用 Tailwind CSS 创建可访问、无 JavaScript 的下拉菜单的插件。这不是一个组件（尽管您可以使用下面的示例作为蓝图）。

？在 CodeSandbox 上观看直播

？安装

npm install tailwindcss-dropdown

在tailwind.config.js中将dropdown添加到您的display变体并需要该插件，如下所示：

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

用法

该插件添加dropdown作为display实用程序的变体。翻译：您可以使用dropdown:block更改要block子ul的display （或此处列出的任何其他属性）

它在很大程度上取决于 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 。