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

@Tailwindcss/Ratio

المكون الإضافي الذي يوفر واجهة برمجة تطبيقات قابلة للتكامل لإعطاء العناصر نسبة العرض إلى الارتفاع الثابت.

تثبيت

قم بتثبيت البرنامج المساعد من NPM: 

npm install -D @tailwindcss/aspect-ratio

ثم أضف المكون الإضافي إلى ملف tailwind.config.js ، وقم بتعطيل المكون aspectRatio الأساسي لتجنب التعارضات مع أدوات aspect-ratio الأصلية المدرجة في CSS V3.0 Tailwind V3.0: 

 // tailwind.config.js
module . exports = {
  theme : {
    // ...
  } ,
  corePlugins : {
    aspectRatio : false ,
  } ,
  plugins : [
    require ( '@tailwindcss/aspect-ratio' ) ,
    // ...
  ] ,
}

الاستخدام

الجمع بين الطبقات aspect-w-{n} و aspect-h-{n} لتحديد نسبة العرض إلى العنصر: 

 < div class =" aspect-w-16 aspect-h-9 " >
  < iframe src =" https://www.youtube.com/embed/dQw4w9WgXcQ " frameborder =" 0 " allow =" accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture " allowfullscreen > </ iframe >
</ div >

استخدم aspect-none يزيل أي سلوك نسبة العرض إلى الارتفاع: 

 < div class =" aspect-w-16 aspect-h-9 lg:aspect-none " >
  <!-- ... -->
</ div >

عند إزالة سلوك نسبة العرض إلى الارتفاع ، إذا كانت العناصر المتداخلة تحتوي على فئات w-{n} أو h-{n} ، تأكد من إعادة تشكيلها ببادئة نقطة توقف مطابقة: 

 < div class =" aspect-w-16 aspect-h-9 lg:aspect-none " >
  < img src =" ... " alt =" ... " class =" w-full h-full object-center object-cover lg:w-full lg:h-full " />
</ div >

لاحظ أنه نظرًا للطريقة التي يجب بها تنفيذ ذلك حاليًا (خدعة الحشو القديمة) ، تحتاج إلى تعيين نسبة العرض إلى العنصر الأصل ، وجعل العنصر الفعلي الذي تحاول حجم الطفل الوحيد لهذا الوالد.

بمجرد دعم خاصية aspect-ratio في المتصفحات الحديثة ، سنضيف دعمًا رسميًا إلى CSS Tailwind نفسها ونقص هذا البرنامج المساعد.

يتم إنشاء فئات نسبة العرض إلى 16 حتى 16 بشكل افتراضي:

عرض ارتفاع
aspect-w-1 aspect-h-1
aspect-w-2 aspect-h-2
aspect-w-3 aspect-h-3
aspect-w-4 aspect-h-4
aspect-w-5 aspect-h-5
aspect-w-6 aspect-h-6
aspect-w-7 aspect-h-7
aspect-w-8 aspect-h-8
aspect-w-9 aspect-h-9
aspect-w-10 aspect-h-10
aspect-w-11 aspect-h-11
aspect-w-12 aspect-h-12
aspect-w-13 aspect-h-13
aspect-w-14 aspect-h-14
aspect-w-15 aspect-h-15
aspect-w-16 aspect-h-16

إعدادات

يمكنك تكوين القيم والمتغيرات التي يتم إنشاؤها بواسطة هذا البرنامج المساعد ضمن مفتاح aspectRatio في ملف tailwind.config.js : 

 // tailwind.config.js
module . exports = {
  theme : {
    aspectRatio : {
      1 : '1' ,
      2 : '2' ,
      3 : '3' ,
      4 : '4' ,
    }
  } ,
  variants : {
    aspectRatio : [ 'responsive' , 'hover' ]
  }
}

التوافق مع الأدوات المساعدة للدعم الافتراضي

Tailwind CSS V3.0 يتم شحنها بدعم من راتيو الجانب الأصلي ، وعلى الرغم من أن هذه الأدوات المساعدة الجديدة رائعة ، فإن خاصية aspect-ratio لا يتم دعمها في Safari 14 ، والتي لا تزال لديها استخدام عالمي كبير. إذا كنت بحاجة إلى دعم Safari 14 ، فإن هذا البرنامج المساعد لا يزال هو أفضل طريقة للقيام بذلك.

على الرغم من أنه من الممكن من الناحية الفنية استخدام أدوات المساعدة aspect-ratio الأصلي الجديد بالإضافة إلى هذا البرنامج المساعد في نفس المشروع ، إلا أنه لا معنى له حقًا في القيام بذلك. إذا كنت قادرًا على استخدام الأدوات المساعدة الجديدة لمادة الجوانب الأصلية ، فما عليك سوى استخدامها بدلاً من هذا المكون الإضافي ، لأنها أبسط بكثير وتعمل بشكل أفضل.

ومع ذلك ، إذا كنت ترغب في استخدام كلا النهجين في مشروعك ، ربما كوسيلة للانتقال ببطء من نهج البرنامج المساعد إلى المرافق الأصلية الجديدة ، ستحتاج إلى إضافة القيم التالية إلى ملف tailwind.config.js : 

 module . exports = {
  // ...
  theme : {
    aspectRatio : {
      auto : 'auto' ,
      square : '1 / 1' ,
      video : '16 / 9' ,
      1 : '1' ,
      2 : '2' ,
      3 : '3' ,
      4 : '4' ,
      5 : '5' ,
      6 : '6' ,
      7 : '7' ,
      8 : '8' ,
      9 : '9' ,
      10 : '10' ,
      11 : '11' ,
      12 : '12' ,
      13 : '13' ,
      14 : '14' ,
      15 : '15' ,
      16 : '16' ,
    } ,
  } ,
}

هذا أمر ضروري ، حيث يتم كتابة قيم aspectRatio الافتراضي من خلال قيم هذا البرنامج المساعد.

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