# Système de design Flowbite ## Aperçu de l’interface du système de design Flowbite Développez trois catégories de préparation, cochez les fournitures et rédigez une note locale dans le panneau latéral natif. ## 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 | Nom / règle | Valeur / configuration | Utilisation | | --- | --- | --- | | --color-body | var(--color-gray-600) | Texte explicatif standard. | | --color-body-subtle | var(--color-gray-500) | Descriptions complémentaires. | | --color-heading | var(--color-gray-900) | Titres et libellés fortement mis en évidence. | | --color-fg-brand | var(--color-blue-700) | Texte de marque. | | --color-fg-success | var(--color-emerald-700) | Texte de réussite. | | --color-fg-danger | var(--color-rose-700) | Texte d’erreur. | | --color-fg-warning | var(--color-orange-900) | Texte d’avertissement. | | --color-fg-disabled | var(--color-gray-400) | Texte désactivé. | ### Surfaces et bordures par défaut | Nom / règle | Valeur / configuration | Utilisation | | --- | --- | --- | | --color-neutral-primary | var(--color-white) | Surface des cartes et du panneau latéral. | | --color-neutral-secondary | var(--color-gray-50) | Arrière-plan de la page. | | --color-neutral-tertiary | var(--color-gray-100) | Piste de progression. | | --color-brand | var(--color-blue-700) | Action principale et progression des éléments préparés. | | --color-brand-soft | var(--color-blue-100) | Anneau de focus ou surface de marque discrète. | | --color-brand-softer | var(--color-blue-50) | Surface de l’accordéon ouvert et de l’illustration. | | --color-brand-strong | var(--color-blue-800) | Survol d’une action. | | --color-default | var(--color-gray-200) | Bordure standard des composants. | | --color-success-soft | var(--color-emerald-50) | Surface du résultat local. | ### Variables de géométrie et de police par défaut | Nom / règle | Valeur / configuration | Utilisation | | --- | --- | --- | | --font-sans | 'Inter', 'ui-sans-serif', 'system-ui', '-apple-system', 'system-ui', 'Segoe UI', 'Roboto', 'Helvetica Neue', 'Arial', 'Noto Sans', 'sans-serif', 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji' | Pile de polices d’interface privilégiant Inter ; l’aperçu utilise une police système de remplacement disponible, sans police distante. | | --font-mono | 'ui-monospace', 'SFMono-Regular', 'Menlo', 'Monaco', 'Consolas', 'Liberation Mono', 'Courier New', 'monospace' | Pile de polices pour le code. | | --radius-xxs | 2px | Rayon de deux pixels. | | --radius-xs | 4px | Rayon de quatre pixels. | | --radius-sm | 6px | Rayon de six pixels. | | --radius | 8px | Rayon de huit pixels. | | --radius-base | 12px | Rayon de douze pixels pour les panneaux, utilisé par rounded-base. | | --radius-lg | 16px | Rayon de seize pixels. | | --default-border-width | 1px | Bordures d’un pixel. | | --leading-5 | 20px | Interligne de vingt pixels. | | --leading-6 | 24px | Interligne de vingt-quatre pixels. | ### Valeurs de mise en page Tailwind utilisées dans l’exemple | Nom / règle | Valeur / configuration | Utilisation | | --- | --- | --- | | p-6 / md:p-10 | 1.5rem / 2.5rem | Marge intérieure de la page basée sur l’unité d’espacement par défaut d’un quart de rem de Tailwind. | | gap-8 | 2rem | Espacement entre les catégories de préparation et le récapitulatif de progression. | | md breakpoint | 48rem | Passage à deux colonnes. | | text-sm / text-xl / text-3xl | 0.875rem / 1.25rem / 1.875rem | Utilitaires pour le corps de texte, le titre de section et le titre de page. | | w-96 / max-w-full | 24rem / 100% | La largeur du panneau latéral reste adaptée à la zone d’affichage mobile. | ## Guide complet du système de design Flowbite Un guide pratique pour choisir, appliquer et évaluer ce système dans une interface réelle. Des conseils complets, un point de départ pour la mise en œuvre et des liens vers les sources. ## 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. Consultez la spécification associée ## 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. Consultez la spécification associée ## 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. Consultez la spécification associée ## 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. 1. Ouvrez Papier et cochez Feuilles à dessin emballées. 2. Ouvrez Outils, cochez Crayons et marqueurs emballés, puis revenez à Papier. 3. Vérifiez que les deux choix restent sélectionnés et que le récapitulatif indique deux éléments sur six. Consultez la spécification associée ## 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. Consultez la spécification associé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é. Consultez la spécification associée ## 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. Consultez la spécification associée ## 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. Consultez la spécification associée ## 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. Consultez la spécification associée ## Exemples de composants du système de design Flowbite ### Balisage du guide de préparation et du tiroir Classes de thème sémantiques, véritables cases à cocher et panneaux d’accordéon associés. ```

FLOWBITE · FIELD GUIDE

Pack for a day of making.

A workshop packing guide with grouped instructions and a local materials note.

Choose stocks before the session. Keep one sheet untouched as a reference.

