dashmin
1.0.0
Hola desarrollador... ¡este es Dashmin! No es más que una base sencilla y elegante para ayudarte en el desarrollo de tu sistema administrativo. No tiene muchos componentes todavía, pero ya tiene algunas bibliotecas famosas como Material UI y Reactstrap integradas, por lo que si conoces alguna de ellas te será fácil crear tus páginas... si no quieres usar ninguna de ellas. ellos, siéntete libre de usar la biblioteca. a tu gusto. Entonces comencemos.
Si desea crear su administrador usando DASHmin, siga el tutorial de instalación a continuación.
├── 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.mdUsuario: pase dashmin: 123
Demostración en vivo
Para ejecutar este proyecto, necesita tener Node.js instalado en su máquina. Si no lo tiene, vaya al sitio web https://nodejs.org/en/ y descárguelo e instálelo como se enseña en la documentación.
Para comenzar, clone el repositorio e instale las dependencias usando los siguientes comandos.
git clone https://github.com/hiukky/dashmin-react.git -b master nameOfYourProject
cd nameOfYourProject
yarn install
npm install
Bien... después de instalar todas las dependencias, puedes ejecutar la aplicación y comprobar si todo funciona correctamente.
yarn run start
npm run start
¡¡Listo!! si todo salió bien, simplemente revisa tu aplicación en el navegador http://127.0.0.1:3000/.
Dashmin ya está todo configurado, por lo que, para empezar, puede crear sus vistas en src/views/YourView y luego usarlas en el archivo de rutas en routes .
Dentro del directorio views , cree el componente de vista que se va a representar.
// 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 ; Después de crear su vista, vaya a routes/index.js e importe las vistas creadas.
// Views
import Example01 from 'pages/example01' ;
import Example02 from 'pages/example02' ;Define tus rutas.
// Routes
const Routes = {
example01 : '/example01' ,
example02 : '/example02' ,
} ; Después de definir las rutas, defina un Dashmin constante pasando las propiedades de definición. Dashmin requiere información para navbar , sidebar y content . por eso es importante informarles.
const Dashmin = {
// navbar
navbar : {
}
// sidebar
sidebar : {
}
// Content
content : [
]
} En navbar debe ingresar un objeto desplegable que contenga los objetos user y 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 ( ) ;
}
}
}
} ,
} Para la sidebar necesitas pasar brand y buttons . Para brand debe pasar solo el nombre de su organización ingresando el nombre completo max y min abreviado. Para buttons , se requiere un name , icon y route .
Sobre los íconos... o Dashmin usa o React icons , entonces puedes simplemente importar los íconos que deseas usar y pasar el componente para ícono.
// 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 ,
} ,
]
}
} Finalmente la parte de contenido. Para ello será necesario pasar un conjunto de objetos que contengan la route y el componente de visualización a 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
} ,
]
}El archivo de ruta que contiene las configuraciones realizadas anteriormente.
// 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 ;Una vez que haya seguido los pasos anteriores, ahora puede probar su aplicación usando uno de los siguientes comandos si no la ha ejecutado anteriormente.
yarn run start
npm run start
¡¡Listo!! si todo salió bien, simplemente revisa tu aplicación en el navegador http://127.0.0.1:3000/.
? Interfaz de usuario de materiales
? Correa de reacción
? Reaccionar iconos
? Reaccionar enrutador dom
? redux
? Componentes con estilo
