airframe react
1.0.0
Remarque La version HTML/CSS est disponible ici : https://github.com/0wczar/airframe
Modèle de tableau de bord/administration/analyse de haute qualité qui fonctionne parfaitement sur n'importe quel smartphone, tablette ou ordinateur de bureau. Disponible en Open Source sous licence MIT.
Le tableau de bord Airframe avec un design minimaliste et une interface utilisateur Light innovante vous permettra de créer une application étonnante et puissante avec une excellente interface utilisateur. Parfaitement conçu pour les applications à grande échelle, avec une documentation détaillée étape par étape.
Ce projet Airframe est une application React typique basée sur Webpack, React Router également inclus avec un réactstrap personnalisé. Ce projet a toutes ses quelques dépendances à jour et il sera mis à jour régulièrement. Ce projet ne prend pas en charge SSR. Si vous en avez besoin, utilisez la version basée sur NextJs.
Airframe Dashboard possède une vaste collection de composants qui peuvent être utilisés dans un grand nombre de combinaisons et de variations. Il peut être utilisé dans tous les types d'applications Web personnalisées telles que les CRM , les CMS , les panneaux d'administration , les tableaux de bord d'administration , les analyses , etc.
Tomasz Owczarczyk :
Vous devez avoir NodeJs (>= 10.0.0) installé sur votre ordinateur local avant d'essayer d'exécuter un environnement de développement.
npm install . Assurez-vous d'avoir un fichier appelé .npmrc dans le répertoire extrait. Ces fichiers sont généralement cachés dans les systèmes basés sur Unix.
Pour démarrer l'environnement de développement, tapez npm start dans la console. Cela démarrera un serveur de développement avec le rechargement à chaud activé.
Pour créer une version de production, tapez npm run build:prod . Une fois le processus terminé, vous pouvez copier la sortie du répertoire /dist/ . Les fichiers de sortie sont minifiés et prêts à être utilisés dans un environnement de production.
Vous pouvez personnaliser la version en fonction de vos besoins spécifiques en ajustant les fichiers de configuration Webpack. Ces fichiers se trouvent dans le répertoire /build . Pour plus de détails, consultez la documentation de WebPack.
Quelques points d'intérêt sur la structure du projet :
app/components - les composants React personnalisés doivent être placés iciapp/styles - les styles ajoutés ici ne seront pas traités comme des modules CSS, donc toutes les classes globales ou styles de bibliothèque doivent être placés iciapp/layout - le composant AppLayout peut être trouvé ici et héberge le contenu de la page en lui-même ; des barres latérales et des barres de navigation supplémentaires doivent être placées dans le sous-répertoire ./components/ .app/colors.js - exporte un objet avec toutes les couleurs définies par le tableau de bord. Utile pour styliser les composants basés sur JS - par exemple les graphiques.app/routes - Les PageComponents doivent être définis ici et importés via index.js . Plus de détails à ce sujet plus tard. Les composants de route doivent être placés dans des répertoires séparés à l'intérieur du répertoire /routes/ . Ensuite, vous devez ouvrir le fichier /routes/index.js et joindre le composant. Vous pouvez le faire de deux manières différentes :
Les pages importées de manière statique seront chargées avec impatience sur PageLoad avec tous les autres contenus. Il n'y aura pas de chargements supplémentaires lors de la navigation vers ces pages MAIS le temps de chargement initial de l'application sera également plus long. Pour ajouter une page importée statiquement, procédez comme ceci :
// 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 >
) ;
} Les pages importées dynamiquement ne seront chargées que lorsqu'elles seront nécessaires. Cela réduira la taille du chargement initial de la page et accélérera le chargement de l'application. Vous pouvez utiliser React.Suspense pour y parvenir. Exemple:
// 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 >
) ;
} Parfois, vous souhaiterez peut-être afficher du contenu supplémentaire dans la barre de navigation ou la barre latérale. Pour ce faire, vous devez définir un composant Navbar/Sidebar personnalisé et l'attacher à un itinéraire particulier. Exemple:
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 >
) ; Vous pouvez définir le jeu de couleurs pour la barre latérale et la barre de navigation en fournissant initialStyle et initialColor au composant <ThemeProvider> qui doit envelopper le composant <Layout> .
Valeurs initialStyle possibles :
lightdarkcolor Valeurs initialColor possibles :
primarysuccessinfowarningdangerindigopurplepinkyellow Vous pouvez modifier le jeu de couleurs lors de l'exécution en utilisant ThemeConsumer à partir des composants. Exemple:
// ...
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 >
) ; Options fournies par ThemeConsumer :
Plugins utilisés dans ce tableau de bord :
