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？}） - 允許更改主題