airframe next

Планер следующий

Высококачественный шаблон приборной панели / администратора / аналитики , который отлично работает на любом смартфоне, планшете или на рабочем столе. Доступно в качестве открытого исходного кода в качестве лицензии MIT.

• Посмотреть демо
• jQuery версия
• Реагировать версию
• Угловая версия - документация в подготовке
• Версия VUE - документация в подготовке
• Версия MVC.NET - документация в подготовке
• Секретные файлы (скоро)

Введение

Панель панели планера с минималистским дизайном и инновационным световым пользовательским интерфейсом позволит вам построить удивительное и мощное приложение с отличным пользовательским интерфейсом. Идеально разработанный для крупномасштабных приложений, с подробной пошаговой документацией.

Этот проект планера основан на NextJS - популярной структуре, созданной для реагирования с отличной поддержкой на стороне сервера. Включает индивидуальную реакцию для поддержки начальной загрузки. Любая тема, которую вы не найдете здесь, вероятно, описана в документации NextJS.

Примечание. Если вы хотите использовать этот проект в производстве, вам понадобится сервер, поддерживающий Nodejs.

Начальная конфигурация:

Вам нужно установить Nodejs (> = 10.0.0) на вашей локальной машине, прежде чем пытаться запустить среду разработки.

1. Извлеките содержимое пакета в местную машину.
2. Использование терминала перейдите к извлеченному содержимому.
3. Запустите npm install .

Убедитесь, что у вас есть файл с именем .npmrc в извлеченном каталоге. Эти файлы обычно скрыты в системах на основе UNIX.

Разработка

Чтобы начать среду разработки типа npm run dev в консоли. Это запустит сервер разработки с включенной горячей перезагрузкой.

Производство

Вы можете использовать сценарий оболочки, включенный в пакет. Если вы используете системный запуск на основе UNIX ./build-dist.sh из терминала, и у вас будет готовый к развертыванию пакет в каталоге /dist .

Если вы не можете использовать скрипт оболочки, вам нужно подготовить пакет вручную:

1. Запустить npm run build
2. Скопируйте это содержимое на целевую машину
   • .next
   • static
   • package.json
   • .npmrc
3. Запустите npm install на сервере, где вы скопировали вышеуказанное содержимое.
4. Теперь вы можете запустить приложение, запустив npm start

Настройка настройки

Вы можете добавить дополнительные функции сборки, добавив следующие плагины и настроив их внутри файла next.config.js .

Детали проекта

Некоторые заинтересованные точки о структуре проекта проекта:

• components - Глобальные компоненты React должны идти сюда
• styles - Стили, добавленные здесь
• features - конкретные компоненты, конкретные страницы, должны быть найдены здесь
• features/Layout - компонент AppLayout можно найти здесь, который проводит содержимое страницы внутри себя. Вы можете изменить компонент макета для каждой страницы.
• core/colors.js - Экспортирует объект со всеми определенными цветами на приборной панели. Полезно для стиля компонентов на основе JS - например, диаграммы.
• pages - Компоненты страницы должны быть здесь. NextJS автоматически отображает имена файлов на маршрутизацию URL -адресов.

Маршрутинг

Компоненты маршрута должны быть размещены в отдельных каталогах внутри /routes/ каталога. Далее вы должны открыть файл /routes/index.js и прикрепить компонент. Вы можете сделать это двумя разными способами:

Статический импорт

Страницы, импортированные статически, будут с нетерпением загружены на PageLoad со всем другим контентом. При навигации на такие страницы не будет никаких дополнительных нагрузок , но начальное время загрузки приложения также будет длиннее. Чтобы добавить статически импортированную страницу, она должна быть сделана так:

 // Import the default component
import SomePage from './SomePage' ;
// ...
export const RoutedContent = ( ) => {
    return (
        < Switch >
            { /* ... */ }
            { /* Define the route for a specific path */ }
            < Route path = "/some-page" exact component = { SomePage } />
            { /* ... */ }
        </ Switch >
    ) ;
} 

Маршрутинг

Система маршрутизации обрабатывается самим NextJS. Вы можете найти документацию здесь - NextJS Маршрутизация

Маршрут конкретный макет

Иногда вы можете отобразить дополнительный контент в Navbar или на боковой панели. Для этого вы должны определить индивидуальный компонент макета для конкретной страницы. Пример:

1. Создайте новый компонент макета в features/layout . Возьмите компонент LayoutDefault в качестве примера.
2. Откройте компонент страницы для конкретного маршрута. Например pages/example-page.js .
3. Установите пользовательский компонент макета, как это:

 import React from 'react' ;

import { CustomLayout } from
    './../../features/Layout/CustomLayout' ;

const ExamplePage = ( ) => (
    { /* Page Content Here */ }
) ;
ExamplePage . layoutComponent = CustomLayout ;

export default ExamplePage ; 

Тематическое

Вы можете установить цветовую схему для боковой панели и Navbar, предоставив initialStyle и initialColor компонент <ThemeProvider> , который должен быть обертывает компонент <Layout> .

Возможные значения initialStyle :

• свет
• темный
• цвет

Возможные initialColor значения:

• начальный
• успех
• информация
• предупреждение
• Опасность
• индиго
• фиолетовый
• розовый
• желтый

Программатическая тема изменения

Вы можете изменить цветовую схему в среде выполнения, используя ThemeConsumer из компонентов. Пример:

 // ...
import { ThemeContext } from './../components' ;
// ...
const ThemeSwitcher = ( ) => (
    < ThemeConsumer >
        ( { onChangeTheme } ) = > (
            < React . Fragment >
                < Button onClick = { ( ) => onThemeChange ( { style : 'light' } ) } >
                    Switch to Light
                </ Button >
                < Button onClick = { ( ) => onThemeChange ( { style : 'dark' } ) } >
                    Switch to Dark
                </ Button >
            </ React . Fragment >
        )
    </ ThemeConsumer >
) ;

Варианты, предоставленные ThemeConsumer :

• Стиль - текущий стиль темы
• Цвет - текущий цвет темы
• Onchangetheme ({style?, Color?}) - позволяет изменить тему