Eine native Flowbite-4-Zusammensetzung aus Akkordeon und Drawer mit geprüften semantischen Theme-Aliasen, einer dauerhaft eingeblendeten Packliste und einem barrierefreien lokalen Workflow für Materialnotizen.
Flowbite 4.0.2 Accordion- und Drawer-Klassen, Standard-Theme und Tailwind CSS 4.3.3. · Implementierungsreferenz
02
Flowbite Designsystem-Referenz
Standard-Theme von Flowbite 4.0.2 mit Tailwind CSS 4.3.3. Die unten aufgeführten Aliase sind tatsächliche Flowbite-Theme-Variablen; die referenzierten Farbskalen stammen von Tailwind. Die Pack-Illustration und die Abstandsentscheidungen der Anwendung sind eigens dafür entwickelt.
Standardrollen für semantische Text- und Statusfarben
Flowbite-Designsystem 4 erhält ein benanntes Standard-Theme
Flowbite Four ergänzt ein benanntes Standard-Theme
Dieses Beispiel verwendet Flowbite 4.0.2 und keine unversionierte Sammlung älterer blau-grauer Codefragmente. Das Standard-Theme definiert semantische Aliase wie color-body, color-heading, color-brand und color-neutral-primary. Die Seite bindet dieses Theme ein, bevor sie das Flowbite-Tailwind-Plugin anwendet, und verwendet anschließend entsprechende Klassen wie text-heading und bg-brand.
Die Aliase verweisen auf Tailwinds Farbskalen. So verweist die normale Markenaktion beispielsweise auf blue-700, während für den stärker hervorgehobenen Hover-Zustand blue-800 verwendet wird. Die Spezifikation hält diese Verweise fest, damit sich die semantische Rolle von einem primitiven Farbwert unterscheiden lässt. Die Pack-Illustration greift dieselben Markenrollen auf, ohne eine offizielle Illustration von Flowbite zu sein.
Geometrie des Flowbite-Designsystems und Tailwind-Layout greifen ineinander
Theme-Geometrie und Tailwind-Layout arbeiten zusammen
Der Wert radius-base des Standard-Themes beträgt zwölf Pixel. Er wird von rounded-base für die Hauptcontainer, Drawer-Steuerelemente und den Ergebnishinweis verwendet. Außerdem definiert das Theme separate Radien von zwei, vier, sechs, acht und sechzehn Pixeln. Das Theme muss daher eingebunden werden, wenn eine kopierte Komponente die neueren semantischen Klassennamen verwendet.
Inter steht am Anfang des bereitgestellten Schriftstapels, doch diese eigenständige Vorschau lädt keine externe Schriftart herunter. Stattdessen verwendet sie die verfügbare System-Fallback-Schriftart. Die Seitenabstände folgen Tailwind-Utility-Klassen: p-6 entspricht eineinhalb Rem, gap-8 entspricht zwei Rem und das Desktop-p-10 zweieinhalb Rem. Diese Layout-Utilities werden nicht als separate, eigens erfundene Flowbite-Abstandsskala dargestellt.
Eine Akkordeon-Instanz im Flowbite-Designsystem verwaltet drei Kategorien
Eine Accordion-Instanz verwaltet drei Kategorien
JavaScript erstellt ein Accordion aus einem Array von Elementen. Jedes Element hat eine stabile ID, ein Trigger-Element und ein Zielpanel; die Kategorie Papier ist anfangs geöffnet. alwaysOpen ist auf false gesetzt, sodass beim Öffnen von Werkzeuge die Kategorie Papier geschlossen wird. Für activeClasses und inactiveClasses werden semantische Vordergrund- und Oberflächenbezeichnungen aus dem Standard-Theme verwendet.
Die Klasse steuert die Sichtbarkeit des Panels und aktualisiert aria-expanded am Trigger. Das Markup enthält aria-controls und dazu passende Panel-IDs. Die Kontrollkästchen der Checkliste bleiben im Dokument, wenn ein Panel eingeklappt ist, sodass ihr Auswahlstatus beim Wechsel zwischen Kategorien erhalten bleibt. Ein Abschnitt wird durch das Einklappen lediglich ausgeblendet; die Packarbeit der Benutzerinnen und Benutzer wird dadurch nicht zurückgesetzt.
Der Fortschritt im Flowbite-Designsystem wird aus den tatsächlichen Kontrollkästchen abgeleitet
Der Fortschritt wird anhand der tatsächlich markierten Kontrollkästchen ermittelt
Sechs echte Kontrollkästchen stehen für bestimmte Workshop-Materialien. Die Anwendung leitet die Anzahl der eingepackten Materialien, den nächsten Eintrag und den Text zu den verbleibenden Einträgen aus dem aktuellen checked-Status ab. Breite und aria-valuenow der Fortschrittsleiste werden anhand derselben Anzahl aktualisiert. So kann kein separater Zähler von der Checkliste abweichen.
Zeichenpapier und Transparentpapier sind getrennte Optionen, da sie unterschiedlich vorbereitet werden. Die Schneidematte ist für eine gemeinsam genutzte Arbeitsstation gedacht; beim schwach haftenden Klebeband wird auf die Wandoberfläche hingewiesen. Durch solche konkreten Angaben ist die geöffnete Kategorie hilfreich – das Akkordeon verbirgt nicht einfach nur wiederholte, allgemeine Absätze.
Öffne Papier und markiere Zeichenpapier als eingepackt.
Öffne Werkzeuge, markiere Bleistifte und Marker als eingepackt und kehre dann zu Papier zurück.
Prüfe, ob beide Optionen weiterhin ausgewählt sind und die Übersicht zwei von sechs anzeigt.
Eine Drawer-Instanz im Flowbite-Designsystem verwaltet Sichtbarkeit und Hintergrund
Eine Drawer-Instanz verwaltet Sichtbarkeit und Backdrop
Das Materialpanel wird mit new Drawer initialisiert. Dabei werden placement auf right, backdrop auf true und bodyScrolling auf false gesetzt. Beim Öffnen des Panels wird show aufgerufen, beim Schließen hide. Die native Implementierung von Flowbite wendet die Positions- und Übergangsklassen, den Hintergrund und die Sichtbarkeitsattribute an. Auf dieser Seite wird bewusst der JavaScript API verwendet, statt für dasselbe Panel einen zweiten Initialisierer mit Datenattributen hinzuzufügen.
Der Drawer ist vierundzwanzig Rem breit und hat max-w-full, sodass er auch in einem schmalen Ansichtsfenster gut nutzbar bleibt. Sein Inhalt kann im Panel vertikal gescrollt werden. Die Höhe der Seite richtet sich nach ihrem Inhalt; h-screen des Drawers ist eine bewusst feste Überlagerung und erzeugt für die eingebettete Seite keine Schleife mit einer Mindesthöhe.
Fokusverwaltung im Lebenszyklus des Drawers im Flowbite-Designsystem ergänzen
Füge während des Drawer-Lebenszyklus ein Fokusmanagement hinzu
Der Callback onShow macht das Hintergrund-Element main inert und setzt den Fokus auf das Eingabefeld Prepared by. onHide entfernt inert und setzt den Fokus zurück auf Prepare materials note. Ein kleiner keydown-Handler wechselt den Fokus mit Tab und Shift+Tab zwischen dem ersten und letzten Steuerelement des Panels. Diese Ergänzungen sind im vollständigen Quelltext zu sehen und werden nicht einfach einer Gestaltungsklasse zugeschrieben.
Flowbite behandelt die Escape-Taste für sein Drawer. Die Callbacks des Beispiels stellen sicher, dass der Hintergrund unabhängig davon, welcher Schließweg verwendet wird, wieder bedienbar ist. Das Panel ist über aria-labelledby beschriftet; das Steuerelement zum Schließen hat einen expliziten zugänglichen Namen. Eine reale Anwendung sollte dieses Verhalten zusammen mit ihren eigenen Portalen und Routing-Abläufen testen und den Bibliotheksnamen nicht als pauschale Garantie für Barrierefreiheit betrachten.
Flowbite-Designsystem: Verantwortliche Person prüfen und nur lokalen Text speichern
Validiere den Zuständigen und speichere nur lokalen Text
Die Angabe „Vorbereitet von“ ist erforderlich und muss eine Mindest- und Höchstlänge einhalten. Der Submit-Handler entfernt zusätzlich Leerzeichen am Anfang und Ende des Namens und weist Eingaben zurück, die nur aus Leerzeichen bestehen. Die Sitzungsnotiz ist optional und auf 240 Zeichen begrenzt. Die Zusammenfassung der verbleibenden Elemente wird beim Öffnen des Drawers aktualisiert, damit sie die aktuelle Checkliste und nicht einen früheren Packstand beschreibt.
Beim Speichern wird der Drawer geschlossen und eine lokale Notiz mit der verantwortlichen Person, der Anzahl der gepackten Elemente und dem optionalen Text angekündigt. Es wird keine E-Mail versendet und kein gemeinsames Dokument erstellt. Nutzereingaben werden mit textContent zugewiesen. Beim Bearbeiten der Packliste wird die vorherige Ergebnismeldung gelöscht, da deren frühere Anzahl sonst irreführend wäre.
Flowbite-Designsystem: Von der JavaScript-Bibliothek generierte Klassen einbinden
Binde die von der JavaScript-Bibliothek generierten Klassen ein
Die Tailwind-Eingabedatei importiert das Standard-Theme von Flowbite und bindet flowbite/plugin ein. Explizite Quellverzeichnis-Direktiven decken HTML, das Anwendungsmodul und die ESM-Bibliothek von Flowbite ab. Letzteres ist wichtig: Klassen, die die Bibliothek zur Laufzeit hinzufügt, müssen im generierten Stylesheet enthalten sein, auch wenn sie nicht direkt in HTML stehen.
Das Bundle importiert Accordion und Drawer aus flowbite. Das Beispiel initialisiert jede Instanz einmal, nachdem das zugehörige Markup vorhanden ist. Framework-Anwendungen, die Ansichten ein- und aushängen, sollten die Einrichtung an den Lebenszyklus koppeln und Instanzen bereinigen, um doppelte Listener zu vermeiden. Die lokale Seite wird nur einmal eingebunden und verwendet keine clientseitigen Routenwechsel.
Flowbite-Designsystem: Eine Packhilfe mit klar abgegrenzter Implementierung
Eine Packhilfe mit klar erkennbaren Grenzen der Implementierung
Der Feldleitfaden zeigt ein inhaltsreiches Akkordeon, einen dauerhaft gespeicherten Checkbox-Zustand und einen Ablauf mit Overlay. Er enthält weder erfundene Lagerbestände noch Ergebnisse einer Beschaffung über einen externen Dienst. Alle sechs Materialien sind beispielhafte Vorbereitungsaufgaben für einen Workshop; die gespeicherte Notiz bleibt für die Dauer des Seitenaufrufs im Arbeitsspeicher.
Das standardmäßige semantische Theme, die Komponentenklassen und das Verhalten von JavaScript stammen aus Flowbite; die Workshop-Inhalte, die Originalillustration und die zusätzliche Fokusverwaltung sind Anwendungscode. Durch diese Trennung können Leserinnen und Leser eine nützliche Gestaltung übernehmen und zugleich nachvollziehen, welche Aufgaben die Bibliothek tatsächlich abdeckt.
Verwende die zustandsbehaftete Instanz von Flowbite, um die Sichtbarkeit des Panels zu steuern.
Verwalte Checklistendaten und daraus abgeleiteten Fortschritt in der Anwendungslogik.
Wickle tatsächliche Einkäufe oder eine gemeinsame Datenspeicherung nur über eine ausdrücklich eingerichtete Backend-Integration ab.
Schaltflächen sind über aria-controls mit Panel-IDs verknüpft.
Der Drawer ist über seine Überschrift beschriftet.
Die Fortschrittsanzeige stellt dieselbe Anzahl bereit, die auch sehenden Nutzenden angezeigt wird.
Native Flowbite-Instanzen und lokaler Zustand
Initialisierung von Accordion/Drawer sowie anwendungsspezifische Checklisten- und Fokusverwaltung.
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();
Speichere die bereitgestellte Interaktion als main.js und kompiliere sie wie in der Einrichtung gezeigt zu bundle.js.
Viewport und natives Laden von Assets sind enthalten.
04
Flowbite-Designsystem: Einrichtung für AI Agents
Ausgangspunkt für die Implementierung
Getestet mit Flowbite 4.0.2 und Tailwind CSS 4.3.3. Passe den Quellpfad in node_modules an den tatsächlichen Speicherort von input.css an. Externe Schriftarten sind nicht erforderlich.
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. */
Ein Prompt für dein Projekt
Agenten-Prompt
Verwende den vollständigen Workshop-Packleitfaden für Flowbite 4.0.2, einschließlich der Tailwind-Quellerkennung und der nativen Initialisierung von Accordion und Drawer. Verknüpfe die gruppierten Materialien und den Checklistenstatus mit dem Leitfaden und prüfe die Angaben zur verantwortlichen Person, bevor du eine lokale Packnotiz speicherst. Bewahre den Tastaturfokus, die Behandlung des inaktiven Hintergrunds und das Schließverhalten des Drawers. Halte die originale Illustration CSS vom semantischen Theme der Bibliothek getrennt. Füge diesem lokalen Packablauf weder ein Service-Ticket noch eine externe Übermittlung hinzu.
05
Flowbite-Designsystem: Quellen und Umfang
Flowbite 4.0.2 mit dem Standard-Theme. Die Packinhalte, die dekorativen Grafiken und die zusätzliche Fokusverwaltung sind original. Materialnotizen bleiben lokal.
