airframe react
1.0.0
Hinweis: Die HTML/CSS-Version ist hier verfügbar: https://github.com/0wczar/airframe
Hochwertige Dashboard-/Admin-/Analytics-Vorlage , die auf jedem Smartphone, Tablet oder Desktop hervorragend funktioniert. Verfügbar als Open Source als MIT-Lizenz.
Mit dem Airframe Dashboard mit minimalistischem Design und innovativer Light-Benutzeroberfläche können Sie eine erstaunliche und leistungsstarke Anwendung mit großartiger Benutzeroberfläche erstellen. Perfekt konzipiert für Großanwendungen, mit detaillierter Schritt-für-Schritt-Dokumentation.
Dieses Airframe -Projekt ist eine typische Webpack-basierte React-App, inklusive React Router und angepasstem Reactstrap. Bei diesem Projekt sind alle wenigen Abhängigkeiten auf dem neuesten Stand und es wird regelmäßig aktualisiert. Dieses Projekt unterstützt kein SSR. Wenn Sie es benötigen, verwenden Sie die NextJs-basierte Version.
Airframe Dashboard verfügt über eine riesige Sammlung von Komponenten, die in zahlreichen Kombinationen und Variationen verwendet werden können. Es kann in allen Arten von benutzerdefinierten Webanwendungen wie CRMs , CMSs , Admin-Panels , Admin-Dashboards , Analysen usw. verwendet werden.
Tomasz Owczarczyk:
Sie müssen NodeJs (>= 10.0.0) auf Ihrem lokalen Computer installiert haben, bevor Sie versuchen, eine Entwicklungsumgebung auszuführen.
npm install . Stellen Sie sicher, dass sich im extrahierten Verzeichnis eine Datei mit dem Namen .npmrc befindet. Diese Dateien sind normalerweise in Unix-basierten Systemen versteckt.
Um die Entwicklungsumgebung zu starten, geben Sie npm start in die Konsole ein. Dadurch wird ein Entwicklungsserver mit aktiviertem Hot-Reloading gestartet.
Um einen Produktions-Build zu erstellen, npm run build:prod . Nachdem der Vorgang abgeschlossen ist, können Sie die Ausgabe aus dem Verzeichnis /dist/ kopieren. Die Ausgabedateien sind minimiert und können in einer Produktionsumgebung verwendet werden.
Sie können den Build an Ihre spezifischen Anforderungen anpassen, indem Sie die Webpack-Konfigurationsdateien anpassen. Diese Dateien befinden sich im Verzeichnis /build . Weitere Informationen finden Sie in der Dokumentation von WebPack.
Einige interessante Punkte zur Projektstruktur:
app/components – Hier sollten benutzerdefinierte React-Komponenten stehenapp/styles – Hier hinzugefügte Stile werden nicht als CSS-Module behandelt, daher sollten alle globalen Klassen oder Bibliotheksstile hierher kommenapp/layout – hier finden Sie die AppLayout Komponente, die Seiteninhalte in sich selbst hostet; Zusätzliche Seitenleisten und Navigationsleisten sollten im Unterverzeichnis ./components/ platziert werden.app/colors.js – exportiert ein Objekt mit allen vom Dashboard definierten Farben. Nützlich zum Gestalten von JS-basierten Komponenten – zum Beispiel Diagrammen.app/routes – PageComponents sollten hier definiert und über index.js importiert werden. Mehr Details dazu später. Routenkomponenten sollten in separaten Verzeichnissen im Verzeichnis /routes/ abgelegt werden. Als nächstes sollten Sie die Datei /routes/index.js öffnen und die Komponente anhängen. Sie können dies auf zwei verschiedene Arten tun:
Statisch importierte Seiten werden bei PageLoad eifrig mit allen anderen Inhalten geladen. Beim Navigieren zu solchen Seiten kommt es zu keinen zusätzlichen Ladevorgängen , ABER die anfängliche Ladezeit der App wird ebenfalls länger sein. Um eine statisch importierte Seite hinzuzufügen, gehen Sie wie folgt vor:
// 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 >
) ;
} Dynamisch importierte Seiten werden nur dann geladen, wenn sie benötigt werden. Dadurch wird die Größe des anfänglichen Seitenladevorgangs verringert und das Laden der App beschleunigt. Sie können React.Suspense verwenden, um dies zu erreichen. Beispiel:
// 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 >
) ;
} Manchmal möchten Sie möglicherweise zusätzliche Inhalte in der Navigationsleiste oder der Seitenleiste anzeigen. Dazu sollten Sie eine benutzerdefinierte Navbar-/Sidebar-Komponente definieren und diese einer bestimmten Route hinzufügen. Beispiel:
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 >
) ; Sie können das Farbschema für die Seitenleiste und die Navigationsleiste festlegen, indem Sie initialStyle und initialColor für die <ThemeProvider> -Komponente bereitstellen, die die <Layout> -Komponente umschließen soll.
Mögliche initialStyle Werte:
lightdarkcolor Mögliche initialColor Werte:
primarysuccessinfowarningdangerindigopurplepinkyellow Sie können das Farbschema zur Laufzeit ändern, indem Sie den 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 >
) ; Vom ThemeConsumer bereitgestellte Optionen:
Verwendete Plugins in diesem Dashboard:
