airframe react
1.0.0
Nota La versión HTML/CSS está disponible aquí: https://github.com/0wczar/airframe
Plantilla de panel/administración/análisis de alta calidad que funciona muy bien en cualquier teléfono inteligente, tableta o computadora de escritorio. Disponible como código abierto como licencia MIT.
Airframe Dashboard con un diseño minimalista y una innovadora interfaz de usuario ligera le permitirá crear una aplicación sorprendente y poderosa con una excelente interfaz de usuario. Perfectamente diseñado para aplicaciones a gran escala, con documentación detallada paso a paso.
Este proyecto Airframe es una aplicación React típica basada en Webpack, React Router también se incluye junto con una correa de reacción personalizada. Este proyecto tiene todas sus pocas dependencias actualizadas y se actualizará periódicamente. Este proyecto no es compatible con SSR. Si lo necesita, utilice la versión basada en NextJs.
Airframe Dashboard tiene una enorme colección de componentes que se pueden utilizar en una gran cantidad de combinaciones y variaciones. Se puede utilizar en todo tipo de aplicaciones web personalizadas, como CRM , CMS , paneles de administración , paneles de administración , análisis , etc.
Tomasz Owczarczyk:
Debe tener NodeJs (>= 10.0.0) instalado en su máquina local antes de intentar ejecutar un entorno de desarrollo.
npm install . Asegúrese de tener un archivo llamado .npmrc en el directorio extraído. Estos archivos suelen estar ocultos en los sistemas basados en Unix.
Para iniciar el entorno de desarrollo, escriba npm start en la consola. Esto iniciará un servidor de desarrollo con la recarga en caliente habilitada.
Para crear una compilación de producción, npm run build:prod . Una vez completado el proceso, puede copiar el resultado del directorio /dist/ . Los archivos de salida están minimizados y listos para usarse en un entorno de producción.
Puede personalizar la compilación para que se adapte a sus necesidades específicas ajustando los archivos de configuración de Webpack. Esos archivos se pueden encontrar en el directorio /build . Para obtener más detalles, consulte la documentación de WebPack.
Algunos puntos de interés sobre la estructura del proyecto:
app/components : los componentes personalizados de React deben ir aquíapp/styles : los estilos agregados aquí no se tratarán como módulos CSS, por lo que cualquier clase global o estilo de biblioteca debe ir aquíapp/layout : el componente AppLayout se puede encontrar aquí y aloja el contenido de la página dentro de sí mismo; Se deben colocar barras laterales y barras de navegación adicionales en ./components/ .app/colors.js : exporta un objeto con todos los colores definidos por el Panel. Útil para diseñar componentes basados en JS, por ejemplo, gráficos.app/routes : los componentes de página deben definirse aquí e importarse a través de index.js . Más detalles sobre eso más adelante. Los componentes de ruta deben colocarse en directorios separados dentro del directorio /routes/ . A continuación debe abrir el archivo /routes/index.js y adjuntar el componente. Puedes hacer esto de dos maneras diferentes:
Las páginas importadas estáticamente se cargarán con entusiasmo en PageLoad con todo el resto del contenido. No habrá cargas adicionales al navegar a dichas páginas , PERO el tiempo de carga inicial de la aplicación también será mayor. Para agregar una página importada estáticamente se debe hacer así:
// 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 >
) ;
} Las páginas importadas dinámicamente solo se cargarán cuando sean necesarias. Esto disminuirá el tamaño de la carga de la página inicial y hará que la aplicación se cargue más rápido. Puedes usar React.Suspense para lograr esto. Ejemplo:
// 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 >
) ;
} A veces es posible que desees mostrar contenido adicional en la barra de navegación o en la barra lateral. Para hacer esto, debe definir un componente de barra de navegación/barra lateral personalizado y adjuntarlo a una ruta particular. Ejemplo:
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 >
) ; Puede configurar la combinación de colores para la barra lateral y la barra de navegación proporcionando initialStyle y initialColor al componente <ThemeProvider> que debería envolver el componente <Layout> .
Posibles valores initialStyle :
lightdarkcolor Posibles valores initialColor :
primarysuccessinfowarningdangerindigopurplepinkyellow Puede cambiar la combinación de colores en tiempo de ejecución utilizando ThemeConsumer de los componentes. Ejemplo:
// ...
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 >
) ; Opciones proporcionadas por ThemeConsumer :
Complementos usados en este panel:
