Un pianificatore di sessioni nativo Preline con schede collegate, un plugin input-number con limiti, alias del tema installati, scale Tailwind reali e una stima locale dei materiali che si aggiorna in base alla sessione selezionata.
Preline 4.2.0 HSTabs e HSInputNumber con Tailwind CSS 4.3.3 e il tema predefinito incluso nel pacchetto. · Riferimento per l’implementazione
02
Sistema di design Preline UI Riferimento di progettazione del sistema di progettazione
Preline npm 4.2.0 con Tailwind CSS 4.3.3; tema predefinito del pacchetto installato. Il sito di marketing/documentazione può mostrare un banner relativo a una versione più recente, quindi l’esempio eseguibile è fissato esplicitamente a questa versione. Gli alias del tema restano alias; non vengono inventate conversioni in valori esadecimali.
Sistema di design Preline UI Sistema di progettazione Preline combina markup di utilità e plugin comportamentali
Preline combina markup di utilità e plugin comportamentali
Il pianificatore usa due plugin nativi di Preline: HSTabs seleziona un pannello di sessione e HSInputNumber gestisce i controlli di incremento e decremento con limiti. Le classi Tailwind definiscono la maggior parte dello stile visivo. L’illustrazione originale della sessione e il calcolo del budget appartengono all’applicazione, non a un ipotetico componente di prenotazione tutto in uno.
Questa distinzione è importante quando si copia l’esempio. Installare soltanto il pacchetto JavaScript non compila le classi di utilità né fornisce il markup dell’applicazione. Al contrario, copiare il HTML senza inizializzare i plugin lascia incompleto il comportamento delle schede e dei controlli numerici. L’integrazione completa qui sotto specifica esplicitamente ogni elemento.
Sistema di design Preline UI Sistema di progettazione: segui gli alias semantici fino ai rispettivi ruoli della palette
Segui gli alias semantici fino ai rispettivi ruoli della palette
Nel tema chiaro predefinito incluso nel pacchetto, --primary rimanda a --color-primary-600, il cui ramp primario sottostante è blu. Il colore del testo in primo piano associato a primary è bianco; hover, focus e active usano il ruolo settecento. La scheda selezionata e l’azione Save condividono questa famiglia tramite classi di utilità semantiche.
Le schede usano --card e --card-line, mentre il campo della quantità usa --layer e --layer-line. Mantenere separati questi ruoli rende più prevedibili le future modifiche al tema, invece di disseminare ovunque classi con valori letterali di bianco e grigio. La tabella conserva gli alias ufficiali, anziché presentare approssimazioni calcolate come token di origine.
Sistema di design Preline UI Sistema di progettazione: usa la scala reale di Tailwind e segnala le eccezioni originali
Usa la scala effettiva di Tailwind e indica le eccezioni originali
Il titolo della pagina e il totale stimato usano text-3xl, il titolo della sessione usa text-2xl e il testo dei moduli usa text-sm. La spaziatura interna delle schede p-5 equivale a 1.25rem con l’unità di spaziatura predefinita. Il margine interno della pagina più ampio, sm:p-8, entra in funzione al breakpoint small di Tailwind, pari a 640px, mentre la griglia originale passa a una sola colonna a 760px.
Il foglio di stile locale usa system-ui e non carica i font personalizzati opzionali indicati nel file del tema di Preline. A 280px, le schede si dispongono su due righe e la scheda del gruppo si sposta sotto la sessione. Sono scelte intenzionali di composizione dell’applicazione, non un’affermazione secondo cui tutti i layout Preline abbiano questa geometria.
Sistema di design Preline UI Sistema di progettazione: mantieni i controlli delle schede e i pannelli collegati tramite ID stabili
Mantieni i controlli delle schede e i pannelli collegati tramite ID stabili
Ogni scheda usa data-hs-tab per puntare a un pannello univoco. aria-controls della scheda e aria-labelledby del pannello ripetono questa relazione per le tecnologie assistive. Esattamente una scheda iniziale ha active e aria-selected=true, mentre gli altri pannelli sono inizialmente nascosti. HSTabs nativo aggiorna questi stati durante la navigazione dell’utente.
Lo stile visivo attivo usa hs-tab-active:bg-primary e hs-tab-active:text-primary-foreground. Queste varianti provengono da variants.css di Preline: senza questa importazione, lo stato selezionato potrebbe risultare visivamente ambiguo, anche se JavaScript aggiorna correttamente le classi. L’applicazione rileva le modifiche alla selezione per aggiornare il riepilogo adiacente.
Seleziona Laboratorio di ceramica e controlla titolo, materiali e durata.
Aumenta il numero di partecipanti da due a tre e verifica il totale stimato di $54.
Salva il piano locale, poi cambia scheda per cancellare la vecchia conferma.
Sistema di design Preline UI Sistema di progettazione: le opzioni del plugin e i vincoli dell’input devono coincidere
Le opzioni dei plugin devono essere coerenti con i vincoli degli input
Il contenitore della quantità imposta min uno, max sei e step uno in data-hs-input-number. L’input numerico nativo ripete gli stessi vincoli. In questo modo i pulsanti del plugin e la validazione del browser condividono gli stessi valori ammessi, evitando che l’inserimento manuale aggiri un limite presente solo nel gestore dei pulsanti.
Il riepilogo ascolta gli eventi input e change e il callback change del plugin. Un valore manuale non valido sostituisce il totale con un trattino lungo e disabilita Salva; anche il gestore del salvataggio chiama reportValidity prima di leggere il valore. Il limite di sei persone è un vincolo di pianificazione esemplificativo, non un’affermazione sulla disponibilità reale.
Sistema di design Preline UI Sistema di progettazione: calcola i dati dal pannello attivo, non da etichette non aggiornate
Calcola a partire dal pannello attivo, non da etichette obsolete
Ogni pannello memorizza un nome di sessione, un prezzo e una durata stabili come attributi data. La funzione di aggiornamento legge il pannello visibile e moltiplica il costo previsto per il numero valido di partecipanti. In questo modo Laboratorio di stampa, Laboratorio di ceramica e Passeggiata di disegno sono opzioni davvero distinte, anziché schede che mostrano tutte la stessa scheda segnaposto.
Il totale stimato visualizzato include solo i materiali. Le descrizioni originali specificano a cosa si riferisce il costo previsto e la pagina chiarisce esplicitamente che non prenota un posto. I numeri non corrispondono a pagamenti, controlli di disponibilità o calendari esterni. Un vero flusso di prenotazione richiederebbe sistemi separati e una convalida lato server.
Sistema di design Preline UI Sistema di progettazione: usa l’entry point manuale esportato in questa versione del pacchetto
Usa la funzione di inserimento manuale esportata in questa versione del pacchetto
Il pacchetto verificato 4.2.0 espone le esportazioni con nome HSTabs e HSInputNumber da preline/non-auto. L’esempio le importa e chiama i rispettivi metodi autoInit dopo che il markup è disponibile. Nonostante il nome, qui autoInit è una scansione esplicita avviata dall’applicazione, non un hook implicito di caricamento della pagina per l’intero pacchetto.
Durante la verifica, i percorsi .mjs dei singoli plugin non esponevano una classe predefinita e le importazioni dirette da quei percorsi potevano essere rimosse in base ai metadati side-effect del pacchetto. L’uso dell’entry point manuale esportato ha risolto questo problema concreto di compilazione. La configurazione mostra quindi l’importazione funzionante e associata alla versione, anziché un’importazione generica del plugin non verificata.
Sistema di design Preline UI Sistema di progettazione: fai scadere la conferma quando il piano cambia
Fai scadere la conferma quando il piano cambia
Salva piano locale scrive una frase di stato contenente la sessione esatta, il numero di partecipanti e il totale dei materiali, poi si disabilita. Qualsiasi modifica alla quantità o alla scheda selezionata chiama update, ripristinando il normale messaggio esplicativo e ricalcolando se il salvataggio è consentito. Una frase di conferma già salvata non può restare associata a un nuovo piano.
Il test locale ha selezionato Laboratorio di ceramica, aumentato il numero di partecipanti a tre e verificato lo stato risultante di $54. Ha inoltre esaminato la pagina effettivamente visualizzata a 280px. Un totale statico o un pulsante che cambia soltanto la propria etichetta non dimostrerebbe che i due plugin nativi e lo stato dell’applicazione siano collegati.
Usa una regione di stato per mostrare il risultato locale esatto.
Escludi dal totale calcolato i valori non validi.
Mantieni gli ID stabili di schede e pannelli quando adatti il markup.
Sistema di design Preline UI Sistema di progettazione: compila il tema, le varianti e il markup sorgente effettivo
Compila il tema, le varianti e il markup effettivo della sorgente
Il foglio di stile importa prima Tailwind, poi le varianti Preline e il tema predefinito del pacchetto. I percorsi sorgente espliciti includono HTML locale, JavaScript dell’applicazione e i file di distribuzione di Preline, così le utility dipendenti dallo stato sono disponibili nel CSS generato. Il foglio di stile del layout originale viene importato dopo questi elementi.
L’anteprima autonoma incorpora il CSS compilato e il JavaScript incluso nel bundle e non effettua richieste CDN. Un progetto di produzione può distribuire gli stessi output come file separati. Mantieni i percorsi relativi all’entry point effettivo di CSS; nell’esempio riproducibile qui sotto, tutti i file sorgente si trovano nella radice del progetto, così da evitare dipendenze nascoste da spazi di lavoro temporanei.
Le illustrazioni sono CSS originali e hanno aria-hidden.
Questo foglio di stile segue le importazioni di Tailwind e Preline.
04
Sistema di design Preline UI Configurazione dell’agente di sistema di progettazione
Punto di partenza per l’implementazione
Preline 4.2.0 nativo verificato. Il markup, la logica e il CSS completi sono riportati sopra. I percorsi sorgente di input.css presuppongono che tutti e quattro i file sorgente si trovino nella radice del progetto.
bash
# Create an empty directory and run:
npm init -y
npm install [email protected][email protected] @tailwindcss/[email protected] esbuild
# Save the complete examples above as body.html, app.js and style.css.
# Create input.css with exactly:
# @import "tailwindcss" source(none);
# @import "./node_modules/preline/variants.css";
# @import "./node_modules/preline/css/themes/theme.css";
# @source "./body.html";
# @source "./app.js";
# @source "./node_modules/preline/dist/*.js";
# @import "./style.css";
npx @tailwindcss/cli -i input.css -o bundle.css --minify
npx esbuild app.js --bundle --format=iife --outfile=bundle.js
# Assemble the actual root document without placeholder markup:
node -e 'const f=require("fs");f.writeFileSync("index.html",`<!doctype html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>Studio planner</title><link rel="stylesheet" href="bundle.css"></head><body>${f.readFileSync("body.html","utf8")}<script src="bundle.js"></script></body></html>`)'
# Serve this directory with your existing static server.
Un prompt per il tuo progetto
Prompt per l’agente
Usa Preline 4.2.0 con le importazioni con nome HSTabs e HSInputNumber da preline/non-auto e inizializza esplicitamente entrambi i plugin. Mantieni i tre laboratori di Studio Saturday, l’intervallo da uno a sei partecipanti e il costo dei materiali della sessione selezionata. Calcola il totale in base al pannello attivo e al numero di partecipanti, invalida il piano salvato dopo una modifica a uno dei due e convalida l’intervallo numerico prima di salvare in locale. Includi la configurazione fornita di tema e varianti Tailwind e il layout originale. Non trasformare il piano locale dello studio in una conferma di prenotazione o di pagamento.
05
Sistema di design Preline UI Fonti e ambito del sistema di progettazione
Preline npm 4.2.0 nativo con Tailwind CSS 4.3.3. Descrizioni originali delle sessioni, illustrazioni e costi previsti dei materiali fittizi. Il salvataggio conserva solo lo stato locale della pagina; non avvengono prenotazioni, pagamenti o invii di messaggi esterni.
