airframe next
1.0.0
Hochwertige Dashboard / Admin / Analytics -Vorlage , die auf jedem Smartphone, Tablet oder Desktop hervorragend funktioniert. Verfügbar als Open Source als MIT -Lizenz.
Mit Airframe Dashboard mit einem minimalistischen Design und einer innovativen Light -Benutzeroberfläche können Sie eine erstaunliche und leistungsstarke Anwendung mit einer großartigen Benutzeroberfläche erstellen. Perfekt für große Anwendungen mit detaillierter Schritt -für -Schritt -Dokumentation.
Dieses Flugzeugzellenprojekt basiert auf NextJs - ein beliebtes Framework, das für die Reaktion mit großartiger Unterstützung bei der Server -Seite rendert. Enthält maßgeschneiderte ReactStrap für die Bootstrap -Unterstützung. Jedes Thema, das Sie hier nicht finden, wird wahrscheinlich in der NextJS -Dokumentation beschrieben.
Hinweis: Wenn Sie dieses Projekt in der Produktion verwenden möchten, benötigen Sie einen Server, der NodeJS unterstützt.
Auf Ihrer lokalen Maschine müssen NodeJs (> = 10.0.0) installiert sein, bevor Sie versuchen, eine Entwicklerumgebung auszuführen.
npm install aus. Stellen Sie sicher, dass Sie eine Datei namens .npmrc im extrahierten Verzeichnis haben. Diese Dateien sind in der Regel in UNIX -basierten Systemen versteckt.
Um den Entwicklungsumfeld zu starten, type npm run dev in der Konsole. Dadurch wird ein Entwicklungsserver mit aktiviertem Reloading gestartet.
Sie können ein Shell -Skript verwenden, das im Paket enthalten ist. Wenn Sie einen UNIX-basierten System ausführen ./build-dist.sh aus dem Terminal, und Sie haben ein bereit, ein Paket im Verzeichnis /dist zu bereitstellen.
Wenn Sie das Shell -Skript nicht verwenden können, müssen Sie das Paket manuell vorbereiten:
npm run build.nextstaticpackage.json.npmrcnpm install auf dem Server aus, wo Sie den obigen Inhalt kopiert haben.npm start ausführen Sie können zusätzliche Build -Funktionen hinzufügen, indem Sie nächste Plugins hinzufügen und diese in der next.config.js -Datei konfigurieren.
Einige Punkte von Interesse an der Projektprojektstruktur:
components - Globale React -Komponenten sollten hier gehenstyles - Styles, die hier hinzugefügt wurden, werden nicht als CSS -Module behandelt, daher sollten globale Klassen oder Bibliotheksstile hier gehenfeatures - Seitenspezifische Komponenten sollten hier gefunden werdenfeatures/Layout - Die AppLayout -Komponente finden Sie hier, die den Seiteninhalt in sich selbst hostet. Sie können die Layoutkomponente für jede Seite ändern.core/colors.js - Exportiert ein Objekt mit allen definierten Farben mit dem Dashboard. Nützlich zum Styling von JS -basierten Komponenten - z. B. Diagramme.pages - Seitenkomponenten sollten hier sein. NextJS wird die Dateinamen automatisch auf die Routung von URLs zuordnen. Routenkomponenten sollten in separaten Verzeichnissen innerhalb des /routes/ Verzeichnisses platziert werden. Als nächstes sollten Sie /routes/index.js Datei öffnen und die Komponente anhängen. Sie können dies auf zwei unterschiedliche Weise tun:
Statisch importierte Seiten werden mit allen anderen Inhalten eifrig auf Pageload geladen. Es gibt keine zusätzlichen Lasten beim Navigieren zu solchen Seiten , aber auch die anfängliche App -Ladezeit ist länger. Um eine statisch importierte Seite hinzuzufügen, sollte sie so erfolgen:
// 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 >
) ;
} Das Routing -System wird von NextJs selbst behandelt. Sie finden die Dokumentation hier - NextJS Routing
Manchmal möchten Sie möglicherweise zusätzliche Inhalte in der Navi oder in der Seitenleiste anzeigen. Dazu sollten Sie eine angepasste Layoutkomponente für eine bestimmte Seite definieren. Beispiel:
features/layout . Nehmen Sie die LayoutDefault -Komponente als Beispiel.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 ; Sie können das Farbschema für die Seitenleiste und die Navigationsleiste festlegen, indem Sie der <ThemeProvider> -Komponente initialStyle und initialColor zur Verfügung stellen, die die <Layout> -Komponente einwickeln sollte.
Mögliche initialStyle -Werte:
Mögliche initialColor -Werte:
Sie können das Farbschema zur Laufzeit ändern, indem Sie das ThemeConsumer aus den Komponenten verwenden. Beispiel:
// ...
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 >
) ; Optionen des ThemeConsumer :
