tailwindcss dropdown

Rückenwind-CSS-Dropdown

Ein Plugin zum Erstellen barrierefreier, JavaScript-freier Dropdowns mit Tailwind CSS. Dies ist keine Komponente (obwohl Sie die folgenden Beispiele als Blaupause verwenden können).

? Sehen Sie es live auf CodeSandbox

? Installieren

npm install tailwindcss-dropdown

Fügen Sie in tailwind.config.js dropdown zu Ihren display hinzu und fordern Sie das Plugin wie folgt an:

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

Verwendung

Dieses Plugin fügt dropdown als Variante für display Dienstprogramme hinzu. Übersetzung: Sie können dropdown:block verwenden, um die display einer untergeordneten ul in block “ (oder eine andere hier aufgeführte Eigenschaft) zu ändern.

Es hängt stark von der Struktur Ihres HTML ab. z.B:

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 >

Beachten Sie, dass dropdown:block eine ul als untergeordnetes Element enthalten muss. Dasselbe könnte auch mit einer button erfolgen:

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 >

Weitere Beispiele auf CodeSandbox

?‍♂️ Wie funktioniert es?

Der Code für dropdown:block (und für jeden anderen Anzeigewert, wie dropdown:grid usw.) sieht folgendermaßen aus:

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

Wenn also das Element mit der Klasse dropdown:block den Fokus darin hat, wird die darin enthaltene ul in einen block umgewandelt.