Queensland Government Designsystem.

Queensland Government Designsystem Eine Queensland-Implementierung auswählen

Laufzeitumgebung genau benennen

Queensland dokumentiert mehrere Implementierungspfade. Diese Untersuchung verwendet das öffentliche Paket @qld-gov-au/qgds-bootstrap5 in Version 2.4.1 mit dessen Bootstrap-Modalverhalten. Sie gibt nicht vor, den neueren Lit-Webkomponenten-Stream auszuführen. Werden Name und Version der Implementierung sichtbar angegeben, können Leser ähnlich benannte Komponenten mit inkompatiblen Initialisierungsregeln auseinanderhalten.

Stabile Beispiele von Entwicklungs-Streams trennen

Das offizielle Web-Component-Repository kennzeichnet den aktuellen Entwicklungszweig als Alpha, während der ältere Vanilla-Pfad eine separate Referenzimplementierung ist. Das ausführbare Beispiel bleibt hier bei einem einzigen getesteten, auf Bootstrap basierenden Pfad. Bei einer künftigen Migration sollten Markup, Token-Namen und Komponentenverträge erneut geprüft werden, statt lediglich eine Stylesheet-URL auszutauschen.

Queensland Government Designsystem Rollen für helle und dunkle Designs und Ressourcenillustration

Helle und dunkle Rollen gemeinsam betrachten

Die Parametertabelle enthält die gekoppelten hellen und dunklen Rollen aus dem tatsächlichen Paket. Primäre Aktionen, Linkfarben, Fokus- und Textrrollen ändern sich je nach Oberflächenkontext. Das aktuelle Ressourcenpaket verwendet eine helle Gestaltung; die dunklen Einträge sind Referenzwerte und bedeuten nicht, dass die Seite über eine Umschaltfunktion für Designs verfügt.

Illustrationen verwenden, ohne Marken-Token zu erfinden

Jede Karte enthält eine eigens erstellte Illustration eines nummerierten Dokuments. Die vier dezenten Illustrationshintergründe unterscheiden die gestalteten Ressourcentypen. Diese Farben und der äußere Kartenradius von 8px sind Anwendungsdesign und werden in der veröffentlichten Rollentabelle separat ausgewiesen. Die Bibliothek stellt die echten Schaltflächen, die Gestaltung der Kontrollkästchen und den modalen Dialog bereit, auf denen die Benutzeroberfläche aufbaut.

Queensland Government Designsystem Lesetypografie und Karteninhalt

Die öffentlich verfügbare Fließtextschrift laden

Die Fließtextrolle des Pakets verwendet die serifenlose Schriftfamilie mit einer Größe von 1rem und einem Zeilenabstand von 1.5. Die Vorschau lädt lokale Noto Sans-Schriftdateien, damit das Ergebnis nicht von einer externen Anfrage an Google Fonts abhängt. Überschriften, Beschreibungen und die Anzeige der ausgewählten Anzahl bleiben gut lesbar, wenn die Karten einspaltig angeordnet werden.

Jede Ressource aussagekräftig beschreiben

Jede Karte enthält einen Typ, eine beispielhafte Lesezeit, einen konkreten Titel und eine kurze Beschreibung des Zwecks. Die Zeitangaben sind geschätzte Werte für Workshops und keine Nutzungsanalysen. Die Beschriftung wiederholt den Ressourcennamen, damit die Aktion auch dann verständlich bleibt, wenn sie getrennt von einer unterstützenden Technologie vorgelesen wird. Die ganze Karte wird nicht zu einem mehrdeutigen Klickziel gemacht.

Queensland Government Designsystem Kontrollkästchenauswahl und daraus abgeleitete Rückmeldungen

Die Überprüfungsaktion bei leerer Auswahl deaktivieren

Unabhängige Kontrollkästchen ermöglichen jede beliebige Kombination der vier Ressourcen. Ein Set enthält die Indizes der ausgewählten Elemente; Anzahl und Überprüfungsliste werden aus diesem Zustand abgeleitet. Die Überprüfung der Auswahl ist deaktiviert, solange das Set leer ist. So wird vermieden, einen Dialog ohne sinnvollen Inhalt zu öffnen, während die sichtbare Null weiterhin den Grund dafür erkennen lässt.

