"إذا أراد العامل أن يؤدي عمله بشكل جيد، فعليه أولاً أن يشحذ أدواته." - كونفوشيوس، "مختارات كونفوشيوس. لو لينجونج"
الصفحة الأمامية > برمجة > نقدم لكم حزمة Laravel Livewire Modal المرنة والمستقلة عن إطار العمل

نقدم لكم حزمة Laravel Livewire Modal المرنة والمستقلة عن إطار العمل

تم النشر بتاريخ 2024-11-08
تصفح:689

Introducing a Flexible and Framework-Agnostic Laravel Livewire Modal Package

نقدم لكم حزمة Laravel Livewire Modal المرنة

لقد أحدث Laravel وLivewire ثورة في الطريقة التي نبني بها تطبيقات ديناميكية باستخدام الحد الأدنى من JavaScript. ولكن عندما يتعلق الأمر بالتعامل مع الوسائط، فإن معظم الحلول تميل إلى تقييدنا في أطر تصميم محددة مثل Bootstrap أو Tailwind CSS. ماذا لو كنت بحاجة إلى المرونة لاختيار نظام التصميم الخاص بك؟ وهنا يأتي دور حزمة Laravel Livewire Modal التي تم إصدارها حديثًا!

؟ ما هي هذه الحزمة؟

تعد حزمة Laravel Livewire Modal حلاً مستقلاً عن إطار العمل للتعامل مع الوسائط في مشاريع Livewire الخاصة بك. لقد تم تصميمه للعمل بسلاسة مع Bootstrap أو Tailwind CSS أو أي أنماط مخصصة. سواء كنت تعمل على مشروع جديد تمامًا أو تندمج في مشروع حالي، فإن هذه الحزمة تتكيف مع احتياجاتك.

✨ الميزات الرئيسية

  • Framework-Agnostic: استخدمه مع Bootstrap، أو Tailwind CSS، أو الأنماط المخصصة الخاصة بك.
  • التكامل السهل: أحداث Livewire البسيطة لفتح وإغلاق الوسائط.
  • التعامل الديناميكي مع البيانات: قم بتمرير البيانات بسهولة إلى مكونات الوسائط الخاصة بك.
  • قابلة للتخصيص وخفيفة الوزن: لا توجد أنماط مفروضة، مما يسمح لك بالحفاظ على التحكم الكامل في التصميم الخاص بك.

️ التثبيت والإعداد

يمكنك البدء بتثبيت الحزمة عبر Composer:

composer require sagor110090/livewire-modal

بعد ذلك، أضف السطر التالي إلى ملف تخطيط app.blade.php الخاص بك لتمكين الوسائط في جميع أنحاء التطبيق الخاص بك:

لا تنس أيضًا تضمين JS وCSS المطلوبين في Resources/js/app.js:

import '../../vendor/sagor110090/livewire-modal/resources/js/loader.js';
import '../../vendor/sagor110090/livewire-modal/resources/css/loader.css';

؟ مثال الاستخدام

إليك مدى سهولة فتح وإغلاق الوسائط باستخدام هذه الحزمة:

فتح مشروط


إغلاق مشروط


إنشاء مكون Livewire

للبدء، إليك نموذج مكون Livewire لتحرير المستخدم:

user = User::find($id);
    }

    public function render()
    {
        return view('livewire.edit-user');
    }
}

تخصيص تصميم الوسائط الخاص بك

هذه الحزمة مستقلة تمامًا عن التصميم، مما يعني أنه يمكنك استخدام أي إطار لتصميم نماذجك. على سبيل المثال، إذا كنت تستخدم Tailwind CSS:

لا تتردد في استبدال التصميم بـ Bootstrap أو CSS المخصص أو أي نظام تصميم تفضله.

؟ لماذا استخدام هذه الحزمة؟

ترتبط معظم الحلول النموذجية بأطر تصميم محددة، مما يحد من مرونتك. تمنحك هذه الحزمة التحكم الكامل في كيفية تصميم نماذجك مع توفير التكامل السلس مع مكونات Livewire القوية.

سواء كنت تقوم بإنشاء تطبيق كبير أو مشروع بسيط، فقد تم تصميم هذه الحزمة لتكون خفيفة الوزن ومرنة وسهلة الاستخدام.

؟ ابدأ اليوم!

إذا كنت مستعدًا لتبسيط إدارة الوسائط في مشاريع Laravel Livewire، فجرّب هذه الحزمة! يمكنك تثبيته عبر الملحن:

composer require sagor110090/livewire-modal

وتأكد من مراجعة مستودع GitHub لمزيد من التفاصيل والدعم.


شكرا على القراءة! آمل أن تساعدك هذه الحزمة في بناء تطبيقات Laravel أكثر مرونة وديناميكية. إذا كان لديك أي أسئلة أو تعليقات، فلا تتردد في التواصل معنا في التعليقات.

ترميز سعيد! ?

بيان الافراج تم إعادة إنتاج هذه المقالة على: https://dev.to/mhsagor110090/introducing-a-flexible-and-framework-agnostic-laravel-livewire-modal-package-39m2?1 إذا كان هناك أي انتهاك، يرجى الاتصال بـ Study_golang@163 .com لحذفه
أحدث البرنامج التعليمي أكثر>

تنصل: جميع الموارد المقدمة هي جزئيًا من الإنترنت. إذا كان هناك أي انتهاك لحقوق الطبع والنشر الخاصة بك أو الحقوق والمصالح الأخرى، فيرجى توضيح الأسباب التفصيلية وتقديم دليل على حقوق الطبع والنشر أو الحقوق والمصالح ثم إرسالها إلى البريد الإلكتروني: [email protected]. سوف نتعامل مع الأمر لك في أقرب وقت ممكن.

Copyright© 2022 湘ICP备2022001581号-3