airframe next

接下来的机身

在任何智能手机，平板电脑或台式机上都非常有效的高质量仪表板 /管理 /分析模板。可作为MIT许可证开源。

• 查看演示
• jQuery版本
• React版本
• Angular版本 -准备中的文档
• VUE版本 -准备中的文档
• MVC.NET版本 -准备文档
• 草图文件（很快）

介绍

带有简约设计和创新的Light UI的机身仪表板将使您使用出色的UI构建出色而强大的应用程序。完美设计用于大型应用程序，并详细逐步文档。

该机身项目基于NextJs - 一个流行的框架，用于具有出色的服务器端渲染支持的反应。包括用于自举支持的自定义Reactstrap。 NextJS文档中可能描述了您在这里找不到的任何主题。

注意：如果要在生产中使用此项目，则需要支持Nodejs的服务器。

初始配置：

在尝试运行开发环境之前，您需要在本地计算机上安装nodejs（> = 10.0.0）。

1. 将包装的内容提取到您本地机器。
2. 使用终端导航到提取的内容。
3. 运行npm install 。

确保在提取的目录中有一个名为.npmrc的文件。这些文件通常隐藏在基于UNIX的系统中。

发展

要启动开发环境类型npm run dev 。这将在启用Hot Reloading的情况下启动开发服务器。

生产

您可以使用软件包中包含的外壳脚本。如果您从终端使用基于UNIX的系统运行./build-dist.sh ，则可以在/dist目录中部署软件包。

如果您无法使用Shell脚本，则需要手动准备包装：

1. 运行npm run build
2. 将这些内容复制到目标机器
   • .next
   • static
   • package.json
   • .npmrc
3. 在您复制上述内容的服务器上运行npm install 。
4. 您现在可以通过运行npm start来启动应用

构建自定义

您可以通过添加下一个插件并在next.config.js文件中添加其他构建功能来添加其他构建功能。

项目详细信息

关于项目结构的一些兴趣点：

• components - 全球反应组件应在此处
• styles - 此处添加的样式不会被视为CSS模块，因此任何全球班级或图书馆样式都应该在此处
• features - 页面特定组件应在此处找到
• features/Layout - 可以在此处找到AppLayout组件，其中托管页面内容本身。您可以更改每个页面的布局组件。
• core/colors.js用仪表板用所有定义的颜色导出对象。对于基于JS的造型组件有用 - 例如图表。
• pages - 页面组件应该在这里。 NextJS将自动将文件名映射到路由URL。

路由

路由组件应放在/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 >
    ) ;
} 

路由

路由系统由NextJS本身处理。您可以在此处找到文档 - NextJS路由

路由特定布局

有时，您可能需要在Navbar或侧边栏中显示其他内容。为此，您应该为特定页面定义自定义的布局组件。例子：

1. 在features/layout中创建一个新的布局组件。以LayoutDefault组件为例。
2. 打开特定路由的页面组件。例如pages/example-page.js
3. 设置自定义布局组件：

 import React from 'react' ;

import { CustomLayout } from
    './../../features/Layout/CustomLayout' ;

const ExamplePage = ( ) => (
    { /* Page Content Here */ }
) ;
ExamplePage . layoutComponent = CustomLayout ;

export default ExamplePage ; 

主题

您可以通过为<ThemeProvider>组件提供initialStyle和initialColor ，以设置侧边栏和NAVBAR的配色方案，该组件应包装<Layout>组件。

可能的initialStyle值：

• 光
• 黑暗的
• 颜色

可能的initialColor值：

• 基本的
• 成功
• 信息
• 警告
• 危险
• 靛青
• 紫色的
• 粉色的
• 黄色的

程序主题更改

您可以通过使用组件中的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提供的选项：

• 样式- 当前主题样式
• 颜色- 当前主题颜色
• Onchangetheme（{style？,, color？}） - 允许更改主题