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 的結構。例如：

 < 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 >

請注意， dropdown:block必須包含ul作為子項目。使用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 >

有關 CodeSandbox 的更多範例

?‍♂️ 它是如何運作的？

dropdown:block （以及每個其他顯示值，如dropdown:grid等）的程式碼將如下所示：

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

因此，當具有dropdown:block類別的元素在其中獲得焦點時，其中的ul就會變成block 。