À propos du projet
Flowbite est une bibliothèque de composants UI open-source et un framework front-end construit sur Tailwind CSS. Son objectif est d'accélérer le développement de sites web en fournissant un ensemble de composants web prêts à l'emploi utilisant les classes utilitaires de Tailwind, permettant ainsi aux développeurs d'assembler des interfaces à partir de modèles existants plutôt que d'écrire chaque élément à partir de zéro.
**Installation et utilisation**
La bibliothèque peut être ajoutée comme plugin à un projet Tailwind CSS existant via npm (`npm install flowbite`). La configuration documentée importe les variables de thème Flowbite dans le fichier CSS principal, enregistre le plugin, configure les fichiers sources à l'intérieur de node_modules et charge le JavaScript groupé qui alimente les éléments interactifs. Plusieurs thèmes intégrés sont référencés dans le README, notamment les variantes default, minimal, enterprise, playful et mono, chacune étant associée à une police web spécifique. Une route CDN est également décrite pour ajouter rapidement le CSS et le JS minifiés à une page.
**Modèle d'interaction**
Les composants interactifs sont principalement pilotés par une interface d'attributs de données : des attributs tels que `data-modal-target` et `data-modal-toggle` relient les éléments déclencheurs aux composants sans script personnalisé, et la plupart des exemples de la documentation suivent cette stratégie. Pour plus de contrôle, une fonction `initFlowbite()` (ou des aides par catégorie comme `initDropdowns` et `initModals`) permet à des frameworks tels que Vue et Nuxt d'enregistrer eux-mêmes les écouteurs d'événements.
**API programmatiques et typées**
Le package expose les composants sous forme de classes JavaScript prenant en charge ESM et CJS. Un modal, par exemple, peut être instancié avec des options couvrant le placement, le comportement de l'arrière-plan et des rappels (callbacks) comme `onShow`, `onHide` et `onToggle`. Des déclarations de types TypeScript sont fournies, incluant des interfaces telles que `ModalOptions` et `ModalInterface`, afin que les objets d'options et les instances puissent être typés.
**Catalogue de composants**
Le README liste une large gamme de composants, parmi lesquels des alertes, badges, fils d'Ariane, boutons et groupes de boutons, cartes, menus déroulants, formulaires, groupes de listes, typographie, modals, onglets, barres de navigation, pagination, timelines, barres de progression, tableaux, toasts, tooltips, sélecteurs de date, spinners, pieds de page, accordéons, barres latérales, carrousels, avatars, évaluations et une variété d'entrées de formulaire (champ de saisie, saisie de fichier, saisie de recherche, select, textarea, case à cocher, radio, toggle, curseur de plage).
**Support des frameworks et plateformes**
Les composants UI Flowbite disposent d'un support RTL natif, activé via l'attribut `dir="rtl"`. Des bibliothèques autonomes maintenues par la communauté existent pour React, Vue, Svelte, Angular et Qwik. Des guides d'intégration sont également liés pour des frameworks tels que Next.js, Remix, Nuxt, Astro, MeteorJS, Gatsby, SolidJS et Qwik, ainsi que pour des frameworks back-end incluant Laravel, Symfony, Ruby on Rails 7, Phoenix (Elixir), Django et Flask, puisque la bibliothèque repose sur le JavaScript vanilla.
**Ressources connexes**
Le projet renvoie vers des ressources supplémentaires autour du même écosystème : un système de design Figma, des sections préfabriquées "Flowbite Blocks", un ensemble d'icônes et un assistant GPT. Une version Pro commerciale est proposée parallèlement au package open-source, et le dépôt renvoie vers des canaux communautaires tels que Discord et des badges de téléchargement/version npm. La licence est indiquée comme étant MIT.
Comments
0 Rating appears after 10 ratings
Sign in to join the discussion.