إنشاء عناصر تغيير حجم تلقائي مع Scalable.js

إذا كنت بحاجة إلى جعل العناصر المرنة التي ملء التلقائي حاوياتها سأكون في غاية يوصي التحجيم. يعد هذا البرنامج النصي JS المجاني المفتوح المصدر مثاليًا لتصميم السوائل دون الكثير من الإجهاد.

كل شيء في مكتبة Scalable.js مرن بحيث يمكنك تغيير نمط كل حاوية وحجمها وموضعها ومحتوياتها الداخلية. هل تحتاج عناصر محاذاة إلى أعلى أو أسفل الصفحة؟ تحجيم لديه خيارات لذلك.

إلقاء نظرة خاطفة على GitHub repo لمعرفة المزيد حول كيفية عمل هذا.

في أبسط أشكاله ، يأخذ هذا البرنامج النصي عنصر صفحة مستهدف مع بعض الخيارات لتخصيص العرض. إليك بعض نماذج التعليمات البرمجية التي تم أخذها مباشرةً من GitHub:

var scalable = new Scalable (containerEl ، خيارات) ؛

بطبيعة الحال ، فإن المعلمة الأولى هي أي عنصر الحاوية الذي تستهدفه (مثالي أ

أو شيئا من هذا القبيل).

يجب أن تأخذ المعلمة خيارات صفيف key => أزواج القيمة. وتشمل هذه الخيارات قيم ارتفاع الحاوية ، عرض min و max ، مع موازين min و max (أي مقدار ما يمكن أن مقياس مع العناصر الداخلية).

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

هناك طرق للتعامل مع العناصر المرنة باستخدام CSS فقط. ومع ذلك ، يمكن أن تشعر هذه الطرق بأنها مؤرخة ولا توفر الكثير من التحكم مثل JavaScript.

إذا كنت ترغب في تجربة ذلك ، فما عليك سوى الحصول على نسخة من GitHub ومعرفة رأيك.

لا تزال Scalable قيد التطوير النشط ، لكن من السهل تحريرها وفقًا لاحتياجاتك.