Alberta Designsystem.

Webkomponenten und Versionsgrenzen von Alberta Designsystem

Ausgangspunkt ist die tatsächlich ausgeführte Implementierung

Dieses Beispiel verwendet @abgov/web-components 3.0.0. Der Import des JavaScript registriert die benutzerdefinierten Elemente; der Import von index.css stellt die globale Token-Ebene bereit. Das rohe HTML API verwendet Elemente mit dem Präfix goa; Beispiele mit React verwenden Goab-Wrapper mit einer anderen Ereignis-API. Übernimm onChange-Props aus React nicht direkt für die rohen benutzerdefinierten Elemente.

Paketversionen und Designversionen unterscheiden

Eine Paketversion und eine Version für das Komponenten-Styling sind nicht dasselbe. Für manche Steuerelemente ist ein unabhängiges Versionsattribut dokumentiert. Dieses Beispiel behält die Standardwerte des festgelegten Pakets bei, statt unbemerkt eine Styling-Version zu wechseln und gleichzeitig auf andere Token-Werte zu verweisen. Die Tabelle dokumentiert die tatsächlichen Exporte des hellen Themes, die in diesem Build verwendet werden.

Alberta Designsystem: Rollen, Rhythmus und Typografie

Mit Farbe den Status vermitteln

Die primäre Aktion und der Fortschrittsakzent verwenden die Rolle interactive-default. Bei einer ungültigen Überprüfung werden ein Hinweis auf das Problem und eine hilfreiche Anweisung angezeigt; für eine lokal abgeschlossene Überprüfung wird eine unterstützende Fläche in Erfolgsfarbe verwendet. Die Erfolgsfarbe beschreibt den Status der lokalen Überprüfung, nicht eine Einreichung bei einem Behördendienst. Textbeschriftungen und die Zahl vermitteln dieselbe Information, ohne sich allein auf Farbton zu stützen.

Die Grenzen bei der Schriftverwendung dokumentieren

Die veröffentlichte Schriftfamilie beginnt mit Acumin, und das Stylesheet enthält extern gehostete Schriftdeklarationen. Die Vorschau verwendet ausdrücklich Arial als Fallback und entfernt diese externen Schriftanfragen; Acumin wird nicht weitergegeben. In der Token-Referenz bleibt der tatsächliche Familienname erhalten, damit ein autorisierter Dienst seine genehmigten Markenschriften laden kann. Prüfe den Zeilenumbruch erneut, wenn du vom Fallback zu einer lizenzierten Schrift wechselst.

Alberta Designsystem: Beschriftungen und Beschreibungen von Kontrollkästchen

Für unabhängige Aufgaben einzelne Auswahlmöglichkeiten verwenden

Vier native goa-checkbox-Steuerelemente bilden Vorbereitungsschritte ab, die in beliebiger Reihenfolge überprüft werden können. Jedes hat einen eindeutigen Namen, einen sichtbaren Text und eine Beschreibung, die den Zweck erläutert. Optionsfelder würden eine einzelne Auswahl nahelegen und diese Aufgabe daher falsch darstellen. In einem echten Dienst müssen die fiktiven Vorbereitungsinhalte durch sorgfältig recherchierte Anweisungen ersetzt werden.

• Gib jedem Kontrollkästchen einen stabilen, eindeutigen Namen.
• Halte die sichtbare Beschriftung knapp und die Beschreibung aussagekräftig.
• Verwende einzelne Kontrollkästchen nur dann, wenn mehrere Auswahlen sinnvoll sind.

Die Nutzlast des benutzerdefinierten Ereignisses auslesen

Die rohe Webkomponente löst _change mit name, checked und value in event.detail aus. Die Anwendung verwendet den booleschen Wert checked, um ein Set ausgewählter Indizes zu aktualisieren. Sie leitet den Status weder aus dem Beschriftungstext ab noch erfordert sie einen Klick auf ein winziges internes Eingabefeld. Ein Klick auf die sichtbare Beschriftung und die Auswahl per Tastatur führen daher zum selben Zustandswechsel.

Alberta Designsystem: Fortschritt und Überprüfungsstatus

Den Fortschritt aus der Auswahl ableiten

