# Sistema di design Queensland Government ## Anteprima dell'interfaccia sistema di design Queensland Government Seleziona le risorse illustrate, esamina i relativi nomi in una finestra modale nativa e modifica l'elenco locale. ## Riferimento di progettazione sistema di design Queensland Government Esportazioni effettive di @qld-gov-au/qgds-bootstrap5 2.4.1 CSS e comportamento di Bootstrap Modal, con Noto Sans caricato localmente. ### Tavolozza chiara predefinita | Nome / regola | Valore / configurazione | Utilizzo | | --- | --- | --- | | --qld-color-default-color-light-action-primary | #005eb8 | Ruolo chiaro effettivo di QGDS Bootstrap 2.4.1. Da usare con la corrispondente superficie chiara. | | --qld-color-default-color-light-action-primary-hover | #003e96 | Ruolo chiaro effettivo di QGDS Bootstrap 2.4.1. Da usare con la corrispondente superficie chiara. | | --qld-color-default-color-light-background-default | #ffffff | Ruolo chiaro effettivo di QGDS Bootstrap 2.4.1. Da usare con la corrispondente superficie chiara. | | --qld-color-default-color-light-background-alt | #e3e7ea | Ruolo chiaro effettivo di QGDS Bootstrap 2.4.1. Da usare con la corrispondente superficie chiara. | | --qld-color-default-color-light-focus-default | #002e85 | Ruolo chiaro effettivo di QGDS Bootstrap 2.4.1. Da usare con la corrispondente superficie chiara. | | --qld-color-default-color-light-link-default | #005eb8 | Ruolo chiaro effettivo di QGDS Bootstrap 2.4.1. Da usare con la corrispondente superficie chiara. | | --qld-color-default-color-light-link-visited | #551a8b | Ruolo chiaro effettivo di QGDS Bootstrap 2.4.1. Da usare con la corrispondente superficie chiara. | | --qld-color-default-color-light-text-default | #353535 | Ruolo chiaro effettivo di QGDS Bootstrap 2.4.1. Da usare con la corrispondente superficie chiara. | | --qld-color-default-color-light-text-heading | #000053 | Ruolo chiaro effettivo di QGDS Bootstrap 2.4.1. Da usare con la corrispondente superficie chiara. | ### Tavolozza scura predefinita | Nome / regola | Valore / configurazione | Utilizzo | | --- | --- | --- | | --qld-color-default-color-dark-action-primary | #84d3ff | Ruolo scuro abbinato effettivo; non riutilizzare un colore di primo piano chiaro su una superficie scura senza verificarne l'abbinamento previsto. | | --qld-color-default-color-dark-action-primary-hover | #a6f7ff | Ruolo scuro abbinato effettivo; non riutilizzare un colore di primo piano chiaro su una superficie scura senza verificarne l'abbinamento previsto. | | --qld-color-default-color-dark-background-default | #005eb8 | Ruolo scuro abbinato effettivo; non riutilizzare un colore di primo piano chiaro su una superficie scura senza verificarne l'abbinamento previsto. | | --qld-color-default-color-dark-background-alt | #001d74 | Ruolo scuro abbinato effettivo; non riutilizzare un colore di primo piano chiaro su una superficie scura senza verificarne l'abbinamento previsto. | | --qld-color-default-color-dark-focus-default | #c6ffff | Ruolo scuro abbinato effettivo; non riutilizzare un colore di primo piano chiaro su una superficie scura senza verificarne l'abbinamento previsto. | | --qld-color-default-color-dark-link-default | #ffffff | Ruolo scuro abbinato effettivo; non riutilizzare un colore di primo piano chiaro su una superficie scura senza verificarne l'abbinamento previsto. | | --qld-color-default-color-dark-link-visited | #f2cdff | Ruolo scuro abbinato effettivo; non riutilizzare un colore di primo piano chiaro su una superficie scura senza verificarne l'abbinamento previsto. | | --qld-color-default-color-dark-text-default | #ffffff | Ruolo scuro abbinato effettivo; non riutilizzare un colore di primo piano chiaro su una superficie scura senza verificarne l'abbinamento previsto. | | --qld-color-default-color-dark-text-heading | #ffffff | Ruolo scuro abbinato effettivo; non riutilizzare un colore di primo piano chiaro su una superficie scura senza verificarne l'abbinamento previsto. | ### Testo, angoli e geometria della finestra modale | Nome / regola | Valore / configurazione | Utilizzo | | --- | --- | --- | | --qld-body-font-family | var(--qld-font-sans-serif) | Valore esportato dall'implementazione. I colori originali delle illustrazioni delle risorse e gli angoli delle schede da 8px sono scelte esemplificative, non ulteriori token ufficiali del tema. | | --qld-body-font-size | 1rem | Valore esportato dall'implementazione. I colori originali delle illustrazioni delle risorse e gli angoli delle schede da 8px sono scelte esemplificative, non ulteriori token ufficiali del tema. | | --qld-body-line-height | 1.5 | Valore esportato dall'implementazione. I colori originali delle illustrazioni delle risorse e gli angoli delle schede da 8px sono scelte esemplificative, non ulteriori token ufficiali del tema. | | --qld-border-radius | .25rem | Valore esportato dall'implementazione. I colori originali delle illustrazioni delle risorse e gli angoli delle schede da 8px sono scelte esemplificative, non ulteriori token ufficiali del tema. | | --qld-border-radius-sm | .25rem | Valore esportato dall'implementazione. I colori originali delle illustrazioni delle risorse e gli angoli delle schede da 8px sono scelte esemplificative, non ulteriori token ufficiali del tema. | | --qld-border-radius-lg | .25rem | Valore esportato dall'implementazione. I colori originali delle illustrazioni delle risorse e gli angoli delle schede da 8px sono scelte esemplificative, non ulteriori token ufficiali del tema. | | --qld-border-radius-xl | 1rem | Valore esportato dall'implementazione. I colori originali delle illustrazioni delle risorse e gli angoli delle schede da 8px sono scelte esemplificative, non ulteriori token ufficiali del tema. | | --qld-border-radius-xxl | 2rem | Valore esportato dall'implementazione. I colori originali delle illustrazioni delle risorse e gli angoli delle schede da 8px sono scelte esemplificative, non ulteriori token ufficiali del tema. | | --qld-border-radius-pill | 50rem | Valore esportato dall'implementazione. I colori originali delle illustrazioni delle risorse e gli angoli delle schede da 8px sono scelte esemplificative, non ulteriori token ufficiali del tema. | | --qld-modal-border-radius | var(--qld-border-radius-lg) | Valore esportato dall'implementazione. I colori originali delle illustrazioni delle risorse e gli angoli delle schede da 8px sono scelte esemplificative, non ulteriori token ufficiali del tema. | | --qld-modal-title-line-height | 1.5 | Valore esportato dall'implementazione. I colori originali delle illustrazioni delle risorse e gli angoli delle schede da 8px sono scelte esemplificative, non ulteriori token ufficiali del tema. | ## Guida completa sistema di design Queensland Government 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 Queensland Government Scegliere un'implementazione Queensland ### Indica con precisione il runtime > Queensland documenta diversi percorsi di implementazione. Questo studio usa il pacchetto pubblico @qld-gov-au/qgds-bootstrap5 alla versione 2.4.1, con il comportamento di Bootstrap Modal. Non afferma di eseguire il più recente flusso di componenti web Lit. Rendere visibili il nome e la versione dell'implementazione evita che chi legge confonda componenti con nomi simili ma regole di inizializzazione incompatibili. ### Distingui gli esempi stabili dai flussi di sviluppo Il repository ufficiale dei componenti web indica come alpha il flusso attuale, mentre il percorso Vanilla precedente è un'implementazione di riferimento distinta. L'esempio eseguibile qui resta su un unico percorso basato su Bootstrap, già testato. Prima di una futura migrazione occorrerà verificare nuovamente il markup, i nomi dei token e i contratti dei componenti, anziché limitarsi a sostituire l'URL di un foglio di stile. ## Ruoli del tema e illustrazione delle risorse sistema di design Queensland Government ### Leggi insieme i ruoli chiari e scuri La tabella dei parametri include i ruoli chiari e scuri abbinati del pacchetto reale. Le azioni principali, i colori dei link, i ruoli di messa a fuoco e quelli del testo cambiano in base al contesto della superficie. Il pacchetto di risorse attuale usa una composizione chiara; le voci scure sono valori di riferimento e non indicano che la pagina disponga di un controllo per cambiare tema. ### Usa le illustrazioni senza inventare token del brand Ogni scheda contiene un'illustrazione originale numerata di un documento. I quattro sfondi tenui delle illustrazioni distinguono le tipologie di risorsa create. Questi colori e il raggio esterno di 8px delle schede sono scelte di stile dell'applicazione, indicate separatamente dalla tabella dei ruoli pubblicata. La libreria fornisce i pulsanti effettivi, lo stile delle caselle di spunta e quello della finestra modale, che costituiscono la base dell'interfaccia. ## Scala tipografica e contenuto delle schede sistema di design Queensland Government ### Carica il carattere principale pubblico Il ruolo del testo principale del pacchetto usa la famiglia sans-serif con dimensione di 1rem e interlinea di 1.5. L'anteprima carica localmente i caratteri Noto Sans, così il risultato non dipende da una richiesta remota a Google Fonts. Titoli, descrizioni e stato del conteggio delle selezioni restano leggibili anche quando le schede si dispongono su un'unica colonna. ### Fornisci a ogni risorsa una descrizione utile Ogni scheda indica una tipologia, un tempo di lettura indicativo, un titolo concreto e uno scopo sintetico. Le durate sono stime elaborate per il workshop, non dati analitici di utilizzo. L'etichetta della selezione ripete il nome della risorsa, così l'azione resta comprensibile anche quando viene presentata separatamente da una tecnologia assistiva. L'intera scheda non diventa un'area cliccabile ambigua. ## Selezione con caselle di spunta e feedback derivato sistema di design Queensland Government ### Disabilita l'azione di revisione quando l'elenco è vuoto Le caselle di spunta indipendenti consentono qualsiasi combinazione delle quattro risorse. Un Set contiene gli indici selezionati; il conteggio e l'elenco di revisione vengono derivati da questo stato. La revisione della selezione è disabilitata quando il Set è vuoto. Si evita così di aprire una finestra di dialogo senza contenuti utili, mostrando al contempo il motivo attraverso il conteggio visibile, pari a zero. - Usa caselle di spunta indipendenti per un elenco con più risorse. - Ricava il conteggio delle selezioni dagli stessi dati della finestra di dialogo. - Indica la risorsa nell'etichetta di ogni casella di spunta. ### Rimuovi le conferme non più valide dopo ogni modifica Dopo una conferma locale, selezionare o rimuovere un'altra risorsa nasconde il risultato precedente. Il riepilogo non può restare visibile come se rappresentasse ancora l'elenco modificato. Cancellare l'elenco azzera sia il Set sia le caselle di spunta effettive, quindi riporta la messa a fuoco sulla prima scelta. L'anteprima non genera né trasmette file. ## Dialogo di revisione e ripristino della messa a fuoco sistema di design Queensland Government ### Usa la finestra modale nativa per la revisione L'istanza di Bootstrap Modal apre una finestra di dialogo etichettata tramite il titolo. Il corpo contiene i nomi delle risorse attualmente selezionate; le azioni consentono di continuare a modificare o di confermare localmente. Il tasto Esc e il controllo di chiusura chiudono la finestra di dialogo. Quando viene attivato l'evento nativo di chiusura, l'applicazione ripristina la messa a fuoco su «Rivedi selezione». ### Evita corse superflue nelle transizioni L’esempio omette la classe facoltativa fade. In questo modo, una conferma rapida o un’azione Escape chiude subito la finestra di dialogo, invece di essere ignorata mentre è ancora in corso una transizione di apertura. La finestra modale gestisce comunque il focus e il comportamento dello sfondo. Non si dovrebbe aver bisogno delle animazioni per capire se un’azione di revisione ha avuto effetto. ## Sistema di design Queensland Government Implementazione completa del pacchetto di risorse ### Ricrea fedelmente lo studio locale Crea un progetto Vite vanilla e installa il pacchetto QGDS Bootstrap bloccato alla versione indicata con Bootstrap e Noto Sans. Usa il percorso esportato qld.bootstrap.css del pacchetto, anziché ipotizzare un import interno in dist. Salva il file di ingresso completo e queensland.css con un elemento radice di montaggio. Il sorgente include tutti i record delle risorse, le illustrazioni SVG originali, la logica di selezione e le transizioni della finestra modale. 1. Installa il pacchetto QGDS Bootstrap bloccato alla versione indicata e il font pubblico. 2. Usa il percorso del foglio di stile esportato, il file di ingresso completo e CSS. 3. Seleziona due risorse e prova Escape e il ripristino del focus. 4. Conferma localmente, modifica la selezione e verifica che il risultato precedente venga cancellato. ### Definisci regole precise per transizioni e focus della finestra modale Il percorso QGDS Bootstrap usa la finestra modale Bootstrap Modal; la chiusura deve quindi seguire il ciclo di vita nativo della finestra modale. Ripristina il focus su Review selection dopo hidden.bs.modal, anziché stimare un ritardo. Se in seguito aggiungi fade, considera il periodo di transizione: una richiesta immediata di chiusura durante l’apertura potrebbe essere ignorata. Genera l’elenco di revisione dalla selezione corrente all’apertura della finestra modale e annulla una precedente conferma locale quando cambia una casella di controllo. Escape deve chiudere la revisione senza modificare le selezioni. Mantenere i controlli delle caselle separati dall’illustrazione della scheda evita comportamenti concorrenti dovuti al clic sull’intera scheda e assegna a ogni risorsa un’etichetta di selezione accessibile e precisa. ## Sistema di design Queensland Government Esempi di componenti del sistema di progettazione ### main.js — selezione completa delle risorse e revisione nella finestra modale Dati originali completi, illustrazioni, stato delle caselle di controllo e integrazione con la finestra modale nativa. ``` import Modal from 'bootstrap/js/dist/modal'; import '@qld-gov-au/qgds-bootstrap5/qld.bootstrap.css'; import '@fontsource/noto-sans/latin-400.css'; import '@fontsource/noto-sans/latin-700.css'; import './queensland.css'; const resources=[['Conversation planner','A short structure for a useful team discussion.','Guide','10 min'],['Observation notes','Capture what happened before interpreting why.','Worksheet','15 min'],['Decision record','Keep a reasoned account of the choice and its limits.','Template','10 min'],['Review checklist','Check content, keyboard behavior and narrow layouts.','Checklist','20 min']];document.getElementById('root').innerHTML=`

