dashmin

... داشمين ...

_{تم تصميمه باستخدام ❤︎ بواسطة رومولو}

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

إذا كنت تريد إنشاء المشرف الخاص بك باستخدام DASHmin، فاتبع البرنامج التعليمي للتثبيت أدناه!

✓ الهيكل

├── assets
│   ├── logo.png
│   ├── login.png
│   ├── dashmin.png
├── node_modules
├── public
├── src
│   ├── components
│   ├── helpers
│   ├── routes
│   ├── services
│   ├── store
│   ├── views
│   ├── App.js
│   ├── index.js
├── .editorconfig
├── .env
├── .gitignore
├── .travis.yml
├── package.json
├── README.md
└── LICENSE.md

✓ المعاينة

المستخدم: ممر داشمين: 123

العرض المباشر

تسجيل الدخول

مسؤل

✓ المتطلبات

لتشغيل هذا المشروع، يجب أن يكون Node.js مثبتًا على جهازك! إذا لم يكن لديك، فانتقل إلى موقع الويب https://nodejs.org/en/ وقم بتنزيله وتثبيته كما هو موضح في الوثائق!

✓ التثبيت

لبدء استنساخ المستودع وتثبيت التبعيات باستخدام الأوامر أدناه.

 git clone https://github.com/hiukky/dashmin-react.git -b master nameOfYourProject

 cd nameOfYourProject

 yarn install

أو

 npm install

✓ كيفية الاستخدام

صحيح.. بعد تثبيت جميع التبعيات، يمكنك تشغيل التطبيق والتحقق مما إذا كان كل شيء يعمل بشكل صحيح.

 yarn run start

أو

 npm run start

مستعد!! إذا سارت الأمور على ما يرام، فما عليك سوى التحقق من طلبك في المتصفح http://127.0.0.1:3000/.

✓ إنشاء وجهات نظرك

تم إعداد Dashmin بالكامل بالفعل، لذلك يمكنك بالنسبة للمبتدئين إنشاء عروضك في src/views/YourView ثم استخدامها في ملف المسارات في routes .

المشاهدات / example01.js

ضمن دليل views ، قم بإنشاء مكون العرض الخاص بك ليتم عرضه.

 // Imports
import React from 'react' ;

// Products
const Example01 = ( ) => (
  < div >
    < h1 > Example01 </ h1 >
  </ div >
) ;

export default Example01 ; 

المشاهدات / example02.js

 // Imports
import React from 'react' ;

// Products
const Example02 = ( ) => (
  < div >
    < h1 > Example02 </ h1 >
  </ div >
) ;

export default Example02 ; 

✓ تكوين الطرق وDashmin

الطرق /index.js

بعد إنشاء العرض الخاص بك، انتقل إلى routes/index.js وقم باستيراد العروض التي تم إنشاؤها.

 // Views
import Example01 from 'pages/example01' ;
import Example02 from 'pages/example02' ;

تحديد الطرق الخاصة بك.

 // Routes
const Routes = {
  example01 : '/example01' ,
  example02 : '/example02' ,
} ;

بعد تحديد المسارات، قم بتعريف const Dashmin عن طريق تمرير خصائص التعريف. يتطلب Dashmin معلومات عن navbar sidebar content . لذلك من المهم إبلاغهم.

 const Dashmin = {
  // navbar
  navbar : {

  }

  // sidebar
  sidebar : {

  }

  // Content
  content : [

  ]
} 

شريط التنقل: { }

في navbar تحتاج إلى إدخال كائن منسدل يحتوي على كائنات user buttons .

 // Serices
import { logout }  from 'services/auth' ;

const Dashmin = {
  // navbar
  navbar : {
    // Dropdown
    dropdown : {
      // User Profile
      user : {
        avatar : 'https://i.imgur.com/NpICPSl.jpg' ,
        name : 'R o m u l l o' ,
        jobRole : 'Administrator' ,
      } ,

      // Buttons events
      buttons : {
        settings : ( ) => { } ,
        profile : ( ) => { } ,
        logout : ( ) => {
          logout ( ) ;
          document . location . reload ( ) ;          
        }
      }
    }
  } ,
} 