Die Anzahl und das native Fortschrittselement HTML werden aus derselben Set abgeleitet. Werden zwei Elemente ausgewählt, zeigt die Anzeige zwei von vier an. Beim Löschen der Auswahlen werden beide Anzeigen auf null zurückgesetzt. Das Fortschrittselement hat einen zugänglichen Namen; der danebenstehende Statustext gibt die Anzahl ausdrücklich an. Es gibt keinen simulierten Upload, keine Netzwerkanfrage und keinen Abschlusstimer.

Alte Zusammenfassungen nach einer Bearbeitung verwerfen

Alberta Designsystem Responsive Checklisten-Komposition

Aufgabe und Kontext gut lesbar halten

Im Desktop-Layout steht die Checkliste neben einem ergänzenden Fortschrittsbereich. Bei schmaler Darstellung folgt dieser Bereich den Steuerelementen in der Dokumentreihenfolge. Die Aufgabenbeschriftungen bleiben gut lesbar, und Beschreibungen werden darunter natürlich umgebrochen. Die blaue Linie im Seitenbereich dient als dezenter Wegweiser und schafft keine zusätzliche konkurrierende Aktion.

Interaktionsziele erhalten

Die Komponentenbibliothek stellt Interaktionsstile für Kontrollkästchen und Schaltflächen bereit. Die Anwendung CSS steuert Abstände und das umgebende Raster, ohne die nativen Interaktionsflächen zu ersetzen. Auf kleinen Bildschirmen können die beiden Aktionen umbrechen. „Überprüfen“ ist die primäre Aktion; „Auswahl löschen“ ist visuell nachrangig und gibt sich nicht als nächster Schritt einer echten Anwendung aus.

Alberta Designsystem Vollständige Checklistenimplementierung

Vollständigen Quellcode ausführen

Erstellen Sie ein Vite-Vanilla-Projekt, installieren Sie das festgelegte web-components-Paket und speichern Sie den bereitgestellten Einstiegspunkt sowie CSS. Behalten Sie das Root-Mount-Element bei. JavaScript enthält alle vier Aufgaben, die nativen Ereignisbindungen, die abgeleitete Anzahl sowie die Übergänge zum Überprüfen und Zurücksetzen. Ein Konto, ein privater Endpunkt oder ein externer Datensatz ist nicht erforderlich.

1. Installieren Sie @abgov/web-components 3.0.0 und importieren Sie JavaScript sowie index.css.
2. Speichern Sie den vollständigen Einstiegspunkt und alberta.css mit dem Root-Mount-Element.
3. Wählen Sie mehrere Aufgaben aus und prüfen Sie den abgeleiteten Fortschritt.
4. Auswahl überprüfen, bearbeiten und anschließend alle nativen Auswahlen löschen.

Komponentenereignisse von der Checklistenlogik trennen

Verwenden Sie event.detail.checked aus dem unveränderten _change-Ereignis als maßgebliche Quelle für die Auswahl. Props des React-Wrappers und unveränderte goa-checkbox-Ereignisse sind unterschiedliche Schnittstellen. Wird ein Handler ohne Anpassung seiner Nutzdaten zwischen ihnen übernommen, kann die Fortschrittsanzeige von den sichtbaren Kontrollkästchen abweichen.

Die Mindestanforderung von einem Element in der Checkliste ist Anwendungslogik und keine integrierte Regel für Kontrollkästchen. Leiten Sie Anzahl, Fortschrittswert und Überprüfungstext aus einer einzigen Auswahl-Set ab. Setzen Sie beim Löschen der Auswahlen neben der Set auch die checked-Eigenschaft jedes benutzerdefinierten Elements zurück. Bei einer geänderten Auswahl sollte die alte Zusammenfassung sofort verworfen werden, damit sie nicht mehr die vorherige Auswahl beschreibt. Ein echter Vorbereitungsdienst kann unvollständige Checklisten zulassen. Legen Sie diese Regel fest, bevor Sie den Fortschritt zur Voraussetzung machen.

Alberta Designsystem Beispiele für Design-System-Komponenten

