windmill dashboard nextjs typescript Download - windmill dashboard nextjs typescript Quellcode herunterladen

windmill dashboard nextjs typescript

AI-Quellcode

1.0.0

Herunterladen

Windmill Dashboard Next.js TypeScript

Siehe das ursprüngliche Projekt von @EstevanMaito

Mit Hilfe von anderen Mitwirkenden:

TypeScript -Version von @Neutralboy
NEXTJS -Version von @Aldhanekaa

Sieh es live

Dies ist keine Vorlage. Dies ist eine vollständige Anwendung, die auf React aufgebaut ist und alle winzigen Details erledigt sind, sodass Sie nur die Daten mitbringen müssen, um sie zu ernähren.

Barrierefreiheit hat in meinen Projekten Priorität, und ich denke, es sollte auch in Ihrer sein. Daher wurde es überall zur Verfügung gestellt, dass echte Leser der Bildschirmleser und Tastaturnavigation verfügbar sind.

? Merkmale

? Durchlebend zugänglich (mit Bildschirmlesern entwickelt)
? Dunkeles Thema aktiviert (Laden Sie auch verschiedene Bilder basierend auf dem Thema)
? Mehrere (benutzerdefinierte) Komponenten
⚡ Codeaufteilung
Rückenwind -CSS
Windmühle reagieren UI
Helden
Diagramm.js

Dokumente

Allgemeine Komponenten

Windmill Dashboard React ist auf der Windmühle React UI gebaut. Sie finden die Dokumentation für jede kleine Komponente dort.

Beispiel Boilerplate

Alle Komponenten und Container werden im Ordner Beispiel gespeichert

Routing

Ändern Sie die Standard -Umleitung, wenn Sie die / oder home in der Datei Next.config.js klicken.

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

Seitenleiste

So konfigurieren Sie die Seitenleistenmenüs, siehe Datei (Routes/SideBar.tsx).

Dies sind die Routen, die in der Seitenleiste angezeigt werden. Sie erwarten drei Eigenschaften:

path : das Ziel;
name : Der zu angezeigte Name;
icon : Ein Symbol zum Veranschaulichung des Elements

Element, die als Dropdowns verwendet werden, wie die Option Seiten, benötigen Sie keinen path , erwarten Sie jedoch ein routes -Array von Objekten mit path und 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' ,
    } ,