Native USWDS 3.14.0 CSS und Akkordeon-JavaScript; explizite lokale Überschreibung mit Systemschriften und benutzerdefinierte lokale Filterung. · Implementierungsreferenz
02
USWDS-Designsystem-Designreferenz
Native Komponentenverteilung von USWDS 3.14.0. Standard-Tokens aus der offiziellen Dokumentation; Ersatzschriften in der Vorschau sind ausdrücklich gewählte lokale Anpassungen.
USWDS-Designsystem: ein konfigurierbares Foundation
Standard-Tokens sind eine Ausgangskonfiguration
USWDS trennt System-Tokens, Projekteinstellungen für das Design, Utility-Klassen und Komponenten. Die folgende Referenz hält die Standardkonfiguration des Designs aus der aktuellen Dokumentation fest. Ein Bundesprogramm kann andere Schriftrollen oder Farbaliase konfigurieren, ohne sämtliche Komponenten zu ersetzen.
Die Vorschau ist ein unabhängiger Vergleich von Fördermöglichkeiten im Forschungsbereich mit 3.14.0 CSS und Akkordeon JavaScript. Das Behördenbanner und die Markenkennzeichen sind nicht enthalten. Programmnamen und Förderphasen sind frei erfunden; die Filterung erfolgt vollständig im Browser.
Eine Abstandseinheit USWDS beträgt 8px: units(2) bedeutet 16px, während units(3) 24px bedeutet. Halb-Einheiten-Tokens ermöglichen kleinere Abstände; in der Utility-Schreibweise steht 05 für eine halbe Einheit. Eine margin-2-Utility bedeutet keinen Abstand von zwei Pixeln.
Die Skala umfasst auch benannte Breiten wie tablet und desktop. Diese Namen sind wiederverwendbare Tokens und keine Vorgabe, jede Seite bei jeder Breite neu zu gestalten. Im Vergleich wird der Inhalt mit grid-container umschlossen; die Tabelle befindet sich in einem eigenen, scrollbareren Bereich.
Eine Rolle lässt sich ändern, ohne Komponenten umzubenennen
Das standardmäßige sans-Token verweist auf Source Sans Pro, serif auf Merriweather. Die Rollen body und UI verweisen auf sans, heading auf serif. Die Funktion family("body") löst diese Zuordnungskette auf. Dokumentieren Sie ein Projekt so, dass die semantische Rolle von der letztlich verwendeten Schriftfamilie unterschieden wird.
Die lokale Vorschau verwendet ausdrücklich Helvetica/Arial für den Fließtext und Georgia für Überschriften, sodass keine Schriftarten heruntergeladen werden müssen. Diese Überschreibung dient nur der Demonstration und entspricht nicht der standardmäßigen Schriftgestaltung von USWDS. Für einen Produktionsbuild sollten diese Rollen über die Einstellungen von uswds-core konfiguriert oder die bereitgestellten Schriftdateien kopiert werden.
Der standardmäßige Alias primary verweist auf blue-60v, #005ea2. primary-dark verweist auf blue-warm-70v, #1a4480; ink verweist auf gray-90, #1b1b1b. Dies sind Theme-Werte und keine Aussage, dass jede USWDS-Website dieselbe Markenfarbe verwenden muss.
Verwenden Sie den semantischen Alias für eine Aktion oder die Gestaltung einer Überschrift und ein Systemfarb-Token nur dann, wenn dies der tatsächlichen Designentscheidung entspricht. Einen primary-Alias in den Einstellungen zu ersetzen, ist kontrollierter, als jede übereinstimmende Hexadezimalzeichenfolge im kompilierten CSS zu ersetzen.
Vergleichbare Fördermöglichkeiten als Tabellenzeilen im USWDS-Designsystem
Die Tabelle semantisch korrekt gestalten
Das Beispiel verwendet eine Tabellenbeschriftung, Spaltenüberschriften mit scope="col" und den Namen einer Fördermöglichkeit mit scope="row". Es handelt sich um eine Tabelle, weil Leserinnen und Leser in mehreren Datensätzen dieselben Themen- und Phasenfelder vergleichen. Diese Beziehungen bleiben auch beim Scrollen des Bereichs erhalten.
Der scrollbarere Container hat tabindex="0", damit Tastaturnutzende ihn fokussieren können. So bleiben umfangreiche Daten auf diesen Bereich beschränkt, statt das gesamte Dokument zu verbreitern. Die Vorschau enthält einfache Textzellen; für fehlende Programmdaten wäre ein expliziter Inhaltszustand erforderlich, nicht eine erfundene Zahl.
USWDS unterstützt sortierbare Spaltenüberschriften über data-sortable. Eine sortierbare Tabelle benötigt außerdem einen usa-table__announcement-region mit aria-live="polite". Bei numerischen Anzeigen kann data-sort-value erforderlich sein, damit ein formatierter Betrag als Zahl statt alphabetisch sortiert wird. Der aktuelle Vergleich aktiviert die Sortierung nicht, da die Demonstration den Filter nach Themen auf drei Zeilen beschränkt.
Anforderungen als Offenlegungsbereiche im USWDS-Designsystem
Die IDs von Schaltfläche und Panel verknüpfen
Jede usa-accordion__button hat ein aria-controls-Attribut, das auf das zugehörige usa-accordion__content verweist. Die native Komponente von JavaScript aktualisiert aria-expanded und die Sichtbarkeit. Der Modifier für Rahmen ändert die Umrandung; mit data-allow-multiple können mehrere Abschnitte gleichzeitig geöffnet bleiben.
Eine Überschrift enthält die Schaltfläche, damit die Gliederung des Inhalts verständlich bleibt. Anforderungen, die bei der Entscheidung über die Relevanz eines Programms helfen, sollten oberhalb des Offenlegungsbereichs sichtbar bleiben. Die Panels enthalten hier zusätzliche Vorbereitungshinweise und eine Erläuterung zum fiktiven Datensatz.
Die Überschrift beschreibt das Thema des Panels.
Die Schaltfläche enthält den Status des Offenlegungsbereichs und die ID des Zielbereichs.
Das Panel behält dieselbe ID, wenn sich seine Sichtbarkeit ändert.
Den gesamten Asset-Baum des USWDS-Designsystems installieren
Pfade beibehalten, die vom kompilierten CSS verwendet werden
Installieren Sie @uswds/[email protected] und kopieren Sie das Verzeichnis dist, ohne css, js, img und fonts in einem einzigen Ordner zusammenzuführen. Das Stylesheet verwendet relative Pfade zu Symbolen und Schriftarten. Andernfalls kann eine Seite teilweise korrekt aussehen, während Symbole für Offenlegungsbereiche oder Schriftarten fehlen.
Laden Sie uswds-init.min.js im head, anschließend das Stylesheet und uswds.min.js nach dem Markup des body. Die gebündelte Bibliothek erweitert das Akkordeon um Interaktivität. Das Suchfeld und der Themenfilter weiter unten verwenden benutzerdefinierte Anwendungslogik; sie greifen nicht auf einen entfernten Suchdienst zu.
Die nativen Stile für label, input, select und button stellen die Bedienelemente bereit; die Anwendung vergleicht die Suchanfrage und das ausgewählte Thema mit den drei fiktiven Datensätzen. Die Ergebnisanzahl wird in einer höflichen Live-Region angezeigt. Gibt es keine Treffer, erscheinen eine Erklärung und eine Schaltfläche zum Zurücksetzen; die eingegebene Suchanfrage bleibt dabei erhalten.
Die Demonstration unterscheidet bewusst zwischen dem Entdecken einer Fördermöglichkeit und dem Stellen eines Antrags. Das Öffnen von Vorbereitungsinhalten legt keinen Entwurf an und markiert keine Anforderung als erfüllt. Für einen echten Förderantrag wären eigene Programmrichtlinien, Authentifizierung und ein dauerhaft gespeicherter Transaktionsstatus erforderlich.
Nach „Umwelt“ filtern und die verbleibende Fördermöglichkeit prüfen.
Nach einem Begriff ohne Treffer suchen und „Filter löschen“ verwenden.
Beide Vorbereitungsbereiche öffnen und prüfen, ob ihr erweiterter Status unabhängig voneinander ist.
Ein nativer Offenlegungsbereich von USWDS mit expliziter Verknüpfung zwischen Schaltfläche und Panel.
html
<div class="usa-accordion usa-accordion--bordered" data-allow-multiple>
<h3 class="usa-accordion__heading">
<button type="button" class="usa-accordion__button"
aria-expanded="false" aria-controls="preparation">Before you prepare a draft</button>
</h3>
<div id="preparation" class="usa-accordion__content usa-prose" hidden>
<p>This fictional opportunity asks for a project summary and a named contact.</p>
</div>
</div>
Das vollständige Dokument enthält Layout, Steuerelemente und Initialisierung. Entpacken Sie das verknüpfte Beispielarchiv, um die exakten relativen Vendor-Assets zu erhalten, und stellen Sie es anschließend über HTTP bereit.
html
<!doctype html><html lang="en"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>Research opportunities — OpenDesign study</title><script src="vendor/uswds-3.14.0/uswds-init.min.js"></script><link rel="stylesheet" href="vendor/uswds-3.14.0/css/uswds.min.css"><style>body,body *,body *:before,body *:after{font-family:Helvetica,Arial,sans-serif!important}h1,h2{font-family:Georgia,serif!important}body{color:#1b1b1b;margin:0}[hidden]{display:none!important}.study-head{background:#d9e8f6;padding:16px 0;border-bottom:4px solid #005ea2}.study-head p{margin:0}.study-form{display:flex;gap:24px;align-items:end;flex-wrap:wrap}.study-form>div{flex:1;min-width:200px}.study-form .usa-input,.study-form .usa-select{max-width:none}.usa-table{width:100%}.study-main{padding-top:32px;padding-bottom:48px}.usa-table th{min-width:120px}#count{margin-top:24px}.study-note{border-top:1px solid #a9aeb1;margin-top:32px;padding-top:16px;line-height:1.5}</style></head><body><header class="study-head"><div class="grid-container"><p><strong>OpenDesign · USWDS component study</strong><br>Fictional research records. No application is submitted.</p></div></header><main class="grid-container study-main"><h1>Research opportunities</h1><p class="usa-intro">Compare topics and read the preparation notes.</p><form class="study-form" id="filters"><div><label class="usa-label" for="query">Search opportunity names</label><input class="usa-input" id="query" type="search"></div><div><label class="usa-label" for="topic">Topic</label><select class="usa-select" id="topic"><option value="">All topics</option><option>Environment</option><option>Transport</option><option>Education</option></select></div><button type="submit" class="usa-button">Apply filters</button><button type="button" class="usa-button usa-button--outline" id="clear">Clear filters</button></form><p id="count" aria-live="polite">3 opportunities</p><div class="usa-table-container--scrollable" tabindex="0"><table class="usa-table usa-table--borderless"><caption>Illustrative research opportunities</caption><thead><tr><th scope="col">Opportunity</th><th scope="col">Topic</th><th scope="col">Stage</th></tr></thead><tbody><tr data-topic="Environment"><th scope="row">Community water study</th><td>Environment</td><td>Example draft</td></tr><tr data-topic="Transport"><th scope="row">Accessible transport research</th><td>Transport</td><td>Example review</td></tr><tr data-topic="Education"><th scope="row">Local skills survey</th><td>Education</td><td>Example draft</td></tr></tbody></table></div><p id="empty" hidden>No matching opportunities. Broaden the topic or clear the filters.</p><h2>Preparation notes</h2><div class="usa-accordion usa-accordion--bordered" data-allow-multiple>
<h3 class="usa-accordion__heading">
<button type="button" class="usa-accordion__button"
aria-expanded="false" aria-controls="preparation">Before you prepare a draft</button>
</h3>
<div id="preparation" class="usa-accordion__content usa-prose" hidden>
<p>This fictional opportunity asks for a project summary and a named contact.</p>
</div>
<h3 class="usa-accordion__heading"><button type="button" class="usa-accordion__button" aria-expanded="false" aria-controls="scope">What the example data means</button></h3><div id="scope" class="usa-accordion__content usa-prose" hidden><p>Draft and review are demonstration stages. They do not indicate an actual funding programme or eligibility decision.</p></div>
</div><p class="study-note">USWDS 3.14.0 native accordion and styles, with local Helvetica/Georgia font overrides. Filters are original application code. <a href="vendor/uswds-3.14.0/LICENSE.md">Distribution licence</a>.</p></main><script src="vendor/uswds-3.14.0/uswds.min.js"></script><script>const rows=[...document.querySelectorAll('tbody tr')],q=document.getElementById('query'),t=document.getElementById('topic');function filter(){let n=0;for(const row of rows){const show=(!t.value||row.dataset.topic===t.value)&&row.firstElementChild.textContent.toLowerCase().includes(q.value.trim().toLowerCase());row.hidden=!show;if(show)n++}document.getElementById('count').textContent=n+' '+(n===1?'opportunity':'opportunities');document.getElementById('empty').hidden=n!==0;}document.getElementById('filters').addEventListener('submit',e=>{e.preventDefault();filter()});document.getElementById('clear').addEventListener('click',()=>{q.value='';t.value='';filter();q.focus()});</script></body></html>
Laden Sie das vollständige Beispiel unter Sources herunter. Die README enthält den genauen lokalen Startbefehl.
Behalten Sie die Vendor-Pfade relativ zu diesem Dokument bei. Das Archiv enthält alle Assets, die in dieser Vorschau verwendet werden.
04
Agenteneinrichtung für das USWDS-Designsystem
Ausgangspunkt für die Implementierung
Behalten Sie die Verzeichnisstruktur von dist bei, damit CSS Schriftarten und Symbole auflösen kann. Dies ist die Installationsvariante mit vorkompilierten Dateien; für die Anpassung des Themes ist ein Sass-Build erforderlich. Die vollständige ZIP-Datei mit dem funktionierenden Beispiel unter „Quellen“ enthält außerdem die exakten Abhängigkeiten der Vorschau und das vollständige Dokument. Entpacken Sie sie, führen Sie in diesem Verzeichnis python3 -m http.server 8080 aus und öffnen Sie anschließend http://localhost:8080/uswds.html. Öffnen Sie Beispiele mit Modulen nicht über file://.
sh / html
npm install @uswds/[email protected]
mkdir -p public/assets/uswds
cp -R node_modules/@uswds/uswds/dist public/assets/uswds/
<!-- HTML head -->
<script src="/assets/uswds/dist/js/uswds-init.min.js"></script>
<link rel="stylesheet" href="/assets/uswds/dist/css/uswds.min.css">
<!-- After the component markup, before closing body -->
<script src="/assets/uswds/dist/js/uswds.min.js"></script>
Ein Prompt für dein Projekt
Agenten-Prompt
Erstellen Sie mit USWDS 3.14.0 einen fiktiven Vergleich von Forschungsmöglichkeiten. Laden Sie den vollständigen dist-Asset-Baum, das Initialisierungsskript, das Komponenten-Stylesheet und JavaScript. Stellen Sie vergleichbare Datensätze in einer semantischen Tabelle mit Beschriftung und Spaltenüberschriften dar. Ergänzen Sie eine beschriftete Suche und einen Kategorienfilter, die Trefferanzahl, einen hilfreichen Zustand ohne Treffer sowie eine Zurücksetzen-Funktion. Verwenden Sie native Akkordeons für zusätzliche Anforderungen, während die wesentlichen Vergleichsinformationen sichtbar bleiben. Behalten Sie die dokumentierten Abstände und Zuordnungen der Theme-Rollen bei und kennzeichnen Sie die Überschreibung der Systemschrift. Machen Sie aus diesem Verzeichnis keinen Einreichungsprozess und erwecken Sie nicht den Eindruck, es handle sich um echte Förderfähigkeit oder Förderzusagen.
05
USWDS Designsystem: Quellen und Umfang
Unabhängige Komponentenstudie mit USWDS 3.14.0. Fiktive Fördermöglichkeiten, kein Anspruch auf eine staatliche Identität und kein Anwendungsendpunkt. Helvetica/Arial und Georgia sind lokale Ersatzschriften, nicht die standardmäßigen USWDS-Schriftdateien.
