dashmin
1.0.0
Halo dev .. ini Dashmin! Ini tidak lebih dari sebuah basis sederhana dan elegan untuk membantu Anda dalam pengembangan sistem administrasi Anda. Ini belum memiliki banyak komponen, tetapi sudah memiliki beberapa perpustakaan terkenal seperti Material UI dan Reactstrap yang terintegrasi, jadi jika Anda mengetahui salah satunya, akan mudah untuk membuat halaman Anda .. jika Anda tidak ingin menggunakan salah satu darinya mereka, jangan ragu untuk menggunakan perpustakaan. sesuai dengan keinginanmu. Jadi mari kita mulai.
Jika Anda ingin membuat admin menggunakan DASHmin, ikuti tutorial instalasi di bawah ini!
├── 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.mdPengguna: pass dashmin: 123
Demo langsung
Untuk menjalankan proyek ini, Anda harus menginstal Node.js di mesin Anda! Jika Anda belum memilikinya, kunjungi situs web https://nodejs.org/en/ dan unduh serta instal seperti yang diajarkan dalam dokumentasi!
Untuk mulai mengkloning repositori dan menginstal dependensi menggunakan perintah di bawah ini.
git clone https://github.com/hiukky/dashmin-react.git -b master nameOfYourProject
cd nameOfYourProject
yarn install
npm install
Benar .. setelah menginstal semua dependensi Anda dapat menjalankan aplikasi dan memeriksa apakah semuanya berfungsi dengan benar.
yarn run start
npm run start
Siap!! jika semuanya berjalan dengan baik, cukup periksa aplikasi Anda di browser http://127.0.0.1:3000/.
Dashmin sudah siap, jadi sebagai permulaan Anda dapat membuat tampilan Anda di src/views/YourView dan kemudian menggunakannya di file rute di routes .
Di dalam direktori views , buat komponen tampilan Anda untuk dirender.
// 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 ; Setelah membuat tampilan Anda, buka routes/index.js dan impor tampilan yang dibuat.
// Views
import Example01 from 'pages/example01' ;
import Example02 from 'pages/example02' ;Tentukan rute Anda.
// Routes
const Routes = {
example01 : '/example01' ,
example02 : '/example02' ,
} ; Setelah menentukan rute, tentukan const Dashmin dengan meneruskan properti definisi. Dashmin memerlukan informasi untuk navbar , sidebar dan content . jadi penting untuk memberi tahu mereka.
const Dashmin = {
// navbar
navbar : {
}
// sidebar
sidebar : {
}
// Content
content : [
]
} Di navbar Anda perlu memasukkan objek dropdown yang berisi objek user dan 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 ( ) ;
}
}
}
} ,
} Untuk sidebar Anda harus melewati brand dan buttons . Untuk brand Anda hanya perlu memasukkan nama organisasi Anda dengan memasukkan nama lengkap max dan disingkat min . Untuk buttons , diperlukan name , icon , dan route .
Mengenai ikon-ikon tersebut.. o Dashmin menggunakan o React icons , maka Anda dapat dengan mudah mengimpor ikon-ikon yang ingin Anda gunakan dan melewati komponen untuk ikon.
// 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 ,
} ,
]
}
} Akhirnya bagian dari konten. Untuk itu perlu melewati serangkaian objek yang berisi route dan komponen visualisasi untuk view secara penebusan.
// 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
} ,
]
}File Route berisi pengaturan yang dibuat di atas.
// 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 ;Setelah Anda mengikuti langkah-langkah di atas, kini Anda dapat menguji aplikasi Anda menggunakan salah satu perintah di bawah ini jika Anda belum pernah menjalankannya sebelumnya.
yarn run start
npm run start
Siap!! jika semuanya berjalan dengan baik, cukup periksa aplikasi Anda di browser http://127.0.0.1:3000/.
? UI Materi
? tali reaksi
? Ikon Reaksi
? Bereaksi Router Dom
? reduks
? Komponen Bergaya
