flowbite astro admin dashboard
1.0.0
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.
| 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 |
|---|---|---|
Les composants interactifs tels que les barres de navigation, les modaux, les tiroirs et les info-bulles sont tous basés sur la populaire bibliothèque de composants open source 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 :
package.json : pnpm install
# or
npm install
# or
yarnPNPM est le gestionnaire de paquets de choix à titre d’illustration, mais vous pouvez utiliser ce que vous voulez.
localhost:2121 en exécutant la commande suivante : pnpm run dev Vous pouvez également créer le projet et récupérer les fichiers de distribution dans le dossier dist/ en exécutant :
pnpm run buildEnsuite, vous pouvez prévisualiser le build généré avec un serveur Web local :
pnpm run previewPour le déploiement, consultez le workflow GitHub, où vous pouvez connecter votre cible (préconfigurée pour les pages GitHub). Voir docs.astro.build/en/guides/deploy
Le site Web est configuré pour un déploiement statique, mais vous pouvez le basculer vers le rendu côté serveur en décommentant simplement output: "server" dans le ./astro.config.mjs .
Après avoir cloné ce référentiel, vous trouverez la structure (simplifiée) suivante :
?
├── ? data
│ └── ** / * .json # Satic data sources for REST etc.
│
└── src
│
├── ? app
│ └── ** / * .astro # Application-wide components
│
├── ? assets
│ └── ** / * .{svg,…} # Transformable assets
│
├── ? components
│ └── ** / * .astro # Simple, atomic UI elements
│
├── lib
│ └── ** / * .ts # Utilities (Databases, APIs…)
│
├── ? modules
│ └── ** / * .astro # Complex views made of elements
│
├── ? pages
│ ├── ** / * .astro # File-based client routes
│ │
│ └── api
│ └── [...entities].ts # Catch-all endpoint for CRUD ops.
│
├── services
│ └── * .ts # Server-side CRUD operations
│
└── ? types
└── * .ts # Data entities typings
Des efforts ont été déployés pour accélérer l'intégration et l'expérience des développeurs .
Ce projet est livré avec une prise en charge étendue de TypeScript, Astro, Tailwind et VS Code.
Il est configuré avec des paramètres par défaut raisonnables, quelques opinions et quelques astuces pour que tout fonctionne bien ensemble.
astro-eslint-parser + eslint-plugin-astroprettier-plugin-astro (fourni avec astro )N'hésitez pas à modifier ces paramètres pour répondre à vos propres besoins.
À l'heure actuelle, notre objectif est officiellement de prendre en charge les deux dernières versions des navigateurs suivants :
Aperçu en direct : https://themesberg.github.io/flowbite-astro-admin-dashboard/
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
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 :
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.
