airframe react
1.0.0
Примечание. Версия HTML/CSS доступна здесь: https://github.com/0wczar/airframe.
Высококачественный шаблон панели управления / администрирования / аналитики , который отлично работает на любом смартфоне, планшете или настольном компьютере. Доступен с открытым исходным кодом по лицензии MIT.
Панель управления Airframe с минималистичным дизайном и инновационным легким пользовательским интерфейсом позволит вам создать удивительное и мощное приложение с великолепным пользовательским интерфейсом. Идеально разработан для крупномасштабных приложений и снабжен подробной пошаговой документацией.
Этот проект Airframe представляет собой типичное приложение React на основе Webpack, React Router также включен в состав настроенного реактивного ремня. В этом проекте обновлены все его немногие зависимости, и он будет регулярно обновляться. Этот проект не поддерживает SSR. Если вам это нужно — используйте версию на базе NextJs.
Airframe Dashboard имеет огромную коллекцию компонентов, которые можно использовать в большом количестве комбинаций и вариаций. Его можно использовать во всех типах пользовательских веб-приложений, таких как CRM , CMS , панели администратора , панели администратора , аналитика и т. д.
Томаш Овчарчик:
Прежде чем пытаться запустить среду разработки, вам необходимо установить NodeJs (>= 10.0.0) на локальном компьютере.
npm install . Убедитесь, что в извлеченном каталоге есть файл с именем .npmrc . Эти файлы обычно скрыты в системах на базе Unix.
Чтобы запустить среду разработки, введите в консоли npm start . Это запустит сервер разработки с включенной горячей перезагрузкой.
Чтобы создать производственную сборку типа npm run build:prod . После завершения процесса вы можете скопировать выходные данные из каталога /dist/ . Выходные файлы минимизированы и готовы к использованию в производственной среде.
Вы можете настроить сборку в соответствии со своими потребностями, изменив файлы конфигурации Webpack. Эти файлы можно найти в каталоге /build . Для более подробной информации ознакомьтесь с документацией WebPack.
Некоторые интересные моменты о структуре проекта:
app/components — здесь должны находиться пользовательские компоненты React.app/styles — добавленные сюда стили не будут рассматриваться как модули CSS, поэтому сюда следует помещать любые глобальные классы или библиотечные стили.app/layout — здесь можно найти компонент AppLayout , который размещает внутри себя содержимое страницы; дополнительные боковые панели и панели навигации должны быть размещены в подкаталоге ./components/ .app/colors.js — экспортирует объект со всеми цветами, определенными на панели мониторинга. Полезно для стилизации компонентов на основе JS, например диаграмм.app/routes — здесь должны быть определены PageComponents и импортированы через index.js . Подробнее об этом позже. Компоненты маршрута должны быть размещены в отдельных каталогах внутри каталога /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 >
) ;
} Динамически импортированные страницы будут загружаться только тогда, когда они необходимы. Это уменьшит размер начальной загрузки страницы и ускорит загрузку приложения. Для этого вы можете использовать React.Suspense . Пример:
// Create a Lazy Loaded Page Component Import
const SomeAsyncPage = React . lazy ( ( ) => import ( './SomeAsyncPage' ) ) ;
// ...
export const RoutedContent = ( ) => {
return (
< Switch >
{ /* ... */ }
{ /*
Define the route and wrap the component in a React.Suspense loader.
The fallback prop might contain a component which will be displayed
when the page is loading.
*/ }
< Route path = "/some-async-page" >
< React . Suspense fallback = { < PageLoader /> } >
< SomeAsyncPage />
</ React . Suspense >
</ Route >
</ Switch >
) ;
} Иногда вам может потребоваться отобразить дополнительный контент на панели навигации или боковой панели. Для этого вам следует определить индивидуальный компонент Navbar/Sidebar и прикрепить его к определенному маршруту. Пример:
import { SidebarAlternative } from './../layout/SidebarAlternative' ;
import { NavbarAlternative } from './../layout/NavbarAlternative' ;
// ...
export const RoutedNavbars = ( ) => (
< Switch >
{ /* Other Navbars: */ }
< Route
component = { NavbarAlternative }
path = "/some-custom-navbar-route"
/>
{ /* Default Navbar: */ }
< Route
component = { DefaultNavbar }
/>
</ Switch >
) ;
export const RoutedSidebars = ( ) => (
< Switch >
{ /* Other Sidebars: */ }
< Route
component = { SidebarAlternative }
path = "/some-custom-sidebar-route"
/>
{ /* Default Sidebar: */ }
< Route
component = { DefaultSidebar }
/>
</ Switch >
) ; Вы можете установить цветовую схему для боковой панели и панели навигации, предоставив initialStyle и initialColor компоненту <ThemeProvider> , который должен обертывать компонент <Layout> .
Возможные значения initialStyle :
lightdarkcolor Возможные значения initialColor :
primarysuccessinfowarningdangerindigopurplepinkyellow Вы можете изменить цветовую схему во время выполнения, используя 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 :
Используемые плагины в этой панели:
