هذا هو شوكة من مستودع Flowbite Admin Dashboard الأصلي. يتم استخدام هذه الشوكة لإنشاء إصدار NodeJS من لوحة المعلومات باستخدام Express وEJS كمحرك القوالب.
هذا المشروع عبارة عن قالب لوحة معلومات مسؤول واجهة مستخدم مجاني ومفتوح المصدر تم إنشاؤه باستخدام مكونات من Flowbite ويعتمد على إطار عمل Tailwind CSS الأول للأداة المساعدة والذي يتميز بالمخططات والجداول وعناصر واجهة المستخدم وتخطيطات CRUD والنماذج والأدراج والمزيد.
يمكن أن تساعدك لوحة التحكم الإدارية هذه بسرعة على البدء في إنشاء تطبيق لمشروعك باستخدام أحدث تقنيات تطوير واجهة المستخدم/UX في المنطقة مفتوحة المصدر بما في ذلك Tailwind CSS وFlowbite.
تعتمد المكونات التفاعلية مثل أشرطة التنقل والنماذج والأدراج وتلميحات الأدوات على مكتبة المكونات الشائعة مفتوحة المصدر والتي تسمى Flowbite والتي تمكننا من استخدام هذه العناصر عن طريق إنشاء مجموعة أكثر تعقيدًا من الصفحات وعناصر واجهة المستخدم داخل لوحة تحكم إدارية كاملة نموذج.
تعتمد جميع الصفحات والأدوات والمكونات فقط على فئات الأداة المساعدة الأولى من Tailwind CSS وهي متوافقة مع الإصدار v3.x
الأحدث من التقنية عن طريق إزالة جميع الفئات تلقائيًا بناءً على مسارات القالب.
ابدأ باستخدام 15 صفحة أمثلة متقدمة بما في ذلك تخطيطين مختلفين للصفحة الرئيسية للوحة المعلومات المليئة بأدوات المخططات والجداول ومنتقيات البيانات والإحصائيات وأيضًا مع صفحتي تخطيط CRUD للمنتجات والمستخدمين وصفحة الإعدادات وصفحات المصادقة لتسجيل الدخول والتسجيل وحتى صفحات الخطأ 404 و500 المخصصة.
تحتوي لوحة تحكم المشرف هذه على العديد من المكونات المتقدمة من Flowbite وأيضًا من مكتبات الطرف الثالث الأخرى مثل ApexCharts التي تم تصميمها خصيصًا مع فئات Tailwind CSS وتم تصميمها استنادًا إلى نظام تصميم Flowbite.
إذا كنت تريد استخدام هذا المشروع، نوصي أيضًا بدراسة مكتبة المكونات التي استخدمناها لإنشاء لوحة المعلومات هذه لأنه يمكنك استخدام المزيد من المكونات من تلك المكتبة لتحسين الأمثلة التي قمنا بترميزها هنا بالفعل.
تم تصميم هذا المنتج باستخدام التقنيات التالية المستخدمة على نطاق واسع:
لوحة القيادة | تخطيط مكدس | المنتجات (الخام) |
---|---|---|
المستخدمون (CRUD) | إعدادات | صفحة التسعير |
---|---|---|
صفحة تسجيل الدخول | صفحة التسجيل | إعادة تعيين كلمة المرور |
---|---|---|
هل نسيت كلمة السر | قفل الملف الشخصي | صفحة الصيانة |
---|---|---|
404 غير موجود | 500 خطأ في الخادم | ملعب |
---|---|---|
package.json
وابدأ تشغيل خادم التطوير المحلي عن طريق تشغيل:باستخدام NPM:
npm install
npm run dev
باستخدام الغزل:
yarn install
yarn dev
باستخدام PNPM:
pnpm install
pnpm dev
فيما يلي قائمة بالتقنيات والأدلة المتوافقة مع Flowbite وTailwind CSS:
قام المجتمع الرائع مفتوح المصدر أيضًا ببناء المكتبات المستقلة التالية لـ React وVue وSvelte وAngular ويحافظ عليها حاليًا:
لقد كتبنا أيضًا أدلة تكامل لأطر العمل والمكتبات الأمامية التالية:
يتمتع Flowbite بتكامل رائع مع معظم أطر العمل الخلفية لأنه يعتمد على Vanilla JavaScript:
ستجد ضمن التنزيل الدلائل والملفات التالية:
Flowbite Admin Dashboard
.
├── LICENSE
├── README.md
├── content
├── data
├── layouts
├── node_modules
├── package-lock.json
├── package.json
├── postcss.config.js
├── src
├── static
├── tailwind.config.js
├── webpack.config.js
└── yarn.lock
في الوقت الحالي، نهدف رسميًا إلى دعم الإصدارين الأخيرين من المتصفحات التالية:
نحن نستخدم مشكلات GitHub باعتبارها أداة تعقب الأخطاء الرسمية للوحة تحكم Flowbite Admin. فيما يلي بعض النصائح لمستخدمينا الذين يريدون الإبلاغ عن مشكلة:
إذا كانت لديك أسئلة أو كنت بحاجة إلى مساعدة في دمج المنتج، فيرجى الاتصال بنا بدلاً من فتح مشكلة.