DASHmin is only a base for the development of your Administrative System! it still (still ;) .. does not have a range of components, but is well on the way to help you in development! By default Bootstrap is already included, if you know the basics of it,easily create your pages!
If you want to create your admin using DASHmin, follow the installation tutorial below!
✓ Requirements
To run this project, you need to have Node.js installed on your machine! If you do not have it, go to the website https://nodejs.org/en/ and download and install it as it is taught in the documentation!
✓ Instalation
git clone https://github.com/hiukky/dashmin-react.git
Install
yarn install
or
npm install
✓ Structure
├── node_modules
├── public
│ ├── favicon.ico
│ ├── index.html
│ ├── manifest.json
├── src
│ ├── app
│ ├── assets
│ ├── components
│ ├── pages
│ ├── routes
│ ├── store
│ ├── dashmin.js
│ ├── index.js
├── .editorconfig
├── .eslintrc.json
├── .gitignore
├── .travis.yml
├── package.json
├── README.md
├── LICENCE.md
├── logo.png
└── dashmin.png
✓ How to use
Dashmin is just a basic interface to help you in creating your admin dashboard. After you download and install the dependencies, you can start your application.
Configuring the Sidebar
To get started, you may be going to the src/dashmin.js
file and dropping basic information in the sidebar as Brand
and Buttons
.
Brand
<Sidebar
// Brand
brand={{
max: 'D A S H M I N',
min: 'dmin',
}}
/>
Buttons
To define your buttons in the sidebar, you need to use the buttons
property and pass an array of objects with their buttons, informing an id for the Id
button, the name name
, icone icon
and the route to which it should reference route
.
<Sidebar
// Buttons
buttons={[
{
id: 1,
name: 'Dashboard',
icon: 'fas fa-tachometer-alt',
route: '/',
},
]}
/>
Creating the Pages
To create your pages simply go to the src/pages
directory and create your pages.
pages/example.js
// Imports
import React from 'react';
// Example
const Example = () => (
<div>
<Title>Example</Title>
</div>
);
export default Example;
And then immediately import them into the index file in pages/index.js
.
pages/index.js
// Pages
import Example from './example';
const pages = ({
Example,
});
export default pages;
Creating the Routes
Finally, define the routes of the application in routes/index.js
.
routes/index.js
// Pages
import pages from '../pages';
// Routes
const Routes = [
{
route: '/',
page: pages.Example,
},
];
export default Routes;
Finishing
After you have followed the steps above, you can now test your application using one of the commands below.
yarn run start
or
npm run start
Ready!! if everything went well, just check your application in the browser http://127.0.0.1:3000/.
✓ Preview
✔ Demo
✓ Frameworks
✓ License
MIT © Romullo