# Sistema di design Quasar

## Anteprima dell’interfaccia del sistema di design Quasar

Dai un nome alla sessione, scegli un formato, regola il gruppo e salva un promemoria chiaramente locale.

## Riferimento di design del sistema di design Quasar

Quasar 2.34.0 con Vue 3. I colori sono le variabili runtime --q-* effettive; i riferimenti a spaziatura e tipografia provengono dai valori predefiniti di Sass. Il titolo dell’applicazione, le illustrazioni dell’agenda e la sostituzione del font di sistema sono originali. Material Icons è fornito localmente tramite @quasar/extras 2.1.0.

### Ruoli predefiniti dei colori del brand di Quasar

| Nome / regola | Valore / configurazione | Utilizzo |
| --- | --- | --- |
| --q-primary | #1976D2 | Stato dello stepper, azione principale e slider. |
| --q-secondary | #26A69A | Ruolo secondario. |
| --q-accent | #9C27B0 | Ruolo di accento. |
| --q-positive | #21BA45 | Ruolo per i riscontri positivi. |
| --q-negative | #C10015 | Ruolo per errori e convalida. |
| --q-info | #31CCEC | Ruolo informativo. |
| --q-warning | #F2C037 | Ruolo di avviso. |
### Helper nativi per la spaziatura

| Nome / regola | Valore / configurazione | Utilizzo |
| --- | --- | --- |
| $space-base | 16px | Unità di base della spaziatura Sass. |
| q-pa-xs / q-ma-xs | 4px | Un quarto dell’unità di base per la spaziatura. |
| q-pa-sm / q-ma-sm | 8px | Metà dell’unità di base per la spaziatura. |
| q-pa-md / q-ma-md | 16px | Spaziatura di base. |
| q-pa-lg / q-ma-lg | 24px | Una volta e mezza l’unità di base per la spaziatura. |
| q-pa-xl / q-ma-xl | 48px | Tre volte l’unità di base per la spaziatura. |
| q-mt-md | 16px top margin | Usata sopra l’interruttore per la partecipazione da remoto. |
| q-ml-sm | 8px left margin | Usata tra le azioni di navigazione. |
### Scala nativa delle classi tipografiche

| Nome / regola | Valore / configurazione | Utilizzo |
| --- | --- | --- |
| text-h4 | 2.125rem / 2.5rem, weight 400 | Classe utility predefinita per i titoli in formato display. |
| text-h5 | 1.5rem / 2rem, weight 400 | Classe utility predefinita per i titoli di sezione. |
| text-h6 | 1.25rem / 2rem, weight 500 | Classe utility predefinita per i titoli piccoli. |
| text-body1 | 1rem / 1.5rem, weight 400 | Classe utility predefinita per il testo del corpo grande. |
| text-body2 | 0.875rem / 1.25rem, weight 400 | Classe utility predefinita per il testo compatto del corpo. |
| Application font | system-ui, sans-serif | Override originale esplicito; qui non viene scaricata la famiglia Roboto predefinita di Quasar. |
### Breakpoint e geometria esplicita dell’applicazione

| Nome / regola | Valore / configurazione | Utilizzo |
| --- | --- | --- |
| sm minimum | 600px | Inizio del breakpoint nativo di Quasar. |
| md minimum | 1024px | Inizio del breakpoint nativo di Quasar. |
| lg minimum | 1440px | Inizio del breakpoint nativo di Quasar. |
| xl minimum | 1920px | Inizio del breakpoint nativo di Quasar. |
| Application stack breakpoint | 740px | Passaggio originale da due colonne a layout impilato. |
| Page title | 34px / 1.15; 29px mobile | Gerarchia tipografica originale. |
| Page gap / padding | 24px / 32px | Composizione circostante originale. |
| Participants slider | min 2, max 16, step 1 | Props effettive di QSlider; non è un semplice intervallo visivo. |
## Guida completa al sistema di design Quasar

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.

## I componenti di Quasar consentono di creare un’attività guidata completa nel sistema di design Quasar

### I componenti di Quasar consentono di creare un’attività guidata completa

> Quasar fornisce componenti Vue insieme a helper di stile e a un framework applicativo. Questo esempio usa direttamente i componenti in un entry point Vue 3: uno stepper nativo coordina un modulo, un gruppo di radio, uno slider, un toggle e la conferma finale. Per mostrare questi controlli non serve un guscio QLayout a schermo intero.

