airframe next
1.0.0
Plantilla de panel de alta calidad / administrador / análisis que funciona muy bien en cualquier teléfono inteligente, tableta o escritorio. Disponible como código abierto como la licencia MIT.
El tablero de aviones de fuselaje con un diseño minimalista e innovadora UI de luz le permitirá construir una aplicación increíble 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 de fuselaje se basa en NextJS, un marco popular hecho para React con un excelente soporte de representación del lado del servidor. Incluye ReactStrap personalizado para soporte de arranque. Cualquier tema que no encuentre aquí probablemente se describa en la documentación NextJS.
Nota: Si desea utilizar este proyecto en producción, necesitará un servidor que admite NodeJS.
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. Esos archivos generalmente están ocultos en sistemas basados en UNIX.
Para iniciar el entorno de desarrollo, el tipo de entorno npm run dev en la consola. Esto iniciará un servidor de desarrollo con recarga en caliente habilitado.
Puede usar un script de shell incluido con el paquete. Si está utilizando un sistema /dist en UNIX ./build-dist.sh
Si no puede usar el script de shell, necesita preparar el paquete manualmente:
npm run build.nextstaticpackage.json.npmrcnpm install en el servidor donde copió el contenido anterior.npm start Puede agregar funciones de compilación adicionales agregando los próximos complementos y configurándolos dentro del archivo next.config.js .
Algunos puntos de interés sobre la estructura del proyecto del proyecto:
components : los componentes de React Global deben ir aquístyles : los estilos agregados aquí no se tratarán como módulos CSS, por lo que cualquier clases globales o estilos de biblioteca debería ir aquífeatures : los componentes específicos de la página deben encontrarse aquífeatures/Layout : el componente AppLayout se puede encontrar aquí que aloja el contenido de la página dentro de sí mismo. Puede cambiar el componente de diseño para cada página.core/colors.js : exporta un objeto con todos los colores definidos por el tablero. Útil para el estilo de componentes basados en JS, por ejemplo, gráficos.pages : los componentes de la página deben estar aquí. NextJS asignará automáticamente los nombres de los archivos para enrutar URL. Los componentes de la ruta deben colocarse en directorios separados dentro del directorio /routes/ . A continuación, debe abrir /routes/index.js Archives y adjuntar el componente. Puedes hacer esto de dos maneras diferentes:
Las páginas importadas se cargarán ansiosamente en pageload con todo el otro contenido. No habrá cargas adicionales al navegar a tales páginas , pero el tiempo de carga inicial de la aplicación también será más largo. Para agregar una página importada estáticamente, debe hacerse 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 >
) ;
} El sistema de enrutamiento es manejado por el propio NextJS. Puede encontrar la documentación aquí - Ruting NextJS
A veces es posible que desee mostrar contenido adicional en la barra de navegación o la barra lateral. Para hacer esto, debe definir un componente de diseño personalizado para una página en particular. Ejemplo:
features/layout . Tome el componente LayoutDefault como ejemplo.pages/example-page.js . import React from 'react' ;
import { CustomLayout } from
'./../../features/Layout/CustomLayout' ;
const ExamplePage = ( ) => (
{ /* Page Content Here */ }
) ;
ExamplePage . layoutComponent = CustomLayout ;
export default ExamplePage ; Puede establecer el esquema de color para la barra lateral y la barra de navegación proporcionando initialStyle e initialColor al componente <ThemeProvider> que debería estar envolviendo el componente <Layout> .
Posibles valores initialStyle :
Posibles valores initialColor :
Puede cambiar el esquema de color en el tiempo de ejecución utilizando el 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 el ThemeConsumer :
