dashmin
1.0.0
Bonjour développeur .. c'est Dashmin ! Ce n'est rien de plus qu'une base simple et élégante pour vous aider dans le développement de votre système administratif. Il n'a pas encore beaucoup de composants, mais il intègre déjà des bibliothèques célèbres comme Material UI et Reactstrap, donc si vous connaissez l'une d'entre elles, il sera facile de créer vos pages .. si vous ne souhaitez utiliser aucun des eux, n'hésitez pas à utiliser la bibliothèque. à votre goût. Alors commençons.
Si vous souhaitez créer votre administrateur à l'aide de DASHmin, suivez le tutoriel d'installation ci-dessous !
├── 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.mdUtilisateur : passe Dashmin : 123
Démo en direct
Pour exécuter ce projet, vous devez avoir Node.js installé sur votre machine ! Si vous ne l'avez pas, rendez-vous sur le site https://nodejs.org/en/ et téléchargez-le et installez-le comme il est enseigné dans la documentation !
Pour commencer, clonez le référentiel et installez les dépendances à l'aide des commandes ci-dessous.
git clone https://github.com/hiukky/dashmin-react.git -b master nameOfYourProject
cd nameOfYourProject
yarn install
npm install
C'est vrai .. après avoir installé toutes les dépendances, vous pouvez exécuter l'application et vérifier si tout fonctionne correctement.
yarn run start
npm run start
Prêt!! si tout s'est bien passé, vérifiez simplement votre application dans le navigateur http://127.0.0.1:3000/.
Dashmin est déjà entièrement configuré, donc pour commencer, vous pouvez créer vos vues dans src/views/YourView puis l'utiliser dans le fichier routes dans routes .
Dans le répertoire views , créez votre composant de vue à restituer.
// Imports
import React from 'react' ;
// Products
const Example01 = ( ) => (
< div >
< h1 > Example01 </ h1 >
</ div >
) ;
export default Example01 ; // Imports
import React from 'react' ;
// Products
const Example02 = ( ) => (
< div >
< h1 > Example02 </ h1 >
</ div >
) ;
export default Example02 ; Après avoir créé votre vue, accédez à routes/index.js et importez les vues créées.
// Views
import Example01 from 'pages/example01' ;
import Example02 from 'pages/example02' ;Définissez vos itinéraires.
// Routes
const Routes = {
example01 : '/example01' ,
example02 : '/example02' ,
} ; Après avoir défini les itinéraires, définissez un const Dashmin en passant les propriétés de définition. Dashmin nécessite des informations pour navbar , sidebar et content . il est donc important de les informer.
const Dashmin = {
// navbar
navbar : {
}
// sidebar
sidebar : {
}
// Content
content : [
]
} Dans navbar vous devez saisir un objet déroulant contenant les objets user et 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 ( ) ;
}
}
}
} ,
} Pour la sidebar vous devez transmettre brand et buttons . Pour brand vous devez transmettre uniquement le nom de votre organisation en saisissant le nom complet max et l'abrégé min . Pour buttons , un name , icon et route sont requis.
Sur les icônes .. ou Dashmin en utilisant les React icons , vous pouvez alors simplement importer les icônes que vous souhaitez utiliser et passer le composant pour l'icône.
// 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 ,
} ,
]
}
} Enfin la partie contenu. Car il faudra passer un tableau d'objets contenant l' route et le composant de visualisation à view de manière rédemptrice.
// 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
} ,
]
}Le fichier Route contenant les paramètres définis ci-dessus.
// 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 ;Une fois que vous avez suivi les étapes ci-dessus, vous pouvez maintenant tester votre application à l'aide de l'une des commandes ci-dessous si vous ne l'avez pas encore exécutée.
yarn run start
npm run start
Prêt!! si tout s'est bien passé, vérifiez simplement votre application dans le navigateur http://127.0.0.1:3000/.
? Interface utilisateur matérielle
? Sangle de réaction
? Icônes de réaction
? Réagir au routeur Dom
? Redux
? Composants stylisés
