windmill dashboard nextjs typescript - Téléchargement windmill dashboard nextjs typescript Code Source Download

windmill dashboard nextjs typescript

Code Source AI

1.0.0

Télécharger

Tableau de bord Windmill suivant.js TypeScript

Le tableau de bord du moulin à vent réagit

Voir le projet original de @estevanmaito

Avec l'aide d'autres contributeurs:

Version dactylographiée par @Neutreboy
Version suivante par @aldhanekaa

Voyez-le en direct

Ce n'est pas un modèle. Il s'agit d'une application complète, construite sur le dessus de React, avec tous les petits détails pris en charge, il vous suffit donc d'apporter les données pour les alimenter.

L'accessibilité est une priorité dans mes projets et je pense que cela devrait également être dans le vôtre, donc cela a été développé en écoutant de vrais lecteurs d'écran, des pièges à concentration et une navigation au clavier sont disponibles partout.

? Caractéristiques

? Accessible (développé à l'aide de lecteurs d'écran)
? Thème sombre activé (charger même différentes images basées sur le thème)
? Composants multiples (personnalisés)
⚡ Fractionnement du code
CSS du vent arrière
Moulin à vent réagir
Héroïcènes
Graphique.js

Docs

Composants généraux

Le tableau de bord du moulin à vent est construit sur l'interface utilisateur de réaction de moulin à vent. Vous trouverez la documentation de chaque petit composant là-bas.

Exemple de passe-partout

Tous les composants et conteneurs sont enregistrés dans un exemple de dossier

Routage

Modifier la redirection par défaut lorsque vous appuyez sur le / ou home dans le fichier next.config.js

  async redirects ( ) {
    return [
      {
        source : '/' ,
        destination : '/example/login' ,
        permanent : false ,
      } ,
    ]
  }

Itinéraires de barres latérales

Pour configurer les menus de barres latérales, voir le fichier (itinéraires /bar Sidebar.tsx).

Ce sont les itinéraires qui se présenteront dans la barre latérale. Ils attendent trois propriétés:

path : la destination;
name : le nom à afficher;
icon : une icône pour illustrer l'élément

L'article qui est utilisé comme dérouté, comme l'option Pages, n'a pas besoin d'un path , mais attendez-vous à un routes d'objets d'objets avec path et name :

 // sidebar.js
{
  path : '/example/tables' ,
  icon : 'TablesIcon' ,
  name : 'Tables' ,
} ,
{
  icon : 'PagesIcon' , // <-- this is used as a submenu, so no path
  name : 'Pages' ,
  routes : [
    // submenu
    {
      path : '/example/login' ,
      name : 'Login' , // <-- these don't have icons
    } ,
    {
      path : '/example/create-account' ,
      name : 'Create account' ,
    } ,

Ceci est un projet Next.js Bootstrapé avec create-next-app .

Commencer

Tout d'abord, installez les dépendances:

npm install
# or
yarn install

Ensuite, vous pouvez exécuter le serveur de développement:

npm run dev
# or
yarn dev

Ouvrez http: // localhost: 3000 avec votre navigateur pour voir le résultat.

Vous pouvez commencer à modifier la page en modifiant pages/index.tsx . La page indique automatiquement la mise à jour lorsque vous modifiez le fichier.

Les routes API sont accessibles sur http: // localhost: 3000 / api / bonjour. Ce point de terminaison peut être modifié dans pages/api/hello.ts .

Le répertoire pages/api est mappé à /api/* . Les fichiers de ce répertoire sont traités comme des routes API au lieu de réagir des pages.