Il promemoria della sessione ha uno scopo preciso: scegliere il formato di lavoro e la configurazione del gruppo, visualizzando al contempo un’agenda corrispondente. La libreria di componenti fornisce i controlli e gli stati di navigazione; le tre agende originali e la loro durata complessiva di quarantacinque minuti sono contenuti dell’applicazione. Non è implicato alcun servizio di pianificazione.

Leggi la specifica di supporto

## Le variabili del brand e le classi di palette denominate coesistono nel sistema di design Quasar

### Variabili del brand e classi di palette denominate coesistono

Il valore runtime di --q-primary è #1976D2 nel foglio di stile predefinito verificato. QStepper, QBtn e QSlider ricevono color="primary", quindi il loro stile primario segue quel ruolo. Secondary, accent, positive, negative, info e warning restano ruoli distinti e nominati, anziché essere colori scelti ad hoc per ciascun controllo.

Il banner di conferma usa le utility della palette verde con nome per uno sfondo chiaro e un testo scuro. La frase esplicita comunica il successo oltre al colore. L’illustrazione ad anelli blu è un elemento decorativo originale, nascosto alle tecnologie assistive; non codifica un ulteriore stato del modulo.

Leggi la specifica di supporto

## Leggi alla lettera i suffissi di spaziatura di Quasar nel sistema di design Quasar

### Leggi alla lettera i suffissi di spaziatura di Quasar

Le classi di spaziatura di Quasar combinano tipo, direzione e dimensione. q-mt-md indica un margine superiore di valore medio; q-ml-sm aggiunge un piccolo margine sinistro. L’unità di base predefinita è di sedici pixel: xs quattro, sm otto, md sedici, lg ventiquattro e xl quarantotto. Il salto a xl equivale a tre unità di base, non a un valore ipotetico di trentadue pixel.

La pagina usa questi helper nativi all’interno dei controlli e CSS originale per la composizione più ampia. Le utility tipografiche predefinite includono text-body2 a 0.875rem e text-h5 a 1.5rem. Il titolo originale della pagina è di trentaquattro pixel e la pagina imposta esplicitamente il font su system-ui, mantenendo Material Icons per i glifi nativi dei componenti.

Leggi la specifica di supporto

## Uno stepper non convalida il modulo da solo nel sistema di design Quasar

### Uno stepper non convalida il modulo da solo

QStepper mantiene il numero dello step corrente e contiene tre sezioni QStep denominate. Uno step viene contrassegnato come completato solo dopo che la navigazione è passata oltre. L’esempio usa un orientamento verticale in entrambi i layout, mantenendo chiara la sequenza senza comprimere tre intestazioni orizzontali su uno schermo mobile.

La prima azione Continua fa parte di QForm. Il relativo gestore attende validate prima di assegnare il valore due a step. La navigazione dalle intestazioni non è abilitata, quindi fare clic su un’intestazione futura non consente di aggirare quel controllo. Le azioni Indietro preservano intenzionalmente i valori di titolo, formato e gruppo, perché i relativi modelli si trovano nel componente SFC genitore e non all’interno di un campo smontato.

Leggi la specifica di supporto

## QForm usa regole interne, non tutti i vincoli nativi, nel sistema di design Quasar

### QForm usa regole interne, non tutti i vincoli nativi

QInput del titolo ha un array di regole interne che rimuove gli spazi iniziali e finali e richiede almeno cinque caratteri significativi. Questa regola partecipa a QForm.validate. Un attributo HTML required o email, da solo, non sostituisce la regola quando si richiama validate a livello di codice; per questo l’esempio funzionante esprime direttamente il vincolo effettivo.

Un tentativo non valido mostra l’errore del campo e mantiene l’utente sul primo step. Correggendo l’input, lo stesso pulsante Continua permette di avanzare. Il limite di sessanta caratteri e il contatore visibile aiutano a mantenere il titolo adatto al promemoria, mentre la regola in linea spiega perché un titolo breve o vuoto non può proseguire.

1. Invia il primo step con il titolo vuoto per visualizzare il messaggio di convalida.