• Für eine Liste mit mehreren Ressourcen unabhängige Kontrollkästchen verwenden.
• Die angezeigte Anzahl aus denselben Daten ableiten wie den Dialoginhalt.
• Den Ressourcennamen in jede Kontrollkästchenbeschriftung aufnehmen.

Veraltete Bestätigungen bei Änderungen löschen

Queensland Government Designsystem Überprüfungsdialog und Fokusrückgabe

Für die Überprüfung einen nativen modalen Dialog verwenden

Die Instanz Bootstrap Modal öffnet einen Dialog, der durch seine Überschrift beschriftet ist. Der Inhalt zeigt die Namen der aktuell ausgewählten Ressourcen; die Aktionen bieten die Möglichkeit, weiter zu bearbeiten oder lokal zu bestätigen. Escape und die Schließen-Schaltfläche schließen den Dialog. Wenn das native Ereignis hidden ausgelöst wird, setzt die Anwendung den Fokus auf „Auswahl überprüfen“ zurück.

Unnötige Übergangsprobleme vermeiden

Das Beispiel lässt die optionale Klasse fade weg. So kann der Dialog bei einer schnellen Bestätigung oder durch Escape sofort geschlossen werden, statt die Aktion während eines laufenden Einblendübergangs zu ignorieren. Der modale Dialog übernimmt weiterhin die Fokusverwaltung und das Verhalten des Hintergrunds. Es sollte keine Animation nötig sein, um zu erkennen, ob eine Überprüfungsaktion wirksam war.

Queensland Government Designsystem Vollständige Implementierung des Ressourcenpakets

Die lokale Studie exakt nachbilden

Ein Vite-Vanilla-Projekt erstellen und das angeheftete QGDS-Paket Bootstrap zusammen mit Bootstrap und Noto Sans installieren. Den exportierten Pfad qld.bootstrap.css des Pakets verwenden, statt einen nicht bestätigten tiefen Import aus dist anzunehmen. Den vollständigen Einstiegspunkt und queensland.css zusammen mit einem Root-Mount-Element speichern. Der Quellcode enthält alle Ressourcendatensätze, die originalen SVG-Illustrationen, die Auswahllogik und die Dialogübergänge.

1. Das angeheftete QGDS-Paket Bootstrap und die öffentlich verfügbare Schrift installieren.
2. Den exportierten Stylesheet-Pfad zusammen mit dem vollständigen Einstiegspunkt und CSS verwenden.
3. Zwei Ressourcen auswählen und Escape sowie die Fokusrückgabe testen.
4. Lokal bestätigen, die Auswahl ändern und prüfen, ob das alte Ergebnis ausgeblendet wird.

Bewusste Regeln für Dialogübergänge und Fokus festlegen

Der QGDS-Pfad Bootstrap verwendet Bootstrap Modal; das Schließen sollte daher dem nativen Lebenszyklus des modalen Dialogs folgen. Den Fokus nach hidden.bs.modal auf „Auswahl überprüfen“ zurücksetzen, statt eine Verzögerung zu schätzen. Wird später fade hinzugefügt, muss die Übergangszeit berücksichtigt werden: Eine sofortige Anforderung zum Schließen während des Öffnens kann ignoriert werden.

Die Überprüfungsliste beim Öffnen des Dialogs aus der aktuellen Auswahl erzeugen und eine vorherige lokale Bestätigung ungültig machen, sobald sich ein Kontrollkästchen ändert. Escape sollte die Überprüfung schließen, ohne die Auswahl zu verändern. Wenn die Kontrollkästchen getrennt von der Kartenillustration bleiben, werden konkurrierende Klickverhalten auf der gesamten Karte vermieden und jede Ressource erhält eine präzise, zugängliche Auswahlbeschriftung.

Queensland Government Designsystem Komponentenbeispiele für das Designsystem

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()});

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}}