Il s'agit d'un fork du référentiel Flowbite Admin Dashboard d'origine. Ce fork est utilisé pour créer une version NodeJS du tableau de bord en utilisant Express et EJS comme moteur de création de modèles.
Ce projet est un modèle de tableau de bord d'administration d'interface utilisateur gratuit et open source construit avec les composants de Flowbite et basé sur le premier framework CSS Tailwind comprenant des graphiques, des tableaux, des widgets, des mises en page CRUD, des modaux, des tiroirs, etc.
Ce tableau de bord d'administration peut vous aider rapidement à commencer à créer une application pour votre projet en utilisant les dernières technologies de développement UI/UX dans le domaine open source, notamment Tailwind CSS et Flowbite.
Les composants interactifs tels que les barres de navigation, les modaux, les tiroirs et les info-bulles sont tous basés sur la bibliothèque de composants open source populaire appelée Flowbite, qui nous permet d'utiliser ces éléments en créant un ensemble plus complexe de pages et de widgets dans un tableau de bord d'administration à part entière. modèle.
Toutes les pages, widgets et composants sont uniquement basés sur les classes utilitaires de Tailwind CSS et sont compatibles avec la dernière v3.x
de la technologie en purgeant automatiquement toutes les classes en fonction des chemins des modèles.
Commencez avec 15 pages d'exemples avancés, dont deux présentations différentes de la page d'accueil d'un tableau de bord remplie de widgets graphiques, de tableaux, de sélecteurs de date et de statistiques, ainsi que deux pages de présentation CRUD pour les produits, les utilisateurs, une page de paramètres, des pages d'authentification pour la connexion et l'inscription et même pages d'erreur 404 et 500 personnalisées.
Ce tableau de bord d'administration contient de nombreux composants avancés provenant à la fois de Flowbite mais également d'autres bibliothèques tierces telles que ApexCharts qui ont été personnalisés avec les classes CSS Tailwind et conçus sur la base du système de conception Flowbite.
Si vous souhaitez utiliser ce projet, nous vous recommandons d'étudier également la bibliothèque de composants que nous avons utilisée pour créer ce tableau de bord, car vous pouvez utiliser encore plus de composants de cette bibliothèque pour améliorer les exemples que nous avons déjà codés ici.
Ce produit est construit à l’aide des technologies largement utilisées suivantes :
Tableau de bord | Disposition empilée | Produits (CRUD) |
---|---|---|
Utilisateurs (CRUD) | Paramètres | Page de tarification |
---|---|---|
Page de connexion | Page d'inscription | Réinitialiser le mot de passe |
---|---|---|
Mot de passe oublié | Verrouillage du profil | Page d'entretien |
---|---|---|
404 introuvable | Erreur de serveur 500 | Aire de jeux |
---|---|---|
package.json
et démarrez le serveur de développement local en exécutant :Utiliser NPM :
npm install
npm run dev
Utilisation du fil :
yarn install
yarn dev
Utilisation de PNPM :
pnpm install
pnpm dev
Voici une liste de technologies et de guides compatibles pour Flowbite et Tailwind CSS :
L'impressionnante communauté open source a également construit et gère actuellement les bibliothèques autonomes suivantes pour React, Vue, Svelte et Angular :
Nous avons également rédigé des guides d'intégration pour les frameworks et bibliothèques front-end suivants :
Flowbite a une excellente intégration avec la plupart des frameworks back-end car il s'appuie sur JavaScript Vanilla :
Dans le téléchargement, vous trouverez les répertoires et fichiers suivants :
Flowbite Admin Dashboard
.
├── LICENSE
├── README.md
├── content
├── data
├── layouts
├── node_modules
├── package-lock.json
├── package.json
├── postcss.config.js
├── src
├── static
├── tailwind.config.js
├── webpack.config.js
└── yarn.lock
À l'heure actuelle, notre objectif est officiellement de prendre en charge les deux dernières versions des navigateurs suivants :
Nous utilisons GitHub Issues comme outil de suivi des bogues officiel pour le tableau de bord d'administration Flowbite. Voici quelques conseils pour nos utilisateurs qui souhaitent signaler un problème :
Si vous avez des questions ou avez besoin d'aide pour intégrer le produit, veuillez nous contacter au lieu d'ouvrir un problème.