Una composizione nativa con accordion e drawer di Flowbite 4, con alias verificati per i temi semantici, una checklist di preparazione persistente e un flusso accessibile, eseguibile in locale, per annotare i materiali.
Riferimento di progettazione del sistema di progettazione sistema di design Flowbite
Tema predefinito di Flowbite 4.0.2 con Tailwind CSS 4.3.3. Gli alias con nome riportati di seguito sono variabili effettive del tema Flowbite; le scale a cui fanno riferimento provengono da Tailwind. L’illustrazione per preparare i bagagli e le scelte di spaziatura dell’applicazione sono originali.
Sistema di design Flowbite Four aggiunge un tema predefinito con nome al sistema di progettazione
Flowbite Four aggiunge un tema predefinito con nome
Questo esempio usa Flowbite 4.0.2, non una raccolta senza versione di vecchi frammenti blu e grigi. Il tema predefinito definisce alias semantici come color-body, color-heading, color-brand e color-neutral-primary. La pagina importa il tema prima di applicare il plugin Tailwind di Flowbite, quindi usa classi corrispondenti come text-heading e bg-brand.
Gli alias rimandano alle scale cromatiche di Tailwind. Per esempio, l’azione del brand standard fa riferimento a blue-700, mentre il ruolo di hover più marcato fa riferimento a blue-800. La specifica mantiene questi riferimenti, così chi legge può distinguere il ruolo semantico da un valore cromatico primitivo. L’illustrazione per preparare i bagagli riutilizza gli stessi ruoli del brand senza diventare un’illustrazione ufficiale di Flowbite.
Geometria del tema e layout Tailwind lavorano insieme nel sistema di progettazione sistema di design Flowbite
Geometria del tema e layout Tailwind lavorano insieme
Il tema predefinito imposta radius-base a dodici pixel, valore utilizzato da rounded-base nei contenitori principali, nei controlli del pannello a scomparsa e nell’avviso del risultato. Definisce anche raggi distinti di due, quattro, sei, otto e sedici pixel. Importare il tema è quindi importante quando un componente copiato utilizza i più recenti nomi di classi semantiche.
Inter è il primo font nello stack fornito, ma questa anteprima autonoma non scarica font remoti. Usa il fallback di sistema disponibile. La spaziatura della pagina segue le utilità Tailwind: p-6 equivale a un rem e mezzo, gap-8 a due rem e p-10 per desktop a due rem e mezzo. Queste utilità di layout non vengono presentate come una scala di spaziatura separata e inventata di Flowbite.
Una singola istanza di fisarmonica gestisce tre categorie nel sistema di progettazione sistema di design Flowbite
Una singola istanza di fisarmonica gestisce tre categorie
JavaScript crea una Accordion con un array di elementi. Ogni elemento ha un ID stabile, un elemento trigger e un pannello di destinazione; la categoria Carta è attiva all’avvio. alwaysOpen è false, quindi aprendo Attrezzi si chiude Carta. activeClasses e inactiveClasses personalizzate usano i nomi semantici di primo piano e superficie del tema predefinito.
La classe controlla la visibilità del pannello e aggiorna aria-expanded sul trigger. Il markup fornisce aria-controls e ID corrispondenti per i pannelli. Gli input della lista di controllo restano nel documento quando un pannello viene chiuso, quindi il loro stato selezionato viene mantenuto passando da una categoria all’altra. Chiudere una sezione ne modifica la visibilità, ma non azzera il lavoro svolto dall’utente per preparare i bagagli.
L’avanzamento deriva dalle caselle di controllo effettive nel sistema di progettazione sistema di design Flowbite
L’avanzamento deriva dalle caselle di controllo effettive
Sei caselle di controllo effettive rappresentano materiali specifici per il workshop. L’applicazione ricava il numero di oggetti preparati, il prossimo elemento e il testo sugli elementi rimanenti in base allo stato corrente delle caselle. La larghezza della barra di avanzamento e aria-valuenow si aggiornano in base allo stesso conteggio; non esiste un contatore separato che possa divergere dalla lista.
I fogli da disegno e la carta da ricalco sono opzioni separate perché richiedono preparazioni diverse. Il tappetino da taglio è indicato come postazione condivisa e il nastro a bassa adesività include un’avvertenza per le superfici murali. Questi dettagli concreti rendono utile la categoria espansa: la fisarmonica non si limita a nascondere paragrafi generici ripetitivi.
Apri Carta e seleziona Fogli da disegno come preparati.
Apri Attrezzi, seleziona Matite e pennarelli come preparati, quindi torna a Carta.
Verifica che entrambe le opzioni restino selezionate e che il riepilogo indichi due elementi su sei.
Un’istanza di pannello a scomparsa gestisce visibilità e sfondo nel sistema di progettazione sistema di design Flowbite
Un’istanza di pannello a scomparsa gestisce visibilità e sfondo
Il pannello dei materiali viene inizializzato con new Drawer e le opzioni placement right, backdrop true e bodyScrolling false. L’apertura del pannello chiama show; Chiudi chiama hide. L’implementazione nativa di Flowbite applica le classi di posizionamento e transizione, lo sfondo e gli attributi di visibilità. Questa pagina usa deliberatamente JavaScript API, senza combinarlo con un secondo inizializzatore basato su attributi data per lo stesso pannello.
La larghezza del pannello a scomparsa è di ventiquattro rem e max-w-full ne consente l’uso anche in una viewport stretta. Il contenuto può scorrere verticalmente all’interno del pannello. L’altezza della pagina è determinata dal contenuto; h-screen del pannello a scomparsa crea intenzionalmente un overlay fisso e non genera un ciclo di altezza minima per la pagina incorporata.
Gestisci il focus durante il ciclo di vita del pannello a scomparsa nel sistema di progettazione sistema di design Flowbite
Gestisci il focus durante il ciclo di vita del pannello a scomparsa
La callback onShow rende inerte l’elemento main sullo sfondo e porta il focus sull’input Preparato da. onHide rimuove inert e riporta il focus su Prepara la nota sui materiali. Un piccolo gestore keydown fa circolare Tab e Shift+Tab tra il primo e l’ultimo controllo del pannello. Queste aggiunte sono visibili nel sorgente completo: non si presume che siano fornite da una classe di stile.
Flowbite gestisce Escape per il pannello a scomparsa. Le callback dell’esempio assicurano che, qualunque sia il percorso di chiusura, lo sfondo torni interattivo. Il pannello è etichettato con aria-labelledby; il controllo di chiusura ha un nome accessibile esplicito. In un’applicazione reale, questo comportamento va verificato insieme ai propri portali e al routing: il nome di una libreria non garantisce da solo l’accessibilità.
Convalida il proprietario e salva solo testo locale nel sistema di progettazione sistema di design Flowbite
Convalida il proprietario e salva solo testo locale
Il campo Preparato da è obbligatorio e ha limiti di lunghezza minima e massima. Il gestore dell’invio rimuove inoltre gli spazi iniziali e finali dal nome e rifiuta gli input composti solo da spazi. La nota della sessione è facoltativa e limitata a 240 caratteri. Il riepilogo degli elementi rimanenti viene aggiornato all’apertura del pannello a scomparsa, così descrive la lista di controllo corrente e non uno stato precedente della preparazione.
Il salvataggio chiude il pannello a scomparsa e annuncia una nota locale che include il responsabile, il numero di oggetti preparati e il testo facoltativo. Non viene inviata alcuna e-mail né creato un documento condiviso. Le stringhe inserite dall’utente vengono assegnate con textContent. Quando si modifica la lista di controllo, il vecchio avviso del risultato viene cancellato, perché il conteggio precedente sarebbe altrimenti fuorviante.
Includi le classi generate dalla libreria JavaScript nel sistema di progettazione sistema di design Flowbite
Includi le classi generate dalla libreria JavaScript
L’input di Tailwind importa il tema predefinito di Flowbite e registra flowbite/plugin. Le direttive source esplicite includono HTML, il modulo dell’applicazione e la libreria ESM di Flowbite. Quest’ultima sorgente è importante: le classi aggiunte a runtime dalla libreria devono essere presenti nel foglio di stile generato anche quando non sono state scritte direttamente nell’HTML iniziale.
Il bundle importa Accordion e Drawer da flowbite. L'esempio fornito inizializza ciascuna istanza una sola volta, dopo che il relativo markup è presente. Le applicazioni basate su framework che montano e smontano le viste dovrebbero affiancare alla configurazione del ciclo di vita la pulizia delle istanze, per evitare listener duplicati. La pagina locale prevede un solo montaggio e nessuna transizione lato client tra le route.
Sistema di design Flowbite: sistema di progettazione, un kit per prepararsi con limiti di implementazione ben definiti
Uno strumento per preparare i bagagli, con limiti di implementazione ben definiti
La guida pratica mostra un accordion ricco di contenuti, uno stato persistente per le caselle di controllo e un flusso di lavoro con overlay. Non include dati di magazzino inventati né risultati di approvvigionamento remoti. Tutti e sei i materiali sono attività di preparazione esemplificative per un laboratorio; la nota salvata resta in memoria per tutta la durata della pagina.
Il tema semantico predefinito, le classi dei componenti e il comportamento di JavaScript provengono da Flowbite; i contenuti del laboratorio, l'illustrazione originale e il miglioramento della gestione dello stato attivo sono codice dell'applicazione. Questa separazione consente di riutilizzare una composizione utile, chiarendo quali responsabilità sono effettivamente coperte dalla libreria.
Usa l'istanza con stato di Flowbite per controllare la visibilità del pannello.
Gestisci i dati della checklist e i progressi calcolati nella logica dell'applicazione.
Gestisci gli acquisti reali o la persistenza condivisa solo tramite un'integrazione backend esplicita.
I pulsanti sono collegati agli ID dei pannelli tramite aria-controls.
Il drawer è etichettato tramite la relativa intestazione.
La progressbar espone lo stesso conteggio mostrato agli utenti vedenti.
Istanze native di Flowbite e stato locale
Inizializzazione di Accordion/Drawer, checklist specifica dell'applicazione e gestione dello stato attivo.
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();
Salva l'interazione fornita come main.js e compilala in bundle.js, come mostrato nella configurazione.
Sono inclusi il viewport e il caricamento nativo delle risorse.
04
Configurazione dell'agente AI per il sistema di progettazione sistema di design Flowbite
Punto di partenza per l’implementazione
Verificato con Flowbite 4.0.2 e Tailwind CSS 4.3.3. Adatta il percorso sorgente node_modules alla posizione effettiva di input.css. Non sono necessari font remoti.
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 per il tuo progetto
Prompt per l’agente
Usa la guida completa per preparare il kit del laboratorio, realizzata con Flowbite 4.0.2, inclusi il rilevamento delle sorgenti Tailwind e l'inizializzazione nativa di Accordion e Drawer. Collega i materiali raggruppati e lo stato della checklist alla guida e verifica i dati del responsabile prima di registrare una nota locale per il kit. Mantieni la gestione dello stato attivo da tastiera del drawer, l'inattivazione dello sfondo e il comportamento di chiusura. Tieni l'illustrazione originale CSS separata dal tema semantico della libreria. Non aggiungere ticket di assistenza né invii esterni a questo flusso di lavoro locale per preparare il kit.
05
Fonti e ambito del sistema di progettazione sistema di design Flowbite
Flowbite 4.0.2 con il tema predefinito. I contenuti per preparare il kit, le illustrazioni decorative e il miglioramento della gestione dello stato attivo sono originali. Le note sui materiali restano locali.
