# Preline UI Sistema di progettazione ## Sistema di design Preline UI Anteprima dell’interfaccia del sistema di progettazione Confronta tre sessioni creative originali, modifica la dimensione del gruppo e salva una stima dei materiali chiaramente locale. ## 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. ### Tema semantico chiaro predefinito | Nome / regola | Valore / configurazione | Utilizzo | | --- | --- | --- | | --background | var(--color-white) | Ruolo dello sfondo predefinito. | | --foreground | var(--color-gray-800) | Ruolo del testo principale. | | --border | var(--color-gray-200) | Ruolo condiviso del bordo. | | --primary | var(--color-primary-600) | Scheda attiva e azione principale. | | --primary-foreground | var(--color-white) | Testo sul colore principale. | | --primary-hover | var(--color-primary-700) | Stato al passaggio del puntatore. | | --primary-focus | var(--color-primary-700) | Stato di focus. | | --primary-active | var(--color-primary-700) | Stato attivo. | | --layer | var(--color-white) | Superficie del controllo quantità. | | --layer-line | var(--color-gray-200) | Bordo del controllo quantità. | | --layer-hover | var(--color-gray-50) | Superficie al passaggio del puntatore. | | --card | var(--color-white) | Schede di sessioni e gruppi. | | --card-line | var(--color-gray-200) | Bordo delle schede. | | --muted-foreground-1 | var(--color-gray-500) | Testo di supporto. | ### Scale Tailwind effettivamente utilizzate | Nome / regola | Valore / configurazione | Utilizzo | | --- | --- | --- | | p-2 / gap-2 | 0.5rem | Contenitore della quantità e spazi tra le schede. | | px-3 / gap-3 | 0.75rem | Spaziatura interna delle schede e del controllo numerico. | | p-5 | 1.25rem | Schede e rientro predefinito della pagina. | | sm:p-8 | 2rem from 640px | Rientro della pagina al breakpoint piccolo. | | mt-7 | 1.75rem | Spazio prima del pianificatore. | | text-xs | 0.75rem / 1rem | Etichette secondarie. | | text-sm | 0.875rem / 1.25rem | Controlli e testo esplicativo. | | text-lg | 1.125rem / 1.75rem | Intestazione del gruppo. | | text-2xl | 1.5rem / 2rem | Titolo della sessione. | | text-3xl | 1.875rem / 2.25rem | Titolo della pagina e totale. | | rounded-lg / rounded-xl | 0.5rem / 0.75rem | Controlli / schede; valori predefiniti dei raggi di Tailwind. | ### Vincoli originali dell’applicazione e dei plugin | Nome / regola | Valore / configurazione | Utilizzo | | --- | --- | --- | | Group size | min 1 / max 6 / step 1 | Le opzioni dati di HSInputNumber e i vincoli degli input HTML sono coerenti. | | Print studio allowance | $12 per participant | Stima fittizia dei materiali. | | Clay workshop allowance | $18 per participant | Stima fittizia dei materiali. | | Drawing walk allowance | $5 per participant | Stima fittizia dei materiali. | | Layout | Flexible session + 280px group card; stack at 760px | Composizione responsive originale. | | Theme mapping | bg-primary → --color-primary → --primary | L’utilità semantica di Tailwind si risolve tramite l’alias Preline. | ## Sistema di design Preline UI Guida completa al sistema di progettazione Una guida pratica per scegliere, applicare e valutare questo sistema in un’interfaccia reale. Indicazioni complete, un punto di partenza per l’implementazione e link alle fonti. ## 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. Leggi la specifica di supporto ## 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. Leggi la specifica di supporto ## 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. Leggi la specifica di supporto ## 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. 1. Seleziona Laboratorio di ceramica e controlla titolo, materiali e durata. 2. Aumenta il numero di partecipanti da due a tre e verifica il totale stimato di $54. 3. Salva il piano locale, poi cambia scheda per cancellare la vecchia conferma. Leggi la specifica di supporto ## 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. Leggi la specifica di supporto ## 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. Leggi la specifica di supporto ## 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. Leggi la specifica di supporto ## 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. Leggi la specifica di supporto ## 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. Leggi la specifica di supporto ## Sistema di design Preline UI Esempi di componenti del sistema di progettazione ### Markup semantico completo per il pianificatore ID delle schede, relazioni tra pannelli, hook per l’input numerico e una regione di stato locale esplicita. ```

