tailwindcss dropdown

Tarik-turun CSS Tailwind

Sebuah plugin untuk membuat dropdown bebas JavaScript yang dapat diakses dengan Tailwind CSS. Ini bukan sebuah komponen (meskipun Anda dapat menggunakan contoh di bawah ini sebagai cetak biru).

? Lihat langsung di CodeSandbox

? Memasang

npm install tailwindcss-dropdown

Di tailwind.config.js tambahkan dropdown ke varian display Anda dan memerlukan plugin, seperti ini:

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

Penggunaan

Plugin ini menambahkan dropdown sebagai varian untuk utilitas display . Menerjemahkan: Anda dapat menggunakan dropdown:block untuk mengubah display ul anak yang akan block (atau properti lain yang tercantum di sini)

Itu sangat bergantung pada struktur HTML Anda. misalnya:

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

Perhatikan bahwa dropdown:block harus berisi ul sebagai anak. Hal yang sama dapat dilakukan dengan 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 >

Contoh lainnya di CodeSandbox

?‍♂️ Bagaimana cara kerjanya?

Kode untuk dropdown:block (dan untuk setiap nilai tampilan lainnya, seperti dropdown:grid , dll) akan terlihat seperti ini:

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

Jadi, ketika elemen dengan kelas dropdown:block memiliki fokus di dalamnya, ul di dalamnya berubah menjadi block .