شعار مكتبة Alpine.js

مكتبة Alpine.js بديل jQuery القوى

Alpine.js هو إطار عمل مميز و فى نفس الوقت بسيط بإستخدام JavaScript. تتميز هذه المكتبة بصغر حجمها مقارنتًا بالمكتبات الاخرى التى تؤدى نفس الغرض مثل React و Vue.

ماهى AlpineJs

هى مكتبة مبنية على جافاسكربت توفر طريقة سهلة للتفاعل مع محتويات DOM لانشاء صفحات تفاعلية.

يمكن استخدام alpine كبديل لـ jQuery أو حتى Angular أو React أو Vue التي تستخدمها عادةً للواجهات سريعة الاستجابة.

وتتيمز المكتبة بصغر حجمها حيث انها لا تتعدى 2 كيلو بايت عند ضغطها, يمكنك ببساطة ادارجها فى ملف HTML اما بإستخدام CDN او حتى مباشرتًا من ملفات المشروع الخاص بك.

يتم وضع الكود التالى قبل نهاية وسم head.

كيفية تركيب AlpineJS

كما يمكنك ادراج اصدار معين على سبيل المثال https://cdn.jsdelivr.net/gh/alpinejs/[email protected]/dist/alpine.min.js

<script src="https://cdn.jsdelivr.net/gh/alpinejs/[email protected]/dist/alpine.min.js" defer ></script>

مثال على استخدام AlpineJS

<div x-data="{ open: false }"> <button @click="open = true">فتح القائمة</button> <ul x-show="open" @click.away="open = false"> محتوى القائمة </ul> </div>

المثال السابق يوضح كيفية استخدام Alpine فى عمل قائمة منسدلة Dropdown, يتم استخدام البادئة x-data لتعريف States الخاصة بالمكتبة و State هى الحالة التى تقوم المكتبة بمراقبتها بشكل مستمر لتغير شكل DOM بناء علي هذه States.

اين يمكننى معرفة المزيد عن AlpineJS

يمكنك دئمًا الرجوع إلى الموقع الرسمى للمكتبة https://alpinejs.dev/ الذى يحتوى الكثير من الامثلة والشرح الدقيق لكل خصائص المكتبة.

كما يمكنك ايضًا متابعه هذا الموقع العربى الذى يقدم توثيق كامل للمكتبة باللغة العربية https://alpinejs.abdelhadi.org

اشترك فى القائمة البريدية

عن الكاتب

شارك على وسائل التواصل

اترك تعليقاً

لن يتم نشر عنوان بريدك الإلكتروني. الحقول الإلزامية مشار إليها بـ *

7 − 2 =