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 사용하여 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 으로 변합니다.