``` Référence du code - 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. ``` 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(); ``` Référence du code - Une instance Accordion contrôle les trois catégories. - Les rappels du cycle de vie du tiroir rendent l’arrière-plan inerte et rétablissent le focus. - Le cycle du focus est un ajout explicite à l’application. ### Illustration originale de préparation et éléments complémentaires de CSS Détails de mise en page de l’application autour des utilitaires natifs. ``` body{margin:0;background:var(--color-neutral-secondary);font-family:var(--font-sans)}.category-trigger{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:20px;width:100%;text-align:left;font-size:15px;font-weight:600;border-bottom:1px solid var(--color-default)}.category-trigger b{font-size:11px;opacity:.6;margin-right:12px}.category-trigger:focus-visible{outline:3px solid var(--color-brand);outline-offset:-3px}.category-body{padding:20px;background:var(--color-neutral-primary);font-size:14px;line-height:1.7;border-bottom:1px solid var(--color-default)}.category-body p{margin-bottom:20px}.category-body label{display:flex;align-items:flex-start;gap:12px;margin:16px 0;cursor:pointer}.category-body small{display:block;font-size:12px;color:var(--color-body-subtle);margin-top:4px}.check{width:18px;height:18px;border:1px solid var(--color-default);border-radius:4px;margin-top:3px;color:var(--color-brand)}.kit-art{height:160px;background:var(--color-brand-softer);border-radius:var(--radius-base);position:relative;overflow:hidden}.kit-art i{position:absolute;width:110px;height:95px;background:#fff;border:1px solid var(--color-brand-medium);top:35px;left:20%;transform:rotate(-12deg)}.kit-art i:nth-child(2){left:35%;transform:rotate(10deg);background:var(--color-brand-soft)}.kit-art i:nth-child(3){width:8px;height:120px;left:70%;top:20px;transform:rotate(25deg);background:var(--color-brand)}.kit-art em{position:absolute;width:95px;height:22px;background:var(--color-brand-medium);bottom:20px;left:20%;transform:rotate(-20deg)}[hidden]{display:none!important}button{cursor:pointer}button:focus-visible{outline:3px solid var(--color-brand);outline-offset:3px}@media(max-width:600px){.category-trigger,.category-body{padding:16px}} ``` Référence du code - La géométrie du papier, du crayon et de la règle forme une décoration originale de CSS. ### Document index.html complet À utiliser avec la compilation de la feuille de style et le code d’interaction complet fournis ci-dessus. ``` Flowbite specimen

FLOWBITE · FIELD GUIDE

Pack for a day of making.

A workshop packing guide with grouped instructions and a local materials note.

Choose stocks before the session. Keep one sheet untouched as a reference.

``` Référence du code - 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. ## 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. ``` /* npm install flowbite@4.0.2 */ /* npm install -D tailwindcss@4.3.3 @tailwindcss/cli@4.3.3 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 ``` 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. ``` ## 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. - Dépôt officiel Configuration et composants de la version quatre API. - Source du thème par défaut Alias sémantiques et géométrie réels. - Implémentation d’Accordion Options de l’instance et mises à jour de aria-expanded. - Implémentation de Drawer Visibilité, arrière-plan et méthodes de cycle de vie. - Guide d’Accordion Référence officielle de composition. - Guide de Drawer Documentation officielle des superpositions API. - Thème Tailwind Utilitaires d’espacement et de typographie primitifs. ## Ressources associées au système de design Flowbite ### Fomantic UI Une étagère de lecture native Fomantic UI, avec des valeurs de thème compilées et vérifiées, les modules jQuery de menu déroulant et de notation, une prise en charge explicite du clavier et une liste de lecture locale persistante. ### Foundation Un espace de vérification fonctionnel Foundation, utilisant XY Grid, les validateurs personnalisés d’Abide, la confirmation Reveal, les paramètres Sass réels et un code d’intégration locale complet. ### Framework7 Un carnet de croquis natif Framework7 avec de véritables actions swipeout, les valeurs explicites du thème iOS, une commande d’action accessible au clavier et une liste filtrée qui conserve les études terminées jusqu’à la réinitialisation. - [Référence de mise en œuvre](https://flowbite.com/docs/components/accordion/) - [Source](https://github.com/themesberg/flowbite/blob/main/src/themes/default.css) - [Source](https://tailwindcss.com/docs/theme) - [Consultez la spécification associée](https://flowbite.com/docs/getting-started/quickstart/) - [Consultez la spécification associée](https://flowbite.com/docs/components/accordion/) - [Consultez la spécification associée](https://flowbite.com/docs/forms/checkbox/) - [Consultez la spécification associée](https://flowbite.com/docs/components/drawer/) - [Consultez la spécification associée](https://flowbite.com/docs/forms/input-field/) - [Consultez la spécification associée](https://flowbite.com/docs/getting-started/javascript/) - [Référence du code](https://flowbite.com/docs/components/accordion/) - [Référence du code](https://flowbite.com/docs/components/drawer/) - [Référence du code](https://flowbite.com/docs/customize/colors/) - [Référence du code](https://flowbite.com/) - [Dépôt officiel Configuration et composants de la version quatre API.](https://github.com/themesberg/flowbite) - [Source du thème par défaut Alias sémantiques et géométrie réels.](https://github.com/themesberg/flowbite/blob/main/src/themes/default.css) - [Implémentation d’Accordion Options de l’instance et mises à jour de aria-expanded.](https://github.com/themesberg/flowbite/blob/main/src/components/accordion/index.ts) - [Implémentation de Drawer Visibilité, arrière-plan et méthodes de cycle de vie.](https://github.com/themesberg/flowbite/blob/main/src/components/drawer/index.ts) - [Guide d’Accordion Référence officielle de composition.](https://flowbite.com/docs/components/accordion/) - [Guide de Drawer Documentation officielle des superpositions API.](https://flowbite.com/docs/components/drawer/) - [Thème Tailwind Utilitaires d’espacement et de typographie primitifs.](https://tailwindcss.com/docs/theme)