2. Inserisci un titolo significativo e scegli il formato della sessione.

3. Continua e torna indietro con Indietro per verificare che i valori inseriti vengano mantenuti durante la navigazione.

Leggi la specifica di supporto

## Radio, slider e toggle rappresentano decisioni diverse nel sistema di design Quasar

### Radio, slider e toggle rappresentano decisioni diverse

QOptionGroup rappresenta una scelta tra Revisione del design, Sessione di disegno e Sintesi della ricerca. Cambiando opzione, viene selezionato il relativo array di agenda. La lunghezza delle agende è contenuto campione fisso: cambiando formato si aggiornano le attività elencate, mantenendo la durata complessiva di quarantacinque minuti.

QSlider controlla un numero intero di partecipanti da due a sedici. QToggle registra se sono inclusi partecipanti da remoto. Il suggerimento adiacente cambia da un tavolo condiviso a una lavagna condivisa con facilitazione da remoto. Questi controlli modificano il promemoria visualizzato, anziché funzionare come widget dimostrativi scollegati.

Leggi la specifica di supporto

## Lo step finale blocca un risultato locale fino al ripristino nel sistema di design Quasar

### Lo step finale blocca un risultato locale fino al ripristino

Lo step di revisione ripropone il titolo senza spazi superflui, il formato, il numero di partecipanti e la modalità di partecipazione. Il salvataggio imposta un flag locale, disattiva Salva e Indietro e mostra un banner con il numero di persone nel gruppo. Inizia un’altra sessione azzera tutti i modelli e torna al primo step, completando il ciclo osservabile dell’esempio.

Non viene inviata alcuna richiesta a un calendario o a un servizio di messaggistica API. Il banner dichiara esplicitamente che non è stato inviato alcun invito e il testo di revisione specifica che il salvataggio non crea un evento. Per poterlo affermare, un sistema di pianificazione in produzione dovrebbe raccogliere data, fuso orario e destinatari e ricevere una risposta effettiva dal backend.

Leggi la specifica di supporto

## Usa la semantica nativa dei componenti e verifica davvero il focus nel sistema di design Quasar

### Usa la semantica nativa dei componenti e verifica davvero il focus

I controlli nativi forniscono i ruoli radio, slider e switch. Lo slider ha l’etichetta Participants, mentre il campo del titolo presenta un’etichetta visibile e un messaggio di convalida specifico. Lo stepper identifica il passaggio corrente ed etichetta il relativo contenuto con il titolo del passaggio. L’esempio esclude le illustrazioni decorative dalla sequenza di lettura accessibile.

Il test locale ha modificato lo slider tramite tastiera, attivato e disattivato la partecipazione da remoto, superato la convalida e salvato un brief ibrido per nove persone. Ha anche verificato il layout stretto. Un’immagine statica di uno stepper non dimostrerebbe queste relazioni né proverebbe che il blocco di convalida sia collegato.

- Mantieni coerenti il passaggio attivo e il titolo del relativo contenuto.

- Esegui la convalida tramite le regole prima di modificare il modello del passaggio.

- Usa un banner di stato che descriva l’esatto risultato locale.

Leggi la specifica di supporto

## Includi il sistema di design Quasar e il set di icone previsto Quasar CSS

### Includi Quasar CSS e il set di icone richiesto

Il file di ingresso importa Quasar, registra il relativo plugin, carica quasar/dist/quasar.css e importa il foglio di stile Material Icons da @quasar/extras. Il file SFC importa i componenti utilizzati. Il bundle locale incorpora i file dei font delle icone, così i segni di spunta e gli indicatori di modifica vengono visualizzati senza richieste di font remote.

Il foglio di stile originale segue Quasar CSS e reimposta l’altezza del documento in base al contenuto per l’incorporamento. Non modifica globalmente tutti i componenti nativi né introduce una scala di spaziatura sostitutiva. Un’applicazione completa basata su CLI Quasar o sul plugin Vite può usare la consueta integrazione di build; questo esempio completo mostra gli stessi componenti in un piccolo punto di ingresso Vue.

Leggi la specifica di supporto

## Esempi di componenti del sistema di design Quasar

### Flusso completo con stepper nativo

QStepper/QStep, QForm/QInput, QOptionGroup, QSlider, QToggle e un’agenda derivata.

