airframe next
1.0.0
Modelo de painel / administrador / análise de alta qualidade que funciona muito bem em qualquer smartphone, tablet ou desktop. Disponível como código aberto como licença do MIT.
O painel de aeronave com um design minimalista e uma interface de usuário leve inovadora permitirá que você crie um aplicativo incrível e poderoso com ótima interface do usuário. Perfeitamente projetado para aplicativos em larga escala, com documentação detalhada passo a passo.
Este projeto de estrutura de aeronave é baseado no NextJS - uma estrutura popular feita para reagir com excelente suporte ao lado do servidor. Inclui reactstrap personalizado para suporte de bootstrap. Qualquer tópico que você não encontrará aqui provavelmente é descrito na documentação NextJS.
NOTA: Se você deseja usar este projeto na produção, precisará de um servidor de suporte ao NodeJS.
Você precisa ter o NodeJS (> = 10.0.0) instalado em sua máquina local, antes de tentar executar um ambiente de desenvolvimento.
npm install . Verifique se você tem um arquivo chamado .npmrc no diretório extraído. Esses arquivos geralmente são ocultos em sistemas baseados em UNIX.
Para iniciar o ambiente de desenvolvimento, tipo npm run dev no console. Isso iniciará um servidor de desenvolvimento com recarregamento a quente ativado.
Você pode usar um script de shell incluído no pacote. Se você estiver usando um sistema baseado no Unix ./build-dist.sh do terminal, e terá um pacote pronto para implantar no diretório /dist .
Se você não pode usar o script do shell, precisa preparar o pacote manualmente:
npm run build.nextstaticpackage.json.npmrcnpm install no servidor em que copiou o conteúdo acima.npm start Você pode adicionar recursos de compilação adicionais adicionando os próximos plugins e configurando -os dentro do arquivo next.config.js .
Alguns pontos de interesse sobre a estrutura do projeto do projeto:
components - os componentes do Global React devem ir aquistyles - Os estilos adicionados aqui não serão tratados como módulos CSS, então quaisquer estilos globais de classes ou bibliotecas devem ir aquifeatures - componentes específicos da página devem ser encontrados aquifeatures/Layout - O componente AppLayout pode ser encontrado aqui, que hospeda o conteúdo da página em si. Você pode alterar o componente de layout para cada página.core/colors.js - Exporta um objeto com todas as cores definidas pelo painel. Útil para modelar componentes baseados em JS - por exemplo, gráficos.pages - Os componentes da página devem estar aqui. O NextJS mapeará automaticamente os nomes de arquivos para rotear URLs. Os componentes da rota devem ser colocados em diretórios separados dentro do /routes/ diretório. Em seguida, você deve abrir o arquivo /routes/index.js e anexar o componente. Você pode fazer isso de duas maneiras diferentes:
As páginas importadas estaticamente serão carregadas ansiosamente no Pageload com todo o outro conteúdo. Não haverá cargas adicionais ao navegar para essas páginas , mas o tempo inicial de carregamento do aplicativo também será mais longo. Para adicionar uma página importada estaticamente, ela deve ser feita assim:
// 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 >
) ;
} O sistema de roteamento é tratado pelo próprio NextJS. Você pode encontrar a documentação aqui - o roteamento do próximojs
Às vezes, você pode exibir conteúdo adicional na barra de navegação ou na barra lateral. Para fazer isso, você deve definir um componente de layout personalizado para uma página específica. Exemplo:
features/layout . Veja o componente LayoutDefault como exemplo.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 ; Você pode definir o esquema de cores para a barra lateral e a barra naval, fornecendo initialStyle e initialColor ao componente <ThemeProvider> que deve estar envolvendo o componente <Layout> .
Possíveis valores de initialStyle :
Possíveis valores initialColor :
Você pode alterar o esquema de cores no tempo de execução usando o ThemeConsumer dos componentes. Exemplo:
// ...
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 >
) ; Opções fornecidas pelo ThemeConsumer :
