tailwindcss dropdown

القائمة المنسدلة Tailwind CSS

مكون إضافي لإنشاء قوائم منسدلة مجانية لجافا سكريبت ويمكن الوصول إليها باستخدام 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

" style=";text-align:right;direction:rtl">

 < 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

" style=";text-align:right;direction:rtl">

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