```
<script setup>
import {ref,computed} from 'vue';import {QStepper,QStep,QStepperNavigation,QForm,QInput,QOptionGroup,QSlider,QToggle,QBtn,QCard,QCardSection,QBadge,QBanner} from 'quasar';
const step=ref(1),title=ref(''),format=ref('critique'),people=ref(8),remote=ref(false),saved=ref(false),form=ref();const formats=[{label:'Design critique',value:'critique'},{label:'Sketching session',value:'sketch'},{label:'Research synthesis',value:'research'}];const names={critique:'Design critique',sketch:'Sketching session',research:'Research synthesis'};const agenda=computed(()=>format.value==='critique'?[['10 min','Set the question'],['25 min','Review the work'],['10 min','Choose next actions']]:format.value==='sketch'?[['5 min','Frame the prompt'],['25 min','Sketch independently'],['15 min','Compare directions']]:[['10 min','Sort observations'],['20 min','Name the patterns'],['15 min','Record open questions']]);async function next(){if(await form.value.validate())step.value=2;}function reset(){step.value=1;title.value='';format.value='critique';people.value=8;remote.value=false;saved.value=false;}
</script>
<template><main class="session-builder"><header><div><p class="eyebrow">QUASAR · GUIDED WORKFLOW</p><h1>Make time for better work.</h1><p class="intro">Build a small session brief with a native stepper, validated fields and a live agenda.</p></div><QBadge color="primary" label="45 MINUTES"/></header><div class="builder-grid"><QStepper v-model="step" vertical color="primary" animated flat bordered class="session-stepper"><QStep :name="1" prefix="1" title="Name the session" caption="Purpose and format" :done="step>1"><QForm ref="form" @submit="next"><QInput v-model="title" outlined label="Session title" maxlength="60" counter lazy-rules :rules="[v=>v.trim().length>=5||'Use at least five non-space characters.']"/><p class="field-label">Session format</p><QOptionGroup v-model="format" :options="formats" color="primary"/><QStepperNavigation><QBtn color="primary" label="Continue" type="submit" no-caps/></QStepperNavigation></QForm></QStep><QStep :name="2" prefix="2" title="Shape the group" caption="People and participation" :done="step>2"><p class="field-label">Participants: <strong>{{people}}</strong></p><QSlider v-model="people" :min="2" :max="16" :step="1" label color="primary" aria-label="Participants"/><QToggle v-model="remote" label="Include remote participants" color="primary" class="q-mt-md"/><p class="hint">{{remote?'Reserve a shared board and a facilitator for the remote group.':'Use one shared table and keep the work visible to everyone.'}}</p><QStepperNavigation><QBtn color="primary" label="Review brief" no-caps @click="step=3"/><QBtn flat label="Back" no-caps class="q-ml-sm" @click="step=1"/></QStepperNavigation></QStep><QStep :name="3" prefix="3" title="Review the brief" caption="Save a local snapshot"><p class="review-title">{{title.trim()}}</p><p>{{names[format]}} · {{people}} people · {{remote?'Hybrid':'In person'}}</p><p class="hint">The agenda totals 45 minutes. Saving does not create a calendar event or invite anyone.</p><QStepperNavigation><QBtn color="primary" :label="saved?'Saved locally':'Save local brief'" :disable="saved" no-caps @click="saved=true"/><QBtn flat label="Back" no-caps class="q-ml-sm" :disable="saved" @click="step=2"/></QStepperNavigation><QBanner v-if="saved" rounded class="bg-green-1 text-green-10 q-mt-lg" role="status">Local brief saved for {{people}} people. No invitation was sent.<template #action><QBtn flat label="Start another" no-caps @click="reset"/></template></QBanner></QStep></QStepper><QCard flat bordered class="agenda-card"><QCardSection><p class="eyebrow">LIVE AGENDA</p><h2>{{title.trim()||'Your next working session'}}</h2><p class="agenda-format">{{names[format]}}</p><div class="time-art" aria-hidden="true"><i></i><i></i><i></i><span>45′</span></div><ol class="agenda-list"><li v-for="row in agenda" :key="row[1]"><span>{{row[0]}}</span><strong>{{row[1]}}</strong></li></ol><div class="session-meta"><span>{{people}} participants</span><span>{{remote?'Hybrid setup':'One shared table'}}</span></div><p class="local-note">Original sample agenda. Quasar supplies the form and navigation components.</p></QCardSection></QCard></div></main></template>
```

