airframe react
1.0.0
Nota A versão HTML/CSS está disponível aqui: https://github.com/0wczar/airframe
Modelo de painel/administração/análise de alta qualidade que funciona muito bem em qualquer smartphone, tablet ou desktop. Disponível como código aberto como licença MIT.
O Airframe Dashboard com um design minimalista e Light UI inovador permitirá que você crie um aplicativo incrível e poderoso com excelente UI. Perfeitamente projetado para aplicações em larga escala, com documentação detalhada passo a passo.
Este projeto Airframe é um aplicativo React típico baseado em Webpack, React Router também incluído junto com reactstrap personalizado. Este projeto tem poucas dependências atualizadas e será atualizado regularmente. Este projeto não oferece suporte a SSR. Se precisar, use a versão baseada em NextJs.
Airframe Dashboard possui uma enorme coleção de componentes que podem ser usados em um grande número de combinações e variações. Ele pode ser usado em todos os tipos de aplicativos da web personalizados, como CRMs , CMSs , Painéis de administração , Painéis de administração , Analytics , etc.
Tomasz Owczarczyk:
Você precisa ter NodeJs (>= 10.0.0) instalados em sua máquina local antes de tentar executar um ambiente de desenvolvimento.
npm install . Certifique-se de ter um arquivo chamado .npmrc no diretório extraído. Esses arquivos normalmente ficam ocultos em sistemas baseados em Unix.
Para iniciar o ambiente de desenvolvimento, digite npm start no console. Isso iniciará um servidor de desenvolvimento com recarregamento a quente habilitado.
Para criar um tipo de construção de produção npm run build:prod . Após a conclusão do processo, você pode copiar a saída do diretório /dist/ . Os arquivos de saída são reduzidos e prontos para serem usados em um ambiente de produção.
Você pode personalizar a construção para atender às suas necessidades específicas ajustando os arquivos de configuração do Webpack. Esses arquivos podem ser encontrados no diretório /build . Para mais detalhes confira a documentação do WebPack.
Alguns pontos de interesse sobre a estrutura do projeto do projeto:
app/components – componentes personalizados do React devem ir aquiapp/styles - os estilos adicionados aqui não serão tratados como módulos CSS, portanto, quaisquer classes globais ou estilos de biblioteca devem ir aquiapp/layout - o componente AppLayout pode ser encontrado aqui, que hospeda o conteúdo da página dentro de si; barras laterais e barras de navegação adicionais devem ser colocadas em ./components/ .app/colors.js - exporta um objeto com todas as cores definidas pelo Dashboard. Útil para estilizar componentes baseados em JS - por exemplo, gráficos.app/routes - PageComponents devem ser definidos aqui e importados via index.js . Mais detalhes sobre isso mais tarde. Os componentes da rota devem ser colocados em diretórios separados dentro do diretório /routes/ . 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 prontamente no PageLoad com todo o outro conteúdo. Não haverá cargas adicionais ao navegar para essas páginas , MAS o tempo de carregamento inicial do aplicativo também será maior. Para adicionar uma página importada estaticamente, deve ser feito 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 >
) ;
} As páginas importadas dinamicamente só serão carregadas quando forem necessárias. Isso diminuirá o tamanho do carregamento inicial da página e tornará o carregamento do aplicativo mais rápido. Você pode usar React.Suspense para conseguir isso. Exemplo:
// 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 >
) ;
} Às vezes você pode querer exibir conteúdo adicional na barra de navegação ou na barra lateral. Para fazer isso você deve definir um componente Navbar/Sidebar personalizado e anexá-lo a uma rota específica. Exemplo:
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 >
) ; Você pode definir o esquema de cores da barra lateral e da barra de navegação fornecendo initialStyle e initialColor ao componente <ThemeProvider> que deve envolver o componente <Layout> .
Possíveis valores initialStyle :
lightdarkcolor Valores possíveis initialColor :
primarysuccessinfowarningdangerindigopurplepinkyellow Você pode alterar o esquema de cores em tempo de execução usando 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 :
Plugins usados neste painel:
