Système de composants Tailwind · Nouvelle ressource
Système de design Flowbite.
Une composition native d’accordéon et de panneau coulissant Flowbite 4, avec des alias de thème sémantique vérifiés, une liste de préparation persistante et un parcours accessible de prise de notes sur les matériaux, enregistré localement.
Classes Accordion et Drawer de Flowbite 4.0.2, thème par défaut et Tailwind CSS 4.3.3. · Référence de mise en œuvre
02
Référence de conception du système de design Flowbite
Thème par défaut de Flowbite 4.0.2 avec Tailwind CSS 4.3.3. Les alias nommés ci-dessous sont de véritables variables de thème Flowbite ; les échelles de couleurs auxquelles ils renvoient proviennent de Tailwind. L’illustration de préparation et les choix d’espacement de l’application sont originaux.
Rôles sémantiques par défaut pour le texte et les états
Flowbite Four ajoute un thème par défaut nommé au système de design
Flowbite Four ajoute un thème par défaut nommé
Cet exemple utilise Flowbite 4.0.2, et non un ensemble non versionné d’anciens extraits bleu et gris. Son thème par défaut définit des alias sémantiques tels que color-body, color-heading, color-brand et color-neutral-primary. La page importe ce thème avant d’appliquer le plug-in Tailwind de Flowbite, puis utilise les classes correspondantes, comme text-heading et bg-brand.
Les alias renvoient aux échelles de couleurs de Tailwind. Par exemple, l’action de marque standard fait référence à blue-700, tandis que son état de survol renforcé fait référence à blue-800. La spécification conserve ces références pour distinguer le rôle sémantique d’une valeur de couleur primitive. L’illustration de préparation reprend les mêmes rôles de marque, sans pour autant devenir une illustration officielle de Flowbite.
Système de design Flowbite : la géométrie du thème et la mise en page Tailwind fonctionnent de concert
La géométrie du thème et la mise en page Tailwind fonctionnent de concert
Dans le thème par défaut, radius-base vaut douze pixels et rounded-base l’utilise pour les conteneurs principaux, les commandes du panneau latéral et l’avis de résultat. Le thème définit également des rayons distincts de deux, quatre, six, huit et seize pixels. Il est donc important d’importer le thème lorsqu’on copie un composant utilisant les nouveaux noms de classes sémantiques.
Inter est la première police de la pile fournie, mais cet aperçu autonome ne télécharge aucune police distante. Il utilise la police système de remplacement disponible. L’espacement de la page suit les utilitaires Tailwind : p-6 correspond à un rem et demi, gap-8 à deux rem et p-10 sur ordinateur à deux rem et demi. Ces utilitaires de mise en page ne sont pas présentés comme une échelle d’espacement distincte inventée pour Flowbite.
Système de design Flowbite : une instance d’accordéon gère trois catégories
Une instance d’accordéon gère trois catégories
JavaScript crée un Accordion à partir d’un tableau d’éléments. Chaque élément possède un identifiant stable, un élément déclencheur et un panneau cible ; la catégorie du papier est ouverte par défaut. alwaysOpen vaut false : l’ouverture de la catégorie Outils ferme donc celle du Papier. Les classes personnalisées activeClasses et inactiveClasses utilisent les noms sémantiques de texte et de surface du thème par défaut.
La classe contrôle la visibilité du panneau et met à jour aria-expanded sur son élément déclencheur. Le balisage définit aria-controls et des identifiants de panneau correspondants. Les cases à cocher restent dans le document lorsque le panneau est replié ; leur état reste donc inchangé lors du passage d’une catégorie à l’autre. Replier une section masque son contenu sans réinitialiser les préparatifs de l’utilisateur.
Système de design Flowbite : la progression est calculée à partir des cases réellement cochées
La progression est calculée à partir des cases réellement cochées
Six véritables cases à cocher représentent des fournitures précises pour l’atelier. L’application calcule le nombre d’éléments préparés, le prochain élément et le texte indiquant le nombre d’éléments restants à partir de leur état coché. La largeur de la barre de progression et aria-valuenow sont mis à jour à partir de ce même décompte ; aucun compteur distinct ne risque de diverger de la liste.
Les feuilles à dessin et le papier calque sont des choix distincts, car leur préparation diffère. Le tapis de découpe représente un poste partagé, et le ruban adhésif à faible adhérence est accompagné d’une mise en garde concernant les surfaces murales. Ces détails concrets rendent la catégorie développée utile ; l’accordéon ne sert pas simplement à masquer des paragraphes génériques répétitifs.
Ouvrez Papier et cochez Feuilles à dessin emballées.
Ouvrez Outils, cochez Crayons et marqueurs emballés, puis revenez à Papier.
Vérifiez que les deux choix restent sélectionnés et que le récapitulatif indique deux éléments sur six.
Système de design Flowbite : une instance de Drawer gère la visibilité et le voile de fond
Une instance de panneau latéral gère l’affichage et l’arrière-plan assombri
Le panneau des matériaux est initialisé avec new Drawer, avec les options placement right, backdrop true et bodyScrolling false. L’ouverture du panneau appelle show ; le bouton Fermer appelle hide. L’implémentation native de Flowbite applique les classes de positionnement et de transition, le voile de fond ainsi que les attributs de visibilité. Cette page utilise délibérément JavaScript API, au lieu de le combiner avec un deuxième initialiseur utilisant des attributs de données pour le même panneau.
La largeur du tiroir est de vingt-quatre rem et sa classe max-w-full lui permet de rester utilisable dans une fenêtre étroite. Son contenu peut défiler verticalement à l’intérieur du panneau. La hauteur de la page est déterminée par son contenu ; la classe h-screen du tiroir crée intentionnellement un volet superposé fixe et n’entraîne pas de boucle de hauteur minimale pour la page intégrée.
Système de design Flowbite : ajouter la gestion du focus au cycle de vie du tiroir
Gérer le focus tout au long du cycle de vie du panneau latéral
Le rappel onShow rend l’élément principal d’arrière-plan inerte et place le focus sur le champ Préparé par. onHide retire l’attribut inert et redonne le focus à la note Préparer les matériaux. Un petit gestionnaire keydown fait circuler la touche Tab et la combinaison Maj+Tab entre le premier et le dernier contrôle du panneau. Ces ajouts figurent dans le code source complet ; on ne suppose pas qu’ils sont fournis par une classe de style.
Flowbite gère la touche Échap pour son tiroir. Les rappels de l’exemple garantissent que, quelle que soit la méthode de fermeture utilisée, l’arrière-plan redevient interactif. Le panneau est associé à aria-labelledby ; le bouton de fermeture possède un nom accessible explicite. Dans une application réelle, ce comportement doit être testé avec les portails et le routage utilisés, sans considérer le nom d’une bibliothèque comme une garantie générale d’accessibilité.
Système de design Flowbite : valider le nom du responsable et n’enregistrer que du texte local
Valider le propriétaire et enregistrer uniquement le texte local
Le champ Préparé par est obligatoire et soumis à des contraintes de longueur minimale et maximale. Le gestionnaire d’envoi supprime également les espaces superflus du nom et rejette les saisies ne contenant que des espaces. La note de session est facultative et limitée à 240 caractères. Le récapitulatif des éléments restants est actualisé à l’ouverture du tiroir afin de refléter l’état actuel de la liste, plutôt qu’un état antérieur de la préparation.
L’enregistrement ferme le tiroir et affiche une note locale contenant le nom du responsable, le nombre d’éléments emballés et le texte facultatif. Aucun courriel n’est envoyé et aucun document partagé n’est créé. Les chaînes saisies par l’utilisateur sont affectées à textContent. Toute modification de la liste de préparation efface l’ancien message de résultat, qui afficherait sinon un décompte trompeur.
Système de design Flowbite : inclure les classes générées par la bibliothèque JavaScript
Inclure les classes générées par la bibliothèque JavaScript
Le fichier d’entrée Tailwind importe le thème par défaut de Flowbite et enregistre flowbite/plugin. Des directives source explicites couvrent le fichier HTML, le module de l’application et la bibliothèque ESM de Flowbite. Cette dernière source est importante : les classes ajoutées à l’exécution par la bibliothèque doivent figurer dans la feuille de style générée, même si elles n’étaient pas écrites directement dans le fichier HTML initial.
Le bundle importe Accordion et Drawer depuis flowbite. L’exemple fourni initialise chaque instance une seule fois, une fois le balisage en place. Dans les applications utilisant un framework, les vues qui sont montées et démontées doivent associer la configuration du cycle de vie au nettoyage des instances afin d’éviter les écouteurs en double. Cette page locale n’est montée qu’une fois et ne comporte pas de transitions côté client entre les routes.
Système de design Flowbite : une aide à la préparation aux limites d’implémentation clairement établies
Un aide-mémoire pour préparer ses affaires, avec des limites d’implémentation clairement définies
Ce guide pratique présente un accordéon riche en contenu, l’état persistant des cases à cocher et un flux de travail avec volet superposé. Il ne contient ni données de stock inventées ni résultat d’approvisionnement à distance. Les six matériaux sont des tâches d’exemple pour préparer un atelier, et la note enregistrée reste en mémoire pendant toute la durée de la page.
Le thème sémantique par défaut, les classes des composants et le comportement de JavaScript proviennent de Flowbite ; le contenu de l’atelier, l’illustration originale et l’ajout de gestion du focus relèvent du code de l’application. Cette distinction permet de reprendre une composition utile tout en comprenant les responsabilités réellement prises en charge par la bibliothèque.
Utilisez l’instance avec état de Flowbite pour gérer la visibilité du panneau.
Gérez les données de la liste et la progression calculée dans la logique de l’application.
Ne gérez les achats réels ou la persistance partagée qu’au moyen d’une intégration explicite avec un backend.
Les boutons sont reliés aux identifiants des panneaux par aria-controls.
Le tiroir est associé à son titre.
La barre de progression expose le même décompte que celui présenté visuellement.
Instances natives de Flowbite et état local
Initialisation d’Accordion/Drawer, liste de préparation propre à l’application et gestion du focus.
javascript
import {Accordion,Drawer} from 'flowbite';
const q=s=>document.querySelector(s),drawerEl=q('#materials-drawer'),page=q('#page');
const accordion=new Accordion(q('#packing-accordion'),['paper','tools','space'].map((id,i)=>({id,triggerEl:q(`#${id}-trigger`),targetEl:q(`#${id}-panel`),active:i===0})),{alwaysOpen:false,activeClasses:'bg-brand-softer text-fg-brand',inactiveClasses:'bg-neutral-primary text-heading'});
const drawer=new Drawer(drawerEl,{placement:'right',backdrop:true,bodyScrolling:false,onShow(){page.inert=true;q('#owner').focus();},onHide(){page.inert=false;q('#open-note').focus();}});
const boxes=[...document.querySelectorAll('[data-item]')];
function refresh(){let packed=boxes.filter(x=>x.checked),left=boxes.filter(x=>!x.checked);q('#count').value=`${packed.length} of 6`;q('#bar').style.width=`${packed.length/6*100}%`;q('[role="progressbar"]').setAttribute('aria-valuenow',packed.length);q('#next-item').textContent=left.length?`Next: ${left[0].dataset.item}`:'Everything on the list is packed.';q('#remaining').textContent=left.length?`Still needed: ${left.map(x=>x.dataset.item).join(', ')}.`:'All six materials are packed.';q('#result').hidden=true;}
boxes.forEach(x=>x.addEventListener('change',refresh));q('#clear').onclick=()=>{boxes.forEach(x=>x.checked=false);refresh();};q('#open-note').onclick=()=>{refresh();drawer.show();};q('#close-note').onclick=()=>drawer.hide();drawerEl.addEventListener('keydown',e=>{if(e.key==='Tab'){let els=[...drawerEl.querySelectorAll('button,input,textarea')],first=els[0],last=els.at(-1);if(e.shiftKey&&document.activeElement===first){e.preventDefault();last.focus();}else if(!e.shiftKey&&document.activeElement===last){e.preventDefault();first.focus();}}});q('#note-form').onsubmit=e=>{e.preventDefault();const owner=q('#owner');if(owner.value.trim().length<2){owner.setCustomValidity('Enter at least two non-space characters.');owner.reportValidity();return;}drawer.hide();q('#result').hidden=false;q('#result').textContent=`Local note prepared by ${owner.value.trim()}: ${boxes.filter(x=>x.checked).length} of 6 items packed. ${q('#note').value.trim()||'No extra note.'}`;};q('#owner').oninput=()=>q('#owner').setCustomValidity('');refresh();
Enregistrez l’interaction fournie dans main.js et compilez-la en bundle.js comme indiqué dans les instructions de configuration.
La fenêtre d’affichage et le chargement natif des ressources sont inclus.
04
Configuration de l’agent IA du système de design Flowbite
Point de départ de l’implémentation
Versions vérifiées : Flowbite 4.0.2 et Tailwind CSS 4.3.3. Adaptez le chemin source node_modules à l’emplacement réel de input.css. Aucune police distante n’est nécessaire.
css
/* npm install [email protected] */
/* npm install -D [email protected] @tailwindcss/[email protected] esbuild */
/* input.css, next to body.html and main.js: */
@import "tailwindcss" source(none);
@import "flowbite/src/themes/default";
@plugin "flowbite/plugin";
@source "./body.html";
@source "./main.js";
@source "./node_modules/flowbite/lib/esm";
/* npx @tailwindcss/cli -i input.css -o output.css --minify */
/* npx esbuild main.js --bundle --format=iife --outfile=bundle.js */
/* index.html: link output.css then style.css; include the supplied markup. */
/* Load bundle.js with defer, or after the markup. */
Un prompt pour votre projet
Prompt pour l’agent IA
Utilisez le guide complet de préparation d’atelier Flowbite 4.0.2, avec la détection des sources Tailwind et l’initialisation native d’Accordion et de Drawer. Associez les matériaux regroupés et l’état de la liste de contrôle au guide, puis vérifiez les informations sur la personne responsable avant d’enregistrer une note locale sur la préparation. Préservez la gestion du focus clavier du tiroir, la mise en arrière-plan inerte et son comportement de fermeture. Gardez l’illustration d’origine CSS distincte du thème sémantique de la bibliothèque. N’ajoutez ni ticket de service ni envoi externe à ce processus local de préparation.
05
Sources et périmètre du système de design Flowbite
Flowbite 4.0.2 avec son thème par défaut. Le contenu sur la préparation, l’illustration décorative et l’amélioration de la gestion du focus sont d’origine. Les notes sur les matériaux restent locales.
