airframe next

Airframe Suivant

Template de tableau de bord / admin / analytique de haute qualité qui fonctionne très bien sur n'importe quel smartphone, tablette ou bureau. Disponible en open source que la licence MIT.

• Afficher la démo
• version jQuery
• Version de réact
• Version angulaire - Documentation en préparation
• Version Vue - Documentation en préparation
• Version MVC.NET - Documentation en préparation
• Sketch Files (bientôt)

Introduction

Le tableau de bord de la cellule avec une conception minimaliste et une interface utilisateur de lumière innovante vous permettra de créer une application incroyable et puissante avec une grande interface utilisateur. Conçu parfaitement pour des applications à grande échelle, avec une documentation détaillée étape par étape.

Ce projet de cellule est basé sur NIXTJS - un framework populaire conçu pour réagir avec un grand support de rendu côté serveur. Comprend ReactsStrap personnalisé pour le support bootstrap. Tout sujet que vous ne trouverez pas ici est probablement décrit dans la documentation NextJS.

Remarque: Si vous souhaitez utiliser ce projet en production, vous aurez besoin d'un serveur prenant en charge NodeJS.

Configuration initiale:

Vous devez faire installer NodeJS (> = 10.0.0) sur votre machine locale, avant d'essayer d'exécuter un environnement de développement.

1. Extraire le contenu de l'emballage dans votre machine locale.
2. En utilisant le terminal, accédez au contenu extrait.
3. Exécutez 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.

Développement

Pour démarrer le type d'environnement de développement, npm run dev dans la console. Cela démarrera un serveur de développement avec un rechargement chaud activé.

Production

Vous pouvez utiliser un script shell inclus avec le package. Si vous utilisez un système basé sur UNIX exécuter ./build-dist.sh du terminal, et vous aurez un package prêt à déployer dans le répertoire /dist .

Si vous ne pouvez pas utiliser le script shell, vous devez préparer le package manuellement:

1. Run npm run build
2. Copiez ces contenus sur la machine cible
   • .next
   • static
   • package.json
   • .npmrc
3. Exécutez npm install sur le serveur où vous avez copié le contenu ci-dessus.
4. Vous pouvez maintenant démarrer l'application en exécutant npm start

Construire une personnalisation

Vous pouvez ajouter des fonctionnalités de construction supplémentaires en ajoutant des plugins suivants et en les configurant dans le fichier next.config.js .

Détails du projet

Quelques points d'intérêt sur la structure du projet du projet:

• components - Global React Composants devrait aller ici
• styles - Les styles ajoutés ici ne seront pas traités comme des modules CSS, de sorte que les classes mondiales ou les styles de bibliothèque devraient aller ici
• features - Les composants spécifiques à la page doivent être trouvés ici
• features/Layout - Le composant AppLayout peut être trouvé ici qui héberge le contenu de la page en lui-même. Vous pouvez modifier le composant de mise en page pour chaque page.
• core/colors.js - exporte un objet avec toutes les couleurs définies par le tableau de bord. Utile pour styliser des composants basés sur JS - par exemple des graphiques.
• pages - Les composants de la page doivent être ici. NextJS mappera automatiquement les noms de fichiers pour acheminer les URL.

Routage

Les composants de l'itinéraire doivent être placés dans des répertoires distincts à l'intérieur du /routes/ répertoires. Ensuite, vous devez ouvrir le fichier /routes/index.js et joindre le composant. Vous pouvez le faire de deux manières différentes:

Importations statiques

Les pages importées statiquement seront chargées avec impatience sur Pageload avec tous les autres contenus. Il n'y aura pas de charges 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, cela doit être fait 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 >
    ) ;
} 

Routage

Le système de routage est géré par NextJS lui-même. Vous pouvez trouver la documentation ici - Route NextJS

Disposition spécifique de l'itinéraire

Parfois, vous voudrez 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 de mise en page personnalisé pour une page particulière. Exemple:

1. Créez un nouveau composant de mise en page dans features/layout . Prenez le composant LayoutDefault à titre d'exemple.
2. Ouvrez le composant de page pour un itinéraire particulier. Par exemple, pages/example-page.js .
3. Définissez le composant de mise en page personnalisé comme ceci:

 import React from 'react' ;

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

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

export default ExamplePage ; 

Thème

Vous pouvez définir le schéma de couleurs de la barre latérale et de la barre de navigation en fournissant le composant initialStyle et initialColor dans le composant <ThemeProvider> qui devrait emballer le composant <Layout> .

Valeurs initialStyle possibles:

• lumière
• sombre
• couleur

Valeurs initialColor possibles:

• primaire
• succès
• informations
• avertissement
• danger
• indigo
• violet
• rose
• jaune

Changement de thème programmatique

Vous pouvez modifier le schéma de couleurs lors de l'exécution en utilisant le 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 le ThemeConsumer :

• Style - Style de thème actuel
• Couleur - Couleur du thème actuel
• onchangeTheme ({style ?, Color?}) - Permet de changer le thème