# Flowbite-Designsystem ## Vorschau der Flowbite-Designsystem-Oberfläche Klappe drei Packkategorien auf, markiere Materialien und bereite eine lokale Notiz im nativen Drawer vor. ## 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 | Name / Regel | Wert / Konfiguration | Verwendung | | --- | --- | --- | | --color-body | var(--color-gray-600) | Normaler erklärender Text. | | --color-body-subtle | var(--color-gray-500) | Ergänzende Beschreibungen. | | --color-heading | var(--color-gray-900) | Überschriften und stark hervorgehobene Beschriftungen. | | --color-fg-brand | var(--color-blue-700) | Markenfarbener Vordergrund. | | --color-fg-success | var(--color-emerald-700) | Vordergrund für Erfolgsmeldungen. | | --color-fg-danger | var(--color-rose-700) | Vordergrund für Fehlermeldungen. | | --color-fg-warning | var(--color-orange-900) | Vordergrund für Warnmeldungen. | | --color-fg-disabled | var(--color-gray-400) | Vordergrund für deaktivierte Elemente. | ### Standardoberflächen und Rahmen | Name / Regel | Wert / Konfiguration | Verwendung | | --- | --- | --- | | --color-neutral-primary | var(--color-white) | Oberfläche für Karten und Drawer. | | --color-neutral-secondary | var(--color-gray-50) | Seitenhintergrund. | | --color-neutral-tertiary | var(--color-gray-100) | Fortschrittsleisten-Hintergrund. | | --color-brand | var(--color-blue-700) | Primäre Aktion und Packfortschritt. | | --color-brand-soft | var(--color-blue-100) | Fokusring oder dezente Markenoberfläche. | | --color-brand-softer | var(--color-blue-50) | Oberfläche für geöffnetes Akkordeon und Illustration. | | --color-brand-strong | var(--color-blue-800) | Hover-Zustand für Aktionen. | | --color-default | var(--color-gray-200) | Standardrahmen für Komponenten. | | --color-success-soft | var(--color-emerald-50) | Oberfläche für lokale Ergebnisse. | ### Standardvariablen für Geometrie und Schriftart | Name / Regel | Wert / Konfiguration | Verwendung | | --- | --- | --- | | --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' | UI-Schriftstapel mit Inter an erster Stelle; die Vorschau verwendet eine verfügbare System-Fallback-Schriftart und lädt keine externe Schriftart. | | --font-mono | 'ui-monospace', 'SFMono-Regular', 'Menlo', 'Monaco', 'Consolas', 'Liberation Mono', 'Courier New', 'monospace' | Schriftstapel für Code. | | --radius-xxs | 2px | Radius von zwei Pixeln. | | --radius-xs | 4px | Radius von vier Pixeln. | | --radius-sm | 6px | Radius von sechs Pixeln. | | --radius | 8px | Radius von acht Pixeln. | | --radius-base | 12px | Der Radius der abgerundeten Basis beträgt zwölf Pixel. | | --radius-lg | 16px | Radius von sechzehn Pixeln. | | --default-border-width | 1px | Rahmen von einem Pixel. | | --leading-5 | 20px | Zeilenhöhe von zwanzig Pixeln. | | --leading-6 | 24px | Zeilenhöhe von vierundzwanzig Pixeln. | ### Im Beispiel verwendete Tailwind-Layoutwerte | Name / Regel | Wert / Konfiguration | Verwendung | | --- | --- | --- | | p-6 / md:p-10 | 1.5rem / 2.5rem | Seitenabstand basierend auf Tailwinds standardmäßiger Abstandsgröße von einem Viertel Rem. | | gap-8 | 2rem | Abstand zwischen Packkategorien und Fortschrittsübersicht. | | md breakpoint | 48rem | Wechsel zu zwei Spalten. | | text-sm / text-xl / text-3xl | 0.875rem / 1.25rem / 1.875rem | Utility-Klassen für Fließtext, Abschnittsüberschrift und Seitenüberschrift. | | w-96 / max-w-full | 24rem / 100% | Die Drawer-Breite bleibt innerhalb des mobilen Ansichtsfensters. | ## Flowbite Designsystem: vollständiger Leitfaden Ein praktischer Leitfaden zur Auswahl, Anwendung und Überprüfung dieses Systems für ein echtes Interface. Umfassende Anleitung, Einstieg in die Implementierung und Links zu den Quellen. ## 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. Unterstützende Spezifikation lesen ## 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. Unterstützende Spezifikation lesen ## 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. Unterstützende Spezifikation lesen ## 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. 1. Öffne Papier und markiere Zeichenpapier als eingepackt. 2. Öffne Werkzeuge, markiere Bleistifte und Marker als eingepackt und kehre dann zu Papier zurück. 3. Prüfe, ob beide Optionen weiterhin ausgewählt sind und die Übersicht zwei von sechs anzeigt. Unterstützende Spezifikation lesen ## 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. Unterstützende Spezifikation lesen ## 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. Unterstützende Spezifikation lesen ## 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. Unterstützende Spezifikation lesen ## 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. Unterstützende Spezifikation lesen ## 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. Unterstützende Spezifikation lesen ## Flowbite-Designsystem: Komponentenbeispiele ### Packleitfaden und Drawer-Markup Semantische Theme-Klassen, echte Checkbox-Steuerelemente und verknüpfte Akkordeonbereiche. ```

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.

