tailwindcss dropdown

Раскрывающийся список CSS «Попутный ветер»

Плагин для создания доступных раскрывающихся списков без JavaScript с помощью Tailwind CSS. Это не компонент (хотя вы можете использовать приведенные ниже примеры в качестве образца).

? Посмотрите это в прямом эфире на 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 , чтобы изменить display дочернего ul на 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 .