الصفحة الرئيسية>PHP كود المصدر>فئات أخرى
تنزيل

لوحة تحكم إدارة Flowbite

هذا المشروع عبارة عن قالب لوحة معلومات مسؤول واجهة مستخدم مجاني ومفتوح المصدر تم إنشاؤه باستخدام مكونات من Flowbite ويعتمد على إطار عمل Tailwind CSS الأول للأداة المساعدة والذي يتميز بالمخططات والجداول وعناصر واجهة المستخدم وتخطيطات CRUD والنماذج والأدراج والمزيد.

يمكن أن تساعدك لوحة التحكم الإدارية هذه بسرعة على البدء في إنشاء تطبيق لمشروعك باستخدام أحدث تقنيات تطوير واجهة المستخدم/UX في المنطقة مفتوحة المصدر بما في ذلك Tailwind CSS وFlowbite.

بنيت مع Flowbite

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

فئات المرافق Tailwind CSS

تعتمد جميع الصفحات والأدوات والمكونات فقط على فئات الأداة المساعدة الأولى من Tailwind CSS وهي متوافقة مع الإصدار v3.x الأحدث من التقنية عن طريق إزالة جميع الفئات تلقائيًا استنادًا إلى مسارات القالب.

15 صفحة نموذجية

ابدأ باستخدام 15 صفحة أمثلة متقدمة بما في ذلك تخطيطين مختلفين للصفحة الرئيسية للوحة المعلومات المليئة بأدوات المخططات والجداول ومنتقيات البيانات والإحصائيات وأيضًا مع صفحتي تخطيط CRUD للمنتجات والمستخدمين وصفحة الإعدادات وصفحات المصادقة لتسجيل الدخول والتسجيل وحتى صفحات الخطأ 404 و500 المخصصة.

مكونات متقدمة

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

وثائق التدفق

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

سير العمل

تم تصميم هذا المنتج باستخدام التقنيات التالية المستخدمة على نطاق واسع:

  • Tailwind CSS: tailwindcss.com

  • فلوبيت:flowbite.com

  • هوغو gohugo.io

  • Webpack webpack.js.org

جدول المحتويات

  • لوحة تحكم إدارة Flowbite

    • أطر جافا سكريبت

    • الأطر الخلفية

    • بنيت مع Flowbite

    • فئات المرافق Tailwind CSS

    • 15 صفحة نموذجية

    • مكونات متقدمة

    • وثائق التدفق

    • سير العمل

    • جدول المحتويات

    • الصفحات التجريبية

    • بداية سريعة

    • هيكل الملف

    • دعم المتصفح

    • موارد

    • قضايا الإبلاغ

    • الدعم الفني أو الأسئلة

    • الترخيص

    • روابط مفيدة

    • المؤلفون

بداية سريعة

  1. انسخ هذا المستودع أو قم بتنزيل ملف ZIP

  2. تأكد من تثبيت Node.js وNPM

  3. قم بتثبيت تبعيات المشروع من ملف package.json : 

npm install

  1. قم بإنشاء خادم محلي على localhost:1313 عن طريق تشغيل الأمر التالي: 

npm run start

يمكنك أيضًا إنشاء المشروع والحصول على ملفات التوزيع داخل المجلد public/ عن طريق تشغيل: 

npm run build

يمكنك تحميل مشروعك على الفور إلى Vercel عن طريق تحديد تكوين HUGO الافتراضي، ولكن اعتمادًا على مجموعة التكنولوجيا الخاصة بك سواء كانت React.js أو Vue أو Nuxt.js أو Next.js أو إطار عمل خلفي، يمكنك أيضًا نسخ التخطيطات من هذا المشروع داخل مكدس التكنولوجيا الخاص بك.

فيما يلي قائمة بالتقنيات والأدلة المتوافقة مع Flowbite وTailwind CSS:

أطر جافا سكريبت

قام المجتمع الرائع مفتوح المصدر أيضًا ببناء المكتبات المستقلة التالية لـ React وVue وSvelte وAngular ويحافظ عليها حاليًا:

  • مكتبة تفاعل فلوبيت

  • مكتبة فلوبايت فيو

  • مكتبة Flowbite Svelte

  • مكتبة Flowbite الزاوي

لقد كتبنا أيضًا أدلة تكامل لأطر العمل والمكتبات الأمامية التالية:

  • Flowbite مع دليل رد الفعل

  • Flowbite مع دليل Next.js

  • Flowbite مع دليل Vue

  • Flowbite مع دليل Nuxt.js

  • Flowbite مع دليل Svelte

الأطر الخلفية

يتمتع Flowbite بتكامل رائع مع معظم أطر العمل الخلفية لأنه يعتمد على Vanilla JavaScript:

  • استخدام Flowbite مع Laravel

  • استخدام Flowbite مع Ruby on Rails 7

  • استخدام Flowbite مع جانغو

  • استخدام Flowbite مع قارورة

هيكل الملف

ستجد ضمن التنزيل الدلائل والملفات التالية: 

Flowbite Admin Dashboard
.
├── LICENSE
├── README.md
├── config.yml
├── content
├── data
├── layouts
├── node_modules
├── package-lock.json
├── package.json
├── postcss.config.js
├── resources
├── src
├── static
├── tailwind.config.js
├── webpack.config.js
└── yarn.lock

دعم المتصفح

في الوقت الحالي، نهدف رسميًا إلى دعم الإصدارين الأخيرين من المتصفحات التالية:

موارد

  • المعاينة المباشرة: https://flowbite-admin-dashboard.vercel.app/

  • وثائق فلوبيت: https://flowbite.com/docs/getting-started/introduction/

  • وثائق Tailwind CSS: https://tailwindcss.com/

  • اتفاقية الترخيص: https://flowbite.com/docs/getting-started/license/

  • القضايا: صفحة قضايا جيثب

قضايا الإبلاغ

نحن نستخدم مشكلات GitHub باعتبارها أداة تعقب الأخطاء الرسمية للوحة تحكم Flowbite Admin. فيما يلي بعض النصائح لمستخدمينا الذين يريدون الإبلاغ عن مشكلة:

  1. تأكد من أنك تستخدم أحدث إصدار من Flowbite Admin Dashboard. تحقق من سجل التغيير من لوحة التحكم الخاصة بك على صفحة إصدارات GitHub.

  2. سيؤدي توفير خطوات قابلة للتكرار لحل المشكلة إلى تقليل الوقت الذي يستغرقه إصلاحها.

  3. قد تكون بعض المشكلات متعلقة بالمتصفح، لذا قد يكون من المفيد تحديد المتصفح الذي واجهت المشكلة فيه.

الدعم الفني أو الأسئلة

إذا كانت لديك أسئلة أو كنت بحاجة إلى مساعدة في دمج المنتج، فيرجى الاتصال بنا بدلاً من فتح مشكلة.

الترخيص

  • حقوق الطبع والنشر 2019-2023 لشركة Bergside Inc. (https://flowbite.com)

  • مفتوح المصدر بموجب ترخيص MIT

روابط مفيدة

  • مكتبة Flowbite - مكونات مفتوحة المصدر تم إنشاؤها باستخدام Tailwind CSS

  • Flowbite Figma - نظام تصميم مصمم لـ Figma

  • Flowbite Blocks - بناء أقسام للموقع والتطبيقات

  • Flowbite Pro - مجموعة أكبر من الإصدار مفتوح المصدر من الإصدارات الثلاثة الأخيرة

المؤلفون

  • زولتان سزجينيي

  • روبرت تانيسلاف

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