Interfaccia utente multipiattaforma e mobile · Nuova risorsa
Sistema di design 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 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.
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.
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 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.
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.
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.
Invia il primo step con il titolo vuoto per visualizzare il messaggio di convalida.
Inserisci un titolo significativo e scegli il formato della sessione.
Continua e torna indietro con Indietro per verificare che i valori inseriti vengano mantenuti durante la navigazione.
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.
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.
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.
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.
La pagina usa l’altezza del contenuto per l’incorporamento.
La sostituzione del font dell’applicazione è esplicita.
04
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.
javascript
// 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 [email protected] @quasar/[email protected]
// 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
Prompt per l’agente
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.
05
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.
