الصفحة الرئيسية>المتعلقة بالبرمجة>شفرة المصدر الأخرى
تنزيل

القائمة المنسدلة 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 الخاص بك. على سبيل المثال: 

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

يوسع
معلومات إضافية
تطبيقات ذات صلة
نوصي لك
أخبار ذات صلة الكل