الشريط الجانبي: { }

بالنسبة للشريط sidebar يجب عليك تمرير brand buttons . بالنسبة brand يتعين عليك تمرير اسم مؤسستك فقط عن طريق إدخال الاسم الكامل max ومختصر min . بالنسبة buttons ، يلزم وجود name icon route .

للتعرف على الرموز .. يستخدم Dashmin React icons ، بحيث يمكنك ببساطة استيراد الرموز التي ترغب في استخدامها وتمرير أو مكون للأيقونة.

 // Icons
import {
  IoMdOptions ,
  IoMdPeople ,
} from 'react-icons/io' ;

const Dashmin = {
  // sidebar
  sidebar : {
    // brand
    brand : {
      max : 'D A S H M I N' ,
      min : 'dmin'
    } ,

    // buttons
    buttons : [
      {
        name : 'Example01' ,
        icon : < IoMdOptions /> ,
        route : Routes . example01 ,
      } ,
      {
        name : 'Example02' ,
        icon : < IoMdOptions />
        route : Routes . example02 ,
      } ,
    ]
  }
} 

محتوى: [ ]

وأخيرا جزء من المحتوى. لأنه سيكون من الضروري تمرير مجموعة من الكائنات التي تحتوي على route ومكون التصور ليتم view بشكل تعويضي.

 // Views
import Example01 from 'pages/example01' ;
import Example02 from 'pages/example02' ;

const Dashmin = {
  // content
  content : [
    {
      route : Routes . example01 ,
      view : Example01
    } ,
    {
      route : Routes . example02 ,
      view : Example02
    } ,
  ]
}

التكوين الكامل

ملف الطريق الذي يحتوي على الإعدادات المذكورة أعلاه.

الطرق /index.js

 // React
import React from 'react' ;

// Views
import Example01 from 'views/example01' ;
import Example02 from 'views/example02' ;

// Icons
import {
  IoMdOptions ,
  IoMdPeople ,
} from 'react-icons/io' ;

// Routes
const Routes = {
  example01 : '/example01' ,
  example02 : '/example02' ,
} ;

// Dashmin
const Dashmin = {
  // Navbar
  navbar : {
    // Dropdown
    dropdown : {
      // User Profile
      user : {
        avatar : 'https://i.imgur.com/NpICPSl.jpg' ,
        name : 'R o m u l l o' ,
        jobRole : 'Administrator' ,
      } ,

      // Buttons events
      buttons : {
        settings : ( ) => { } ,
        profile : ( ) => { } ,
        logout : ( ) => {
          logout ( ) ;
          document . location . reload ( ) ;          
        }
      }
    }
  } ,

  // Sidebar
  sidebar : {
    // brand
    brand : {
      max : 'D A S H M I N' ,
      min : 'dmin'
    } ,

    // buttons
    buttons : [
      {
        name : 'Example01' ,
        icon : < IoMdOptions /> ,
        route : Routes . example01 ,
      } ,
      {
        name : 'Example02' ,
        icon : < IoMdOptions />
        route : Routes . example02 ,
      } ,
    ]
  } ,

  // Content
  content : [
    {
      route : Routes . example01 ,
      view : Example01
    } ,
    {
      route : Routes . example02 ,
      view : Example02
    } ,
  ]
} ;

export default Dashmin ;

التشطيب

بمجرد اتباع الخطوات المذكورة أعلاه، يمكنك الآن اختبار تطبيقك باستخدام أحد الأوامر أدناه إذا لم تقم بتشغيله من قبل.

 yarn run start

أو

 npm run start

مستعد!! إذا سارت الأمور على ما يرام، فما عليك سوى التحقق من طلبك في المتصفح http://127.0.0.1:3000/.

✓ المكتبات

؟ واجهة المستخدم المادية

؟ رد الفعل

؟ أيقونات الرد

؟ رد فعل جهاز التوجيه دوم

؟ إعادة إحياء

؟ مكونات على غرار