Bei diesem Projekt handelt es sich um eine kostenlose Open-Source-UI-Admin-Dashboard-Vorlage, die mit den Komponenten von Flowbite erstellt wurde und auf dem Utility-First-CSS-Framework Tailwind basiert und Diagramme, Tabellen, Widgets, CRUD-Layouts, Modalitäten, Schubladen und mehr enthält.
Dieses Admin-Dashboard kann Ihnen schnell dabei helfen, mit der Erstellung einer Anwendung für Ihr Projekt zu beginnen, indem Sie die neuesten UI/UX-Entwicklungstechnologien im Open-Source-Bereich verwenden, einschließlich Tailwind CSS und Flowbite.
Die interaktiven Komponenten wie Navigationsleisten, Modalitäten, Schubladen und Tooltips basieren alle auf der beliebten Open-Source-Komponentenbibliothek Flowbite, die es uns ermöglicht, diese Elemente zu nutzen, indem wir komplexere Seiten- und Widget-Sets in einem vollwertigen Admin-Dashboard erstellen Vorlage.
Alle Seiten, Widgets und Komponenten basieren ausschließlich auf den Utility-First-Klassen von Tailwind CSS und sind mit der neuesten v3.x
der Technologie kompatibel, indem alle Klassen basierend auf den Vorlagenpfaden automatisch gelöscht werden.
Beginnen Sie mit 15 erweiterten Beispielseiten, darunter zwei verschiedene Layouts einer Dashboard-Homepage voller Diagramm-Widgets, Tabellen, Datumsauswahl und Statistiken sowie zwei CRUD-Layoutseiten für Produkte, Benutzer, eine Einstellungsseite, Authentifizierungsseiten zum Anmelden und Registrieren und sogar benutzerdefinierte 404- und 500-Fehlerseiten.
Dieses Admin-Dashboard enthält viele erweiterte Komponenten sowohl von Flowbite als auch von anderen Drittanbieter-Bibliotheken wie ApexCharts, die individuell mit Tailwind CSS-Klassen angepasst und auf Basis des Flowbite Design Systems entworfen wurden.
Wenn Sie dieses Projekt verwenden möchten, empfehlen wir Ihnen, auch die Komponentenbibliothek zu studieren, die wir zum Erstellen dieses Dashboards verwendet haben, da Sie noch mehr Komponenten aus dieser Bibliothek verwenden können, um die hier bereits codierten Beispiele zu verbessern.
Dieses Produkt basiert auf den folgenden weit verbreiteten Technologien:
Rückenwind-CSS: tailwindcss.com
Flowbite: flowbite.com
HUGO gohugo.io
Webpack webpack.js.org
Flowbite Admin-Dashboard
JavaScript-Frameworks
Back-End-Frameworks
Gebaut mit Flowbite
Tailwind CSS-Dienstprogrammklassen
15 Beispielseiten
Erweiterte Komponenten
Flowbite-Dokumentation
Arbeitsablauf
Inhaltsverzeichnis
Demoseiten
Schnellstart
Dateistruktur
Browser-Unterstützung
Ressourcen
Probleme melden
Technischer Support oder Fragen
Lizenzierung
Nützliche Links
Autoren
Klonen Sie dieses Repository oder laden Sie die ZIP-Datei herunter
Stellen Sie sicher, dass Node.js und NPM installiert sind
Installieren Sie die Projektabhängigkeiten aus der Datei package.json
:
npm install
Erstellen Sie einen lokalen Server auf localhost:1313
indem Sie den folgenden Befehl ausführen:
npm run start
Sie können das Projekt auch erstellen und die Verteilungsdateien im Ordner public/
abrufen, indem Sie Folgendes ausführen:
npm run build
Sie können Ihr Projekt sofort auf Vercel hochladen, indem Sie die Standard-HUGO-Konfiguration auswählen. Abhängig von Ihrem eigenen Tech-Stack, ob es sich um React.js, Vue, Nuxt.js, Next.js oder ein Back-End-Framework handelt, können Sie die Layouts aber auch einfach kopieren aus diesem Projekt in Ihrem eigenen Tech-Stack.
Hier ist eine Liste kompatibler Technologien und Anleitungen für Flowbite und Tailwind CSS:
Die großartige Open-Source-Community hat außerdem die folgenden eigenständigen Bibliotheken für React, Vue, Svelte und Angular erstellt und verwaltet diese derzeit:
Flowbite React-Bibliothek
Flowbite Vue-Bibliothek
Flowbite Svelte-Bibliothek
Flowbite Angular-Bibliothek
Wir haben auch Integrationshandbücher für die folgenden Front-End-Frameworks und Bibliotheken geschrieben:
Flowbite mit React-Anleitung
Flowbite mit Next.js-Anleitung
Flowbite mit Vue-Anleitung
Flowbite mit Nuxt.js-Anleitung
Flowbite mit Svelte-Führung
Flowbite lässt sich hervorragend in die meisten Back-End-Frameworks integrieren, da es auf Vanilla-JavaScript basiert:
Verwendung von Flowbite mit Laravel
Verwendung von Flowbite mit Ruby on Rails 7
Verwendung von Flowbite mit Django
Verwendung von Flowbite mit Flask
Im Download finden Sie die folgenden Verzeichnisse und Dateien:
Flowbite Admin Dashboard . ├── LICENSE ├── README.md ├── config.yml ├── content ├── data ├── layouts ├── node_modules ├── package-lock.json ├── package.json ├── postcss.config.js ├── resources ├── src ├── static ├── tailwind.config.js ├── webpack.config.js └── yarn.lock
Derzeit streben wir offiziell die Unterstützung der letzten beiden Versionen der folgenden Browser an:
Live-Vorschau: https://flowbite-admin-dashboard.vercel.app/
Flowbite-Dokumentation: https://flowbite.com/docs/getting-started/introduction/
Tailwind CSS-Dokumentation: https://tailwindcss.com/
Lizenzvereinbarung: https://flowbite.com/docs/getting-started/license/
Probleme: Github-Problemseite
Wir verwenden GitHub Issues als offiziellen Bug-Tracker für das Flowbite Admin Dashboard. Hier sind einige Ratschläge für unsere Benutzer, die ein Problem melden möchten:
Stellen Sie sicher, dass Sie die neueste Version des Flowbite Admin Dashboard verwenden. Überprüfen Sie das CHANGELOG in Ihrem Dashboard auf der GitHub-Release-Seite.
Wenn Sie uns reproduzierbare Schritte für das Problem bereitstellen, verkürzt sich die Zeit, die für die Behebung des Problems benötigt wird.
Einige Probleme können browserspezifisch sein. Daher kann es hilfreich sein, anzugeben, in welchem Browser das Problem aufgetreten ist.
Wenn Sie Fragen haben oder Hilfe bei der Integration des Produkts benötigen, kontaktieren Sie uns bitte, anstatt ein Problem zu eröffnen.
Copyright 2019-2023 Bergside Inc. (https://flowbite.com)
Open Source unter der MIT-Lizenz
Flowbite-Bibliothek – Open-Source-Komponenten, die mit Tailwind CSS erstellt wurden
Flowbite Figma – Designsystem für Figma
Flowbite Blocks – Bauabschnitte für Website und Anwendungen
Flowbite Pro – Eine größere Sammlung der Open-Source-Version der letzten drei
Zoltán Szőgyényi
Robert Tanislav