``` Code-Referenz - 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. ``` 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(); ``` Code-Referenz - Eine Accordion-Instanz steuert alle drei Kategorien. - Die Lifecycle-Callbacks des Drawers machen den Hintergrund inaktiv und stellen den Fokus wieder her. - Die Fokusfalle ist eine ausdrückliche Ergänzung der Anwendung. ### Originale Packillustration und unterstützendes CSS Details des Anwendungslayouts rund um native Hilfsklassen. ``` 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}} ``` Code-Referenz - Die Formen von Papier, Bleistift und Lineal sind eine originale dekorative CSS. ### Vollständiges index.html-Dokument Mit dem oben bereitgestellten Stylesheet-Build und dem vollständigen Interaktionsquelltext verwenden. ``` 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.

``` Code-Referenz - 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. ## 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. ``` /* 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. */ ``` ### Ein Prompt für dein Projekt ``` 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. ``` ## 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. - Offizielles Repository Einrichtung für Version 4 und Komponenten-API. - Quelle des Standard-Themes Tatsächliche semantische Zuordnungen und Geometrie. - Accordion-Implementierung Instanzoptionen und Aktualisierungen von aria-expanded. - Drawer-Implementierung Sichtbarkeit, Backdrop und Lifecycle-Methoden. - Accordion-Leitfaden Offizielle Referenz für die Gestaltung. - Drawer-Leitfaden Offizielles Overlay-API. - Tailwind-Theme Hilfsklassen für grundlegende Abstände und Typografie. ## Flowbite-Designsystem: Weiterführende Ressourcen ### Fomantic UI Ein natives Fomantic UI-Leseregal mit verifizierten kompilierten Theme-Werten, jQuery-Dropdown- und Bewertungsmodulen, ausdrücklicher Tastaturunterstützung und einer dauerhaft gespeicherten lokalen Merkliste. ### Foundation Ein funktionierender Foundation-Proof-Desk mit XY Grid, benutzerdefinierten Abidin-Validatoren, Reveal-Bestätigung, tatsächlichen Sass-Einstellungen und vollständigem lokalen Integrationscode. ### Framework7 Ein natives Skizzenbuch für Framework7 mit echten Swipeout-Aktionen, expliziten iOS-Theme-Werten, einer per Tastatur bedienbaren Schaltfläche zum Öffnen der Aktionen und einer gefilterten Liste, in der abgeschlossene Studien bis zum Zurücksetzen erhalten bleiben. - [Implementierungsreferenz](https://flowbite.com/docs/components/accordion/) - [Quelle](https://github.com/themesberg/flowbite/blob/main/src/themes/default.css) - [Quelle](https://tailwindcss.com/docs/theme) - [Unterstützende Spezifikation lesen](https://flowbite.com/docs/getting-started/quickstart/) - [Unterstützende Spezifikation lesen](https://flowbite.com/docs/components/accordion/) - [Unterstützende Spezifikation lesen](https://flowbite.com/docs/forms/checkbox/) - [Unterstützende Spezifikation lesen](https://flowbite.com/docs/components/drawer/) - [Unterstützende Spezifikation lesen](https://flowbite.com/docs/forms/input-field/) - [Unterstützende Spezifikation lesen](https://flowbite.com/docs/getting-started/javascript/) - [Code-Referenz](https://flowbite.com/docs/components/accordion/) - [Code-Referenz](https://flowbite.com/docs/components/drawer/) - [Code-Referenz](https://flowbite.com/docs/customize/colors/) - [Code-Referenz](https://flowbite.com/) - [Offizielles Repository Einrichtung für Version 4 und Komponenten-API.](https://github.com/themesberg/flowbite) - [Quelle des Standard-Themes Tatsächliche semantische Zuordnungen und Geometrie.](https://github.com/themesberg/flowbite/blob/main/src/themes/default.css) - [Accordion-Implementierung Instanzoptionen und Aktualisierungen von aria-expanded.](https://github.com/themesberg/flowbite/blob/main/src/components/accordion/index.ts) - [Drawer-Implementierung Sichtbarkeit, Backdrop und Lifecycle-Methoden.](https://github.com/themesberg/flowbite/blob/main/src/components/drawer/index.ts) - [Accordion-Leitfaden Offizielle Referenz für die Gestaltung.](https://flowbite.com/docs/components/accordion/) - [Drawer-Leitfaden Offizielles Overlay-API.](https://flowbite.com/docs/components/drawer/) - [Tailwind-Theme Hilfsklassen für grundlegende Abstände und Typografie.](https://tailwindcss.com/docs/theme)