windmill dashboard react

Vier 100 Punkte und PWA bereit. Verbinden Sie einfach Ihre Daten.

Sehen Sie es live

Dies ist keine Vorlage. Dies ist eine vollständige Anwendung, die auf React aufbaut und auf alle kleinen Details geachtet wird. Sie müssen also nur die Daten mitbringen, um sie zu füttern.

Barrierefreiheit hat in meinen Projekten Priorität und ich denke, dass dies auch in Ihrem der Fall sein sollte. Deshalb wurde dies unter Berücksichtigung echter Bildschirmleseprogramme entwickelt. Fokusfallen und Tastaturnavigation sind überall verfügbar.

? Merkmale

• ? Durchgehend barrierefrei (entwickelt mit Screenreadern)
• ? Dunkles Theme aktiviert (sogar unterschiedliche Bilder je nach Theme laden)
• ? Mehrere (benutzerdefinierte) Komponenten
• ⚡ Codeaufteilung
• Rückenwind-CSS
• Windmill React-Benutzeroberfläche
• Reagieren Sie auf den Router
• Heroicons
• Chart.js
• PWA bietet Offline-First- und App-ähnliches Erlebnis

Dokumente

Allgemeine Komponenten

Windmill Dashboard React basiert auf der Windmill React-Benutzeroberfläche. Dort finden Sie die Dokumentation zu jeder Kleinkomponente.

Routenführung

Routen im Windmill Dashboard sind in zwei Kategorien unterteilt: Seitenleiste (routes/sidebar.js) und allgemein (routes/index.js).

Seitenleistenrouten

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

• path : das Ziel;
• name : der anzuzeigende Name;
• icon : ein Symbol zur Veranschaulichung des Elements

Elemente, die als Dropdown-Menüs verwendet werden, wie die Option „Seiten“, benötigen keinen path , sondern erwarten ein routes Array von Objekten mit path und name :

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

Allgemeine (Router-)Routen

Dies sind interne (private) Routen. Sie werden innerhalb der App unter Verwendung der Standardcontainer containers/Layout gerendert.

Wenn Sie eine Route beispielsweise zu einer Zielseite hinzufügen möchten, sollten Sie diese zum Router der App (src/App.js) hinzufügen, genau wie Login , CreateAccount und andere Seiten weitergeleitet werden.

Wie füge ich dem Router eine neue Seite hinzu?

1. Erstellen Sie Ihre Seite in src/pages , sagen wir MyPage.js ;
2. Fügen Sie es dem globalen Router hinzu ( src/routes/index.js )

 const MyPage = lazy ( ( ) => import ( '../pages/MyPage' ) )

Fügen Sie es dann dem routes Array hinzu:

 {
  path : '/my-page' , // the url that will be added to /app/
  component : MyPage , // the page component you jsut imported
}

3. Wenn Sie diese Seite über die Seitenleiste zugänglich machen möchten, haben Sie folgende Optionen:

• Fügen Sie es dem Root routes Array hinzu

 {
  path : '/app/my-page' , // /app + the url you added in routes/index.js
  icon : 'HomeIcon' , // the component being exported from src/icons/index.js
  name : 'My Page' , // name that appear in Sidebar
} ,

• Fügen Sie es als Option unter einem Dropdown hinzu

 {
  icon : 'PagesIcon' ,
  name : 'Pages' ,
  routes : [
    // submenu
    {
      path : '/app/my-page' ,
      name : 'My Page' ,
    } ,

Wenn Sie fragen, woher diese /app kommt, stammt sie aus dieser Zeile in src/App.js , die die App rendert:

 < Route path = "/app" component = { Layout } />

---

Dieses Projekt wurde mit Create React App gebootstrappt.

Verfügbare Skripte

Im Projektverzeichnis können Sie Folgendes ausführen:

npm start

Führt die App im Entwicklungsmodus aus.
Öffnen Sie http://localhost:3000, um es im Browser anzuzeigen.

Die Seite wird neu geladen, wenn Sie Änderungen vornehmen.
Eventuelle Flusenfehler werden Ihnen auch in der Konsole angezeigt.

npm test

Startet den Testläufer im interaktiven Überwachungsmodus.
Weitere Informationen finden Sie im Abschnitt zum Ausführen von Tests.

npm run build

Erstellt die App für die Produktion im build -Ordner.
Es bündelt React im Produktionsmodus korrekt und optimiert den Build für die beste Leistung.

Der Build wird minimiert und die Dateinamen enthalten die Hashes.
Ihre App ist bereit zur Bereitstellung!

Weitere Informationen finden Sie im Abschnitt zur Bereitstellung.

npm run eject

Hinweis: Dies ist ein einseitiger Vorgang. Sobald Sie eject , können Sie nicht mehr zurück!

Wenn Sie mit dem Build-Tool und den Konfigurationsoptionen nicht zufrieden sind, können Sie es jederzeit eject . Dieser Befehl entfernt die einzelne Build-Abhängigkeit aus Ihrem Projekt.

Stattdessen werden alle Konfigurationsdateien und die transitiven Abhängigkeiten (Webpack, Babel, ESLint usw.) direkt in Ihr Projekt kopiert, sodass Sie die volle Kontrolle darüber haben. Alle Befehle außer eject funktionieren weiterhin, verweisen jedoch auf die kopierten Skripte, sodass Sie sie optimieren können. An diesem Punkt sind Sie auf sich allein gestellt.

Sie müssen niemals eject verwenden. Der kuratierte Funktionsumfang eignet sich für kleine und mittlere Bereitstellungen, und Sie sollten sich nicht verpflichtet fühlen, diese Funktion zu verwenden. Wir verstehen jedoch, dass dieses Tool nicht nützlich wäre, wenn Sie es nicht anpassen könnten, wenn Sie dazu bereit sind.

Erfahren Sie mehr

Weitere Informationen finden Sie in der Dokumentation zum Erstellen einer React-App.

Um React zu lernen, schauen Sie sich die React-Dokumentation an.

Code-Splitting

Dieser Abschnitt wurde hierher verschoben: https://facebook.github.io/create-react-app/docs/code-splitting

Analyse der Bündelgröße

Dieser Abschnitt wurde hierher verschoben: https://facebook.github.io/create-react-app/docs/analyzing-the-bundle-size

Erstellen einer progressiven Web-App

Dieser Abschnitt wurde hierher verschoben: https://facebook.github.io/create-react-app/docs/making-a-progressive-web-app

Erweiterte Konfiguration

Dieser Abschnitt wurde hierher verschoben: https://facebook.github.io/create-react-app/docs/advanced-configuration

Einsatz

Dieser Abschnitt wurde hierher verschoben: https://facebook.github.io/create-react-app/docs/deployment

npm run build kann nicht minimiert werden

Dieser Abschnitt wurde hierher verschoben: https://facebook.github.io/create-react-app/docs/troubleshooting#npm-run-build-fails-to-minify