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 :
Tailwind CSS : tailwindcss.com
Flowbite : flowbite.com
HUGO gohugo.io
Webpack webpack.js.org
Tableau de bord d'administration Flowbite
Cadres JavaScript
Cadres back-end
Construit avec Flowbite
Classes d'utilitaires CSS Tailwind
15 pages d'exemple
Composants avancés
Documentation Flowbite
Flux de travail
Table des matières
Pages de démonstration
Démarrage rapide
Structure du fichier
Prise en charge du navigateur
Ressources
Problèmes de signalement
Assistance technique ou questions
Licence
Liens utiles
Auteurs
Clonez ce référentiel ou téléchargez le fichier ZIP
Assurez-vous que Node.js et NPM sont installés
Installez les dépendances du projet à partir du fichier package.json
:
npm install
Créez un serveur local sur localhost:1313
en exécutant la commande suivante :
npm run start
Vous pouvez également créer le projet et récupérer les fichiers de distribution dans le dossier public/
en exécutant :
npm run build
Vous pouvez télécharger instantanément votre projet sur Vercel en sélectionnant la configuration HUGO par défaut, mais en fonction de votre propre pile technologique, qu'il s'agisse de React.js, Vue, Nuxt.js, Next.js ou d'un framework back-end, vous pouvez également simplement copier les mises en page. de ce projet dans votre propre pile technologique.
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 :
Bibliothèque Flowbite React
Bibliothèque Flowbite Vue
Bibliothèque Flowbite Svelte
Bibliothèque angulaire Flowbite
Nous avons également rédigé des guides d'intégration pour les frameworks et bibliothèques front-end suivants :
Guide Flowbite avec React
Guide Flowbite avec Next.js
Guide Flowbite avec Vue
Guide Flowbite avec Nuxt.js
Flowbite avec le guide Svelte
Flowbite a une excellente intégration avec la plupart des frameworks back-end car il s'appuie sur JavaScript Vanilla :
Utiliser Flowbite avec Laravel
Utiliser Flowbite avec Ruby on Rails 7
Utiliser Flowbite avec Django
Utiliser Flowbite avec Flask
Dans le téléchargement, vous trouverez les répertoires et fichiers suivants :
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
À l'heure actuelle, notre objectif est officiellement de prendre en charge les deux dernières versions des navigateurs suivants :
Aperçu en direct : https://flowbite-admin-dashboard.vercel.app/
Documentation Flowbite : https://flowbite.com/docs/getting-started/introduction/
Documentation CSS Tailwind : https://tailwindcss.com/
Contrat de licence : https://flowbite.com/docs/getting-started/license/
Problèmes : page des problèmes Github
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 :
Assurez-vous que vous utilisez la dernière version du tableau de bord d'administration Flowbite. Consultez le CHANGELOG depuis votre tableau de bord sur la page des versions de GitHub.
En nous fournissant des étapes reproductibles pour résoudre le problème, nous réduirons le temps nécessaire à sa résolution.
Certains problèmes peuvent être spécifiques au navigateur, il peut donc être utile de préciser dans quel navigateur vous avez rencontré le 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.
Copyright 2019-2023 Bergside Inc. (https://flowbite.com)
Open source sous licence MIT
Bibliothèque Flowbite - Composants open source construits avec Tailwind CSS
Flowbite Figma - Système de conception conçu pour Figma
Flowbite Blocks - Création de sections pour sites Web et applications
Flowbite Pro - Une plus grande collection de la version open source des trois derniers
Zoltán Szőgyényi
Robert Tanislav