STUDIO SATURDAY · SAMPLE PROGRAM

Choose a different kind of afternoon.

Explore three creative sessions and calculate a sample materials budget for your group. This planner does not book a place.

09:30–11:00 · 90 minutes

Ink, paper, repeat.

Make a two-color print from a simple cut-paper composition.

Materials included in the estimate

  • Cobalt ink
  • Warm white stock
  • Registration guide

Sample materials allowance: $12 per person

``` Riferimento del codice - Le tre sessioni e i relativi prezzi sono dati di esempio originali. - L’input nativo ha gli stessi vincoli del plugin. ### Inizializzazione completa dei plugin e calcolo Inizializzazione manuale dall’entry point non-auto esportato; selezione e quantità alimentano un unico riepilogo derivato. ``` import {HSTabs,HSInputNumber} from 'preline/non-auto'; HSTabs.autoInit();HSInputNumber.autoInit(); const quantity=document.querySelector('#people'),save=document.querySelector('#save'),feedback=document.querySelector('#feedback'); function selected(){return document.querySelector('[role=tabpanel]:not(.hidden)')} function update(){const panel=selected(),count=Number(quantity.value);document.querySelector('#selected-name').textContent=panel.dataset.name;document.querySelector('#selected-duration').textContent=panel.dataset.duration;document.querySelector('#total').textContent=quantity.checkValidity()&&count>=1?'$'+count*Number(panel.dataset.price):'—';save.disabled=!quantity.checkValidity()||count<1;feedback.textContent='No booking or payment is created.'} document.querySelectorAll('[data-hs-tab]').forEach(button=>button.addEventListener('click',()=>queueMicrotask(update))); new MutationObserver(update).observe(document.querySelector('nav'),{subtree:true,attributes:true,attributeFilter:['aria-selected']}); quantity.addEventListener('input',update);quantity.addEventListener('change',update); const instance=HSInputNumber.getInstance('#quantity');instance.on('change',update); save.addEventListener('click',()=>{if(!quantity.reportValidity())return;const panel=selected();feedback.textContent=`Saved locally: ${panel.dataset.name}, ${quantity.value} people, $${Number(quantity.value)*Number(panel.dataset.price)} materials estimate.`;save.disabled=true});update(); ``` Riferimento del codice - Usa le esportazioni con nome da preline/non-auto. - I file .mjs nei percorsi dei plugin specifici della versione non esportano una classe predefinita. - Gli eventi di modifica dell’input e i callback change del plugin aggiornano entrambi il riepilogo. ### Composizione responsive originale completa Illustrazioni decorative di stampa, ceramica e disegno attorno ai plugin nativi per schede e input numerico. ``` html,body{margin:0;height:auto;min-height:0}body{background:#f7f8fb;font-family:ui-sans-serif,system-ui,sans-serif;color:var(--foreground)}button{cursor:pointer}button:disabled{cursor:default}.planner-grid{display:grid;grid-template-columns:minmax(0,1fr) 280px;gap:24px}.session-art{height:200px;position:relative;overflow:hidden;border-radius:12px 12px 0 0}.session-art i,.session-art b,.session-art span{display:block;position:absolute}.print{background:#e2e9f4}.print i{width:160px;height:140px;left:15%;top:45px;background:#2456a7;transform:rotate(-13deg)}.print b{width:150px;height:150px;right:14%;top:30px;background:#f0a979;border-radius:50%;mix-blend-mode:multiply}.print span{width:180px;height:8px;left:20%;top:160px;background:#f9f8ef;transform:rotate(-13deg)}.ceramics{background:#e8d9c8}.ceramics i{width:150px;height:100px;left:25%;top:65px;border-radius:15% 15% 50% 50%;background:#a87862}.ceramics b{width:150px;height:32px;border-radius:50%;left:25%;top:53px;background:#704a3d;box-shadow:inset 0 0 0 10px #bd8f78}.ceramics span{width:150px;height:12px;left:25%;top:171px;background:#c7b39e;border-radius:50%}.drawing{background:#e2e8de}.drawing i{width:160px;height:145px;left:23%;top:25px;background:#fffdf4;transform:rotate(8deg);border:1px solid #d6d8cb}.drawing b{height:90px;width:80px;left:33%;top:49px;border:2px solid #4d655b;transform:rotate(-18deg);border-radius:50% 50% 10% 10%}.drawing span{width:130px;height:7px;background:#ad754c;left:45%;top:145px;transform:rotate(-33deg)}@media(max-width:760px){.planner-grid{grid-template-columns:minmax(0,1fr)}.session-art{height:170px}}@media(max-width:360px){main{padding:14px!important}.session-art i,.session-art b,.session-art span{transform:scale(.8)}.session-art{height:150px}h1{font-size:26px!important}} ``` Riferimento del codice - Le illustrazioni sono CSS originali e hanno aria-hidden. - Questo foglio di stile segue le importazioni di Tailwind e Preline. ## 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. ``` # Create an empty directory and run: npm init -y npm install preline@4.2.0 tailwindcss@4.3.3 @tailwindcss/cli@4.3.3 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",`Studio planner${f.readFileSync("body.html","utf8")}`)' # Serve this directory with your existing static server. ``` ### Un prompt per il tuo progetto ``` 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. ``` ## 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. - Temi Mappatura dei ruoli semantici e personalizzazione del tema. - Plugin Schede Relazioni di destinazione, inizializzazione e comportamento. - Input numerico Limiti, hook, metodi e callback di modifica. - Markup delle schede Composizione dell’elenco di schede e dei pannelli. - Integrazione di JavaScript Limiti di inizializzazione e ciclo di vita del framework. - Tipografia Gerarchia tipografica basata su utility. - Installazione Compilazione Tailwind e configurazione del pacchetto. ## Sistema di design Preline UI Risorse correlate al sistema di progettazione ### Prime UI Un’implementazione PrimeVue con versione vincolata dell’ecosistema Prime UI: un albero di documenti con tema Aura, riferimenti reali al preset, espansione controllata, filtri, selezione e aggiunta locale ai preferiti. ### Pure CSS Pure CSS è un foglio di stile modulare per griglie, moduli, pulsanti, menu e tabelle, senza un runtime per i widget. Questa guida mostra come il modulo opzionale per la griglia responsive si integra con gli elementi semantici nativi in un catalogo di attrezzature filtrabile, con ordinamento e selezione implementati esplicitamente. ### Quasar Un flusso guidato nativo Quasar con valori reali di marchio e spaziatura, convalida QForm, un creatore di brief in tre passaggi, opzioni radio per il formato e un’agenda dal vivo di quarantacinque minuti. - [Riferimento per l’implementazione](https://preline.co/plugins/tabs.html) - [Fonte](https://preline.co/docs/themes.html) - [Fonte](https://preline.co/docs/typography.html) - [Fonte](https://preline.co/plugins/input-number.html) - [Leggi la specifica di supporto](https://preline.co/docs/index.html) - [Leggi la specifica di supporto](https://preline.co/docs/themes.html) - [Leggi la specifica di supporto](https://preline.co/docs/typography.html) - [Leggi la specifica di supporto](https://preline.co/plugins/tabs.html) - [Leggi la specifica di supporto](https://preline.co/plugins/input-number.html) - [Leggi la specifica di supporto](https://preline.co/docs/components/tabs.html) - [Leggi la specifica di supporto](https://preline.co/docs/preline-javascript.html) - [Riferimento del codice](https://preline.co/docs/components/tabs.html) - [Riferimento del codice](https://preline.co/plugins/input-number.html) - [Riferimento del codice](https://preline.co/docs/themes.html) - [Temi Mappatura dei ruoli semantici e personalizzazione del tema.](https://preline.co/docs/themes.html) - [Plugin Schede Relazioni di destinazione, inizializzazione e comportamento.](https://preline.co/plugins/tabs.html) - [Input numerico Limiti, hook, metodi e callback di modifica.](https://preline.co/plugins/input-number.html) - [Markup delle schede Composizione dell’elenco di schede e dei pannelli.](https://preline.co/docs/components/tabs.html) - [Integrazione di JavaScript Limiti di inizializzazione e ciclo di vita del framework.](https://preline.co/docs/preline-javascript.html) - [Tipografia Gerarchia tipografica basata su utility.](https://preline.co/docs/typography.html) - [Installazione Compilazione Tailwind e configurazione del pacchetto.](https://preline.co/docs/index.html)