dashmin
1.0.0
Привет, дев.. это Дашмин! Это не что иное, как простая и элегантная база, которая поможет вам в разработке вашей административной системы. В нем пока не так много компонентов, но в него уже встроены некоторые известные библиотеки, такие как 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Пользователь: пароль Dashmin: 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 .
В каталоге views создайте компонент представления для визуализации.
// 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 ; После создания представления перейдите в routes/index.js и импортируйте созданные представления.
// Views
import Example01 from 'pages/example01' ;
import Example02 from 'pages/example02' ;Определите свои маршруты.
// Routes
const Routes = {
example01 : '/example01' ,
example02 : '/example02' ,
} ; После определения маршрутов определите константный 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 .
Если вы хотите использовать значки .. o Dashmin USA или 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
} ,
]
}Файл маршрута, содержащий настройки, сделанные выше.
// 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/.
? Материальный интерфейс
? Реактстрап
? Реагировать на иконки
? React Router Дом
? Редукс
? Стилизованные компоненты