QUEENSLAND DESIGN SYSTEM / ORIGINAL RESOURCE STUDY

Build a workshop resource pack

Choose useful sample resources, then review your local selection. No files are requested or sent.

0 resources selected

${resources.map(([title,desc,type,time],i)=>`

${type} · ${time}

${title}

${desc}

`).join('')}
`;const selected=new Set();const $=id=>document.getElementById(id);const modal=new Modal($('review-modal'));document.querySelectorAll('.form-check-input').forEach(input=>input.addEventListener('change',()=>{const i=Number(input.value);input.checked?selected.add(i):selected.delete(i);$('count').textContent=selected.size+' resource'+(selected.size===1?'':'s')+' selected';$('review').disabled=!selected.size;$('result').hidden=true}));$('review').addEventListener('click',()=>{$('review-list').replaceChildren(...[...selected].sort().map(i=>{const li=document.createElement('li');li.textContent=resources[i][0];return li}));modal.show()});$('review-modal').addEventListener('hidden.bs.modal',()=>$('review').focus());$('confirm').addEventListener('click',()=>{$('result-text').textContent=[...selected].sort().map(i=>resources[i][0]).join(', ')+'. Your selection is held only until this page reloads.';$('result').hidden=false;modal.hide()});$('clear').addEventListener('click',()=>{selected.clear();document.querySelectorAll('.form-check-input').forEach(i=>i.checked=false);$('count').textContent='0 resources selected';$('review').disabled=true;$('result').hidden=true;document.querySelector('.form-check-input').focus()}); ``` Riferimento del codice - Il foglio di stile del pacchetto usa un punto di ingresso esportato. La conferma locale non comporta il download di un file né l’invio di dati a un servizio. ### queensland.css — composizione originale delle schede Schede responsive e disegni decorativi di documenti attorno allo stile dei componenti nativi. ``` body{margin:0}main{max-width:1200px;padding:32px;margin:auto}.eyebrow{font-size:14px;font-weight:700;letter-spacing:.04em}h1{max-width:26ch}.lead{max-width:65ch}.selection-bar{display:flex;justify-content:space-between;align-items:center;gap:24px;padding:24px 0;border-bottom:1px solid #ccc;margin-bottom:24px}.selection-bar p{margin:0;font-weight:700}.resource-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px}.resource-card{border:1px solid #ccc;border-radius:8px;overflow:hidden}.card-body{padding:24px}.card-body h2{font-size:24px;line-height:1.3}.meta{font-size:14px}.art{height:130px;display:flex;align-items:center;justify-content:space-between;padding:24px;background:#eaf4f7;color:#005e85}.art-1{background:#eef3ea;color:#3b6738}.art-2{background:#f4eef7;color:#6b427b}.art-3{background:#faf0e4;color:#8c592b}.art span{font-size:36px;font-weight:700}.art svg{width:160px;height:90px;fill:none;stroke:currentColor;stroke-width:3}.form-check{margin-top:24px}.modal-title{margin:0}.modal li{margin:12px 0}#result{margin-top:32px;padding:24px;background:#eef5f3;border-left:4px solid #20775b}[hidden]{display:none!important}@media(max-width:760px){main{padding:20px}.resource-grid{grid-template-columns:1fr}.selection-bar{align-items:start;flex-direction:column}.art{height:110px}h1{font-size:34px}} ``` Riferimento del codice - I colori delle illustrazioni e la geometria esterna delle schede sono scelte originali dell’applicazione. ## Sistema di design Queensland Government Configurazione dell’agent ### Punto di partenza per l’implementazione L’anteprima incorpora risorse di font pubbliche ed esegue il comportamento nativo della finestra modale; non è implementato alcun invio lato server. ``` npm create vite@latest qld-resource-pack -- --template vanilla cd qld-resource-pack npm install npm install @qld-gov-au/qgds-bootstrap5@2.4.1 bootstrap@5.3.8 @fontsource/noto-sans # Replace src/main.js and add src/queensland.css. Keep
. npm run dev ``` ### Un prompt per il tuo progetto ``` Crea lo studio del pacchetto di risorse del Queensland con QGDS Bootstrap 2.4.1, i ruoli effettivi della palette e Modal nativo. Mantieni le etichette delle caselle di controllo, il conteggio derivato, la revisione disabilitata quando non ci sono selezioni, Escape, il ripristino del focus e la cancellazione dei risultati non più aggiornati. Distingui le illustrazioni originali dai token ufficiali del tema e non lasciare intendere che le risorse vengano davvero fornite. ``` ## Sistema di design Queensland Government Fonti e ambito Uno studio originale di un pacchetto di risorse OpenDesign realizzato con QGDS Bootstrap 2.4.1. Questa è l’implementazione Bootstrap, non il flusso alpha dei componenti web; le selezioni sono locali e non viene inviato alcun contenuto. - Percorsi di implementazione Opzioni vanilla, Bootstrap e componenti web in fase di sviluppo. - Sorgente Bootstrap con versione specificata CSS pubblicato, risorse e implementazione. - Indicazioni per le schede Gerarchia dei contenuti e uso delle schede. - Stato dei componenti web Stato alpha esplicito e contratto di integrazione separato. ## Sistema di design Queensland Government Risorse correlate ### Ripple Esplora i ruoli cromatici effettivi di Ripple, la scala di spaziatura a 14 livelli e i riferimenti tipografici responsive attraverso una timeline completa per un workshop, con visualizzazione progressiva, indicatore di avanzamento e focus da tastiera sul passaggio successivo. ### Scottish Government sistema di design Applica la tipografia responsive, le spaziature e i ruoli cromatici del governo scozzese a un campo nativo con conteggio dei caratteri, che conserva il testo oltre il limite e consente di correggerlo. ### Singapore Government sistema di design Usa gli attuali Web Components di SGDS con token responsive reali, temi giorno e notte e quantità native con limiti, per mantenere sincronizzato un piano locale. - [Riferimento per l’implementazione](https://github.com/qld-gov-au/qgds-bootstrap5) - [Fonte](https://github.com/qld-gov-au/qgds-bootstrap5) - [Riferimento del codice](https://github.com/qld-gov-au/qgds-bootstrap5) - [Riferimento del codice](https://www.designsystem.qld.gov.au/components/card/tabs/design) - [Percorsi di implementazione Opzioni vanilla, Bootstrap e componenti web in fase di sviluppo.](https://www.designsystem.qld.gov.au/get-started/developing) - [Sorgente Bootstrap con versione specificata CSS pubblicato, risorse e implementazione.](https://github.com/qld-gov-au/qgds-bootstrap5) - [Indicazioni per le schede Gerarchia dei contenuti e uso delle schede.](https://www.designsystem.qld.gov.au/components/card/tabs/design) - [Stato dei componenti web Stato alpha esplicito e contratto di integrazione separato.](https://github.com/qld-gov-au/qgds-web-components)