Riferimento del codice

- La prima transizione attende QForm.validate().

- La regola del titolo verifica che la lunghezza, dopo aver rimosso gli spazi iniziali e finali, sia significativa.

- Il passaggio di riepilogo non crea un evento di calendario.

### Composizione originale dell’agenda

Layout reattivo e illustrazione decorativa del tempo attorno ai componenti nativi Quasar.

```
html,body{height:auto;min-height:0}body{background:#f3f5f8;font-family:system-ui,sans-serif}.session-builder{max-width:1120px;padding:32px;margin:auto}header{display:flex;justify-content:space-between;align-items:flex-start;gap:24px;margin-bottom:32px}.eyebrow{font-size:11px;font-weight:650;letter-spacing:.13em;color:#5c6c80}h1{font-size:34px;line-height:1.15;font-weight:650;margin:14px 0;letter-spacing:-.02em}.intro{font-size:15px;line-height:1.7;max-width:610px;color:#5c6c80}.builder-grid{display:grid;grid-template-columns:1.1fr 1fr;gap:24px;align-items:start}.field-label{font-size:14px;font-weight:600;margin:20px 0 8px}.hint,.local-note{font-size:12px;line-height:1.7;color:#647187}.review-title{font-size:20px;font-weight:650;line-height:1.4}.agenda-card .q-card__section{padding:24px}.agenda-card h2{font-size:25px;line-height:1.25;font-weight:600;margin:16px 0 8px;letter-spacing:0}.agenda-format{font-size:14px;color:#647187}.time-art{height:140px;background:#e6eef8;border-radius:6px;display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden;margin:24px 0}.time-art i{position:absolute;width:130px;height:130px;border:18px solid #8db8e8;border-radius:50%;left:10%;top:45%}.time-art i:nth-child(2){border-color:#c1d7ef;width:170px;height:170px;left:35%;top:-30%}.time-art i:nth-child(3){border-color:#d8e5f5;width:150px;height:150px;left:65%;top:40%}.time-art span{font-size:45px;font-weight:700;position:relative;color:#175a9e}.agenda-list{list-style:none;padding:0;margin:0}.agenda-list li{display:grid;grid-template-columns:65px 1fr;gap:16px;border-bottom:1px solid #dfe5ec;padding:16px 0;font-size:14px}.agenda-list span{color:#657991;font-size:12px}.agenda-list strong{font-weight:600}.session-meta{display:flex;justify-content:space-between;gap:12px;margin:24px 0;font-size:12px;color:#5c6c80}.local-note{margin-bottom:0}@media(max-width:740px){.session-builder{padding:24px 14px}header{flex-direction:column;gap:4px}h1{font-size:29px}.builder-grid{grid-template-columns:1fr}.session-stepper .q-stepper__step-inner{padding-right:18px}.agenda-card .q-card__section{padding:22px}}
```

Riferimento del codice

- La pagina usa l’altezza del contenuto per l’incorporamento.

- La sostituzione del font dell’applicazione è esplicita.

## Configurazione dell’agente per il sistema di design Quasar

### Punto di partenza per l’implementazione

Verificati Quasar 2.34.0 e @quasar/extras 2.1.0 con Vue 3. Il font delle icone è una risorsa locale necessaria per gli indicatori predefiniti dei passaggi.

```
// Create the project first:
// npm create vite@latest quasar-specimen -- --template vue
// cd quasar-specimen && npm install
// In a Vite Vue 3 project:
// npm install quasar@2.34.0 @quasar/extras@2.1.0
// Save the complete SFC as App.vue and layout as style.css.
import {createApp} from 'vue';
import {Quasar} from 'quasar';
import 'quasar/dist/quasar.css';
import '@quasar/extras/material-icons/material-icons.css';
import './style.css';
import App from './App.vue';
createApp(App).use(Quasar, {plugins: {}}).mount('#app');
// index.html contains <div id="app"></div>.
// Components are explicitly imported in App.vue; no auto-import plugin is required here.
// Keep the template index.html and replace its entry with the code above.
// npm run dev
```