import '@abgov/web-components';
import '@abgov/web-components/index.css';
import './alberta.css';
document.getElementById('root').innerHTML=`<main><p class="eyebrow">ALBERTA DESIGN SYSTEM / COMPONENT STUDY</p><h1>Prepare a submission</h1><p class="lead">Track an original sample checklist. These preparation steps are illustrative, not eligibility rules for a government program.</p><div class="workspace"><section aria-labelledby="tasks-heading"><h2 id="tasks-heading">Your preparation checklist</h2><p>Check each item when you have reviewed it.</p><div id="tasks"></div><div class="actions"><goa-button id="review">Review checklist</goa-button><goa-button id="reset" type="tertiary">Clear selections</goa-button></div><p id="error" role="alert" hidden>Select at least one item before reviewing.</p><section id="result" hidden tabindex="-1" aria-labelledby="result-heading"><h3 id="result-heading">Local review</h3><p id="result-text"></p></section></section><aside><p class="eyebrow">YOUR PROGRESS</p><strong id="total">0 of 4</strong><progress id="progress" value="0" max="4" aria-label="Reviewed preparation items"></progress><p id="status" role="status">No items reviewed yet.</p><h3>What happens next</h3><p>Your selections stay only in this page. Review summarizes your progress; it does not submit an application.</p><ul><li>Use the real service’s current instructions.</li><li>Do not enter personal information in a public example.</li><li>Recheck the summary after changing a selection.</li></ul></aside></div></main>`;
const labels=['Read the service instructions','Identify questions to ask','Check your own supporting information','Choose a time to complete the task'];const selected=new Set();const $=id=>document.getElementById(id);const controls=labels.map((text,i)=>{const el=document.createElement('goa-checkbox');el.setAttribute('name','step-'+i);el.setAttribute('text',text);el.setAttribute('description',['Understand the actual task before collecting information.','Record anything that needs clarification from the service.','Use the real service’s requirements, not this sample list.','Leave enough time to review the information you provide.'][i]);el.addEventListener('_change',e=>{e.detail.checked?selected.add(i):selected.delete(i);update()});$('tasks').append(el);return el});function update(){$('total').textContent=selected.size+' of 4';$('progress').value=selected.size;$('status').textContent=selected.size===4?'All sample items reviewed.':selected.size+' sample items reviewed.';$('result').hidden=true;$('error').hidden=true}$('review').addEventListener('_click',()=>{if(!selected.size){$('error').hidden=false;controls[0].shadowRoot.querySelector('input')?.focus();return}$('result-text').textContent=selected.size+' reviewed: '+[...selected].sort().map(i=>labels[i]).join('; ')+'. This is a local summary only.';$('result').hidden=false;$('result').focus()});$('reset').addEventListener('_click',()=>{selected.clear();controls.forEach(el=>el.setAttribute('checked','false'));update()});

main{padding:32px;max-width:1200px;margin:auto}.eyebrow{font-size:14px;letter-spacing:.06em;font-weight:700}h1{margin:16px 0 24px}.lead{max-width:65ch}.workspace{display:grid;grid-template-columns:1.5fr 1fr;gap:48px;margin-top:40px}h2{margin-top:0}goa-checkbox{display:block;margin-bottom:24px}.actions{display:flex;flex-wrap:wrap;gap:16px;margin-top:32px}aside{padding:24px;background:var(--goa-color-greyscale-100);border-top:4px solid var(--goa-color-interactive-default);align-self:start}aside strong{display:block;font:var(--goa-typography-heading-l)}progress{display:block;width:100%;height:12px;margin:24px 0;accent-color:var(--goa-color-interactive-default)}aside li{margin:12px 0}#error{margin-top:24px;color:var(--goa-color-emergency-default)}#result{margin-top:24px;padding:24px;border-left:4px solid var(--goa-color-success-default);background:var(--goa-color-success-light)}#result h3{margin-top:0}[hidden]{display:none!important}@media(max-width:760px){main{padding:20px}.workspace{grid-template-columns:1fr;gap:32px}h1{font-size:32px;line-height:1.2}}

/* Public specimen font fallback; load approved Acumin only where licensed. */
:root{--goa-font-family-sans:Arial,sans-serif;--goa-font-family-mono:monospace;}