Esplora l’implementazione Bootstrap del Queensland attraverso un selettore di risorse illustrato e completo, con ruoli tema reali, stile nativo delle caselle di controllo e un dialogo di revisione accessibile.
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.
03
Guida completa sistema di design Queensland Government
Una guida pratica per scegliere, applicare e valutare questo sistema in un’interfaccia reale.
DESIGN-queensland.md
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
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.
Installa il pacchetto QGDS Bootstrap bloccato alla versione indicata e il font pubblico.
Usa il percorso del foglio di stile esportato, il file di ingresso completo e CSS.
Seleziona due risorse e prova Escape e il ripristino del focus.
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.
javascript
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=`<main><p class="eyebrow">QUEENSLAND DESIGN SYSTEM / ORIGINAL RESOURCE STUDY</p><h1>Build a workshop resource pack</h1><p class="lead">Choose useful sample resources, then review your local selection. No files are requested or sent.</p><div class="selection-bar"><p id="count" role="status">0 resources selected</p><button id="review" class="btn btn-primary" disabled>Review selection</button></div><div class="resource-grid">${resources.map(([title,desc,type,time],i)=>`<article class="resource-card"><div class="art art-${i}" aria-hidden="true"><span>${String(i+1).padStart(2,'0')}</span><svg viewBox="0 0 160 90"><rect x="20" y="10" width="120" height="70" rx="4"/><path d="M38 30h84M38 45h58M38 60h70"/></svg></div><div class="card-body"><p class="meta">${type} · ${time}</p><h2>${title}</h2><p>${desc}</p><div class="form-check"><input class="form-check-input" type="checkbox" value="${i}" id="resource-${i}"><label class="form-check-label" for="resource-${i}">Add ${title.toLowerCase()}</label></div></div></article>`).join('')}</div><div id="review-modal" class="modal" tabindex="-1" aria-labelledby="review-heading" aria-hidden="true"><div class="modal-dialog modal-dialog-centered"><div class="modal-content"><div class="modal-header"><h2 id="review-heading" class="modal-title fs-4">Review your resource pack</h2><button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close review"></button></div><div class="modal-body"><p>These original resources form a local planning list.</p><ul id="review-list"></ul><p class="small">This preview does not produce files or contact a service.</p></div><div class="modal-footer"><button class="btn btn-secondary" data-bs-dismiss="modal">Keep editing</button><button id="confirm" class="btn btn-primary">Confirm local list</button></div></div></div></div><section id="result" hidden role="status"><h2>Local list ready</h2><p id="result-text"></p><button id="clear" class="btn btn-secondary">Clear the list</button></section></main>`;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()});
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.
I colori delle illustrazioni e la geometria esterna delle schede sono scelte originali dell’applicazione.
04
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.
sh
npm create vite@latest qld-resource-pack -- --template vanilla
cd qld-resource-pack
npm install
npm install @qld-gov-au/[email protected][email protected] @fontsource/noto-sans
# Replace src/main.js and add src/queensland.css. Keep <div id="root"></div>.
npm run dev
Un prompt per il tuo progetto
Prompt per l’agente
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.
05
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.