### Un prompt per il tuo progetto

```
Usa Quasar 2.34.0 e il brief guidato della sessione fornito. Mantieni la convalida di QStepper, QForm e QInput, i controlli radio per il formato della sessione, lo slider dei partecipanti e l’interruttore dell’agenda. Attendi la convalida del modulo prima di avanzare, conserva i valori inseriti quando si torna indietro e ricava il riepilogo dalla revisione usando gli stessi valori. Il salvataggio registra un brief locale; le modifiche successive ne invalidano lo stato di salvataggio. Includi il foglio di stile Quasar e la configurazione locale di Material Icons, e mantieni usabile il layout stretto senza inventare servizi di invio o prenotazione.
```

## Fonti e ambito del sistema di design Quasar

Quasar 2.34.0 con componenti nativi e Material Icons locale. Le agende originali e le illustrazioni sono contenuti di esempio. Il salvataggio non crea eventi di calendario né invia inviti.

- Stepper Stato dei passaggi, navigazione e accessibilità.

- Form Convalida delle regole interne e comportamento all’invio.

- Input Etichette, contatore e regole.

- Gruppo di opzioni Scelte di formato mutuamente esclusive.

- Slider Controllo numerico da tastiera e puntatore.

- Colori Ruoli del brand in fase di esecuzione.

- Spaziatura Sintassi nativa degli helper di spaziatura.

- Tipografia Utilità di tipografia predefinite.

- Integrazione Riferimento per l’integrazione Vue/Vite.

## Risorse correlate al sistema di design Quasar

### React Native Elements

Crea un compositore completo di piani di concentrazione con React Native Elements 5.0.0: ruoli tema reali, input e selezioni controllati, convalida, conferma locale e build web verificata.

### React Suite

Un calendario di revisione nativo React Suite con variabili CSS v6 verificate, indicatori nelle celle delle date, agenda del giorno selezionato, convalida modale e regole esplicite per la pianificazione locale.

### Skeleton

Confronta i temi Cerberus, Mint e Rose reali di Skeleton 5.0.1 attraverso una postazione di lettura completa, con ispezione dei token in tempo reale, combinazioni di superfici scure e stato locale reversibile.


- [Riferimento per l’implementazione](https://quasar.dev/vue-components/stepper/)
- [Fonte](https://quasar.dev/style/color-palette/)
- [Fonte](https://quasar.dev/style/spacing/)
- [Fonte](https://quasar.dev/style/typography/)
- [Fonte](https://quasar.dev/style/breakpoints/)
- [Leggi la specifica di supporto](https://quasar.dev/start/vite-plugin/)
- [Leggi la specifica di supporto](https://quasar.dev/style/color-palette/)
- [Leggi la specifica di supporto](https://quasar.dev/style/spacing/)
- [Leggi la specifica di supporto](https://quasar.dev/vue-components/stepper/)
- [Leggi la specifica di supporto](https://quasar.dev/vue-components/form/)
- [Leggi la specifica di supporto](https://quasar.dev/vue-components/option-group/)
- [Leggi la specifica di supporto](https://quasar.dev/vue-components/banner/)
- [Riferimento del codice](https://quasar.dev/vue-components/stepper/)
- [Riferimento del codice](https://quasar.dev/style/spacing/)
- [Stepper Stato dei passaggi, navigazione e accessibilità.](https://quasar.dev/vue-components/stepper/)
- [Form Convalida delle regole interne e comportamento all’invio.](https://quasar.dev/vue-components/form/)
- [Input Etichette, contatore e regole.](https://quasar.dev/vue-components/input/)
- [Gruppo di opzioni Scelte di formato mutuamente esclusive.](https://quasar.dev/vue-components/option-group/)
- [Slider Controllo numerico da tastiera e puntatore.](https://quasar.dev/vue-components/slider/)
- [Colori Ruoli del brand in fase di esecuzione.](https://quasar.dev/style/color-palette/)
- [Spaziatura Sintassi nativa degli helper di spaziatura.](https://quasar.dev/style/spacing/)
- [Tipografia Utilità di tipografia predefinite.](https://quasar.dev/style/typography/)
- [Integrazione Riferimento per l’integrazione Vue/Vite.](https://quasar.dev/start/vite-plugin/)