Implementieren Sie CMS Core mit versionierten Theme-Variablen, den tatsächlichen APIs der Review-Komponente und einem funktionsfähigen Bearbeitungs- und Prüfablauf, der die Antworten und den Fokus der Nutzenden beibehält.
Natives CMS Core 18.1.0 CSS und Theme. Von der Anwendung verwalteter Bearbeitungsstatus und JavaScript; Arial als Fallback, keine React-Laufzeitumgebung und keine externe Übermittlung. · Implementierungsreferenz
02
CMS Designsystem-Designreferenz
CMS Core 18.1.0 veröffentlicht core-theme.css und die Komponente CSS. Bei Abweichungen zwischen allgemeiner Dokumentation und versioniertem Artefakt hat Letzteres Vorrang. Die Vorschau verwendet Arial als Fallback und einen anwendungsspezifischen Container mit 48rem.
CMS Designsystem Core oder ein untergeordnetes Theme auswählen
Das Paket umfasst eine Theme-Familie und ist kein einzelnes gebrandetes Design
CMS Core bietet gemeinsame Grundlagen für Benutzeroberflächen und separate untergeordnete Systeme für Healthcare.gov, Medicare.gov und CMS.gov. Diese Referenz legt @cmsgov/design-system 18.1.0 und dessen core-theme.css fest. Eine Farbe, ein Logo oder eine Komponente, die in einem untergeordneten Theme verfügbar ist, gehört nicht automatisch zu den Regeln von Core. Das Beispiel verwendet bewusst einen neutralen Workflow für Benachrichtigungseinstellungen und lässt offizielle Regierungsbanner und Identitätskennzeichen weg.
Es gibt Integrationswege für React, Preact und Web Components sowie eine manuelle Integration mit HTML/CSS. Die Dokumentation empfiehlt JavaScript-Komponenten, wenn ihr integriertes Verhalten nützlich ist; die Web-Component-Sammlung ist eine Teilmenge. Unser eigenständiges Beispiel verwendet echtes Core-CSS mit anwendungsseitigem JavaScript für Bearbeiten, Speichern und Abbrechen. Es wird nicht behauptet, dass CSS Validierung, Routing oder Persistenz implementiert.
index.css definiert die Komponentenregeln, und core-theme.css stellt deren Variablen bereit. Wird das Theme weggelassen, können gültige Klassennamen mit nicht aufgelösten Werten zurückbleiben. Umgekehrt führt der Import eines Medicare-Themes bei gleichzeitiger Beschreibung der Core-Typografie zu einem irreführenden Ergebnis, selbst wenn die Seite gerendert wird. Die Einrichtung bindet beide Assets aus derselben Version 18.1.0 ein.
Das versionierte Theme ist die Quelle der Zahlenwerte in diesem Leitfaden. --color-base ist beispielsweise #262626, obwohl im allgemeinen Typografieabschnitt weiterhin #333 erwähnt wird. Der Wert von --grid-gutter-width im Theme entspricht --spacer-4 (32px), während --grid-form-gutter-width --spacer-2 (16px) entspricht. Ein allgemeiner Satz zu 16px breiten Spaltenabständen sollte nicht auf jede Rastervariante übertragen werden. Diese Unterschiede sind wichtig, wenn ein echtes Layout nachgebildet wird.
Eine Schriftfamilie, explizite Schriftgrößen nach Rolle
Core verwendet Open Sans für Überschriften und Fließtext. Die Fallback-Kette im Theme 18.1.0 führt über Inter, Roboto, Helvetica Neue, Arial Nova, Nimbus Sans und Arial bis zu sans-serif. Das lokale Beispiel legt Arial ausdrücklich fest, damit keine externen Schriftdateien angefordert werden; daher weichen die Schriftmetriken von der vollständigen offiziellen Typografie ab.
Die Basisschriftgröße des Fließtexts beträgt 1rem bei einer Zeilenhöhe von 1.5. Die Größenvariablen umfassen bei einer Root-Größe von 16px 14, 16, 18, 21 und 24px, gefolgt von größeren responsiven Rollen: 3xl ist auf Mobilgeräten 30px und sonst 36px; 4xl ist auf Mobilgeräten 36px und sonst 48px; 5xl ist auf Mobilgeräten 36px, auf Tablets 48px und in der größten Rolle 60px. Dies sind Theme-Werte und keine Aufforderung, die größte Größe für jeden Seitentitel zu verwenden. Verwenden Sie semantische Überschriften und die passende Zuordnung über Utilities oder ds-content.
--spacer-1 bis --spacer-7 entsprechen 8–56px in Schritten von acht Pixeln. --spacer-half beträgt 4px und --spacer-none null. Eine Klasse wie ds-u-margin--2 steht also für 16px, nicht für 2rem. Die native CSS der Prüfzeile bietet 16px vertikales Padding und einen unteren Rahmen von 2px; das umgebende Formular benötigt nicht für jede Antwort eine zusätzliche gepolsterte Karte.
Die maximale Breite für Websites in Core beträgt 1104px; die Seitenränder betragen im versionierten Theme 3rem und auf Mobilgeräten 1.5rem. Das Beispiel verwendet für zwei kurze Prüfzeilen eine schmalere Lesebreite von 48rem. Dies ist eine Anwendungsbreite und kein neuer CMS-Token.
Beschriftung, Wert und kontextbezieltes Bearbeitungsziel
Review umfasst ein einzelnes Element, das überprüft werden kann. Die Überschrift ist standardmäßig h3, kann mit headingLevel festgelegt werden und wird von untergeordneten Inhalten gefolgt, die den aktuellen Wert darstellen. editHref gibt ein Ziel an; ohne diesen Wert wird kein Bearbeitungslink angezeigt. editAriaLabel sorgt für einen eindeutigen zugänglichen Namen, wenn sich der sichtbare Link Bearbeiten wiederholt. Die Typdeklaration von 18.1.0 enthält außerdem editText, onEditClick und editContent. Dabei ersetzt ein benutzerdefiniertes editContent den Standardlink.
Das Beispiel mit React verwendet tatsächliche Props, die anhand der veröffentlichten Deklaration überprüft wurden. Die angegebenen Pfade sind beispielhafte Anwendungsrouten, die von der einbindenden Anwendung implementiert werden müssen. Die native Alternative mit CSS zeigt die Struktur ds-c-review, ds-c-review__content und ds-c-review__heading; auch hier muss die Anwendung Navigation und Aktualisierungen verwalten.
CMS Designsystem Einzelantwort oder Abschnitt bearbeiten
Den Korrekturpfad vorhersehbar gestalten
Das CMS-Muster zur Formularprüfung unterscheidet zwischen dem Bearbeiten einer einzelnen Antwort und dem Bearbeiten eines ganzen Abschnitts. Unabhängige Einstellungen für Benachrichtigungsformat und Sprache eignen sich für die Bearbeitung einzelner Antworten. Zusammenhängende Antworten, etwa Angaben zu Haushaltsmitgliedern und ihren Beziehungen untereinander, müssen möglicherweise gemeinsam in einem Abschnitt bearbeitet werden, damit die Anwendung ihre Konsistenz zusammen überprüfen kann. Die offiziellen Richtlinien weisen ausdrücklich darauf hin, dass eine Bearbeitungsoption für einen ganzen Abschnitt neben dessen Überschrift nicht von der Review-Komponente selbst implementiert wird.
In der Vorschau wird für die ausgewählte Zeile ein fokussiertes Fieldset geöffnet. Beim Speichern wird nur dieser Wert aktualisiert, und der Fokus kehrt zur auslösenden Schaltfläche Bearbeiten zurück; Abbrechen verwirft den Entwurf. Während der Bearbeitung bleibt die sichtbare Antwort unverändert. Ein lokaler Status meldet die tatsächliche Änderung, statt allein deshalb einen Erfolg anzukündigen, weil das Bearbeitungsformular angezeigt wurde.
Verwenden Sie bei Eingabe und Prüfung dieselben Fragen und dieselbe Reihenfolge.
Geben Sie jeder Zeile einen kontextbezogenen Bearbeitungsnamen, auch wenn der sichtbare Link Bearbeiten lautet.
Halten Sie die Abschnittsbearbeitung außerhalb der Einzelzeilenkomponente, wenn zusammengehörige Antworten gemeinsam geändert werden müssen.
CMS Designsystem Prüfung, Abschluss und Wahrheitsgehalt
Eine Prüfung ist keine Einreichungsbestätigung
Review eignet sich für bearbeitbare Formularantworten, nicht als Ersatz für Suchergebnisse. Bei einem echten Einreichungsablauf sieht das Muster nach der Prüfung eine abschließende Aktion zum Absenden vor. Diese Aktion darf erst dann eine Eingangsbestätigung anzeigen, wenn tatsächlich ein Ergebnis vom Backend vorliegt. Das Beispiel bietet stattdessen die Option Lokale Prüfung abschließen und weist ausdrücklich darauf hin, dass nichts übermittelt oder gespeichert wird.
Core unterscheidet zwischen Primärblau #0071bc, Fehlerrot #e31c3d, Erfolgsgrün #12890e und Trennliniengrau #d9d9d9. Eine gespeicherte Auswahl wird zusätzlich zur Farbe durch Text gekennzeichnet. Der Fokus verwendet die hellen und dunklen Fokusreferenzen des Themes. Entfernen Sie den Indikator nicht, wenn Sie „Bearbeiten“ als minimales Steuerelement gestalten. Der Abschlussstatus ist per Tastatur erreichbar und blendet die Prüfzeilen nicht aus.
CMS Designsystem sicher installieren und erweitern
Ein vollständiger CSS-Pfad und ein echter Komponentenpfad
Installieren Sie das festgelegte Paket und importieren Sie css/index.css sowie css/core-theme.css über die Paket-Exports. React-Konsumenten importieren Review aus dem Paketstammverzeichnis; für Preact-Konsumenten gibt es einen /preact-Einstiegspunkt. Für das Beispiel ist keine Sass-Kompilierung erforderlich. Wenn Sie statische CSS kopieren, behalten Sie die relativen Pfade zu Schrift- und Bilddateien bei oder wählen Sie ausdrücklich eine unterstützte Alternative wie in diesem Beispiel.
Der CMS-Namensraum unterscheidet zwischen Layouts mit ds-l-, Komponenten mit ds-c- und Hilfsklassen mit ds-u-. Anwendungsklassen sollten nicht so tun, als wären sie undokumentierte offizielle Komponenten. In der Vorschau sind die Leseansicht und der Inline-Editor lokal zusammengesetzt; für die Prüfzeile und Schaltflächen werden die bereitgestellten Styles verwendet.
Laden Sie die passende Core-Komponente und das Theme CSS und rendern Sie anschließend die beiden Prüfzeilen.
Verbinden Sie jede Bearbeitungsaktion mit einem kontrollierten Editor. Stellen Sie nach dem Speichern und Abbrechen den Fokus wieder her.
Testen Sie geänderte Werte, verworfene Entwürfe und den lokalen Abschlussstatus bei Desktop- und Mobilbreite.
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>Notice preferences — CMS Core specimen</title><link rel="stylesheet" href="vendor/cms-18.1.0/index.css"><link rel="stylesheet" href="vendor/cms-18.1.0/core-theme.css"><style>body,body *,body *::before,body *::after{font-family:Arial,sans-serif!important}body{margin:0;border-top:8px solid #0071bc}.shell{max-width:48rem;margin:auto;padding:32px 24px}h1{font-size:32px;line-height:1.3;margin:16px 0 24px}h2{font-size:24px;margin:32px 0 16px}.intro{margin-bottom:32px}.ds-c-review__content p{margin:8px 0}.edit{align-self:flex-start;min-width:48px;border:0;background:none;color:#0071bc;text-decoration:underline;font-size:16px;padding:4px;cursor:pointer}.editor{margin:24px 0;padding:24px;background:#e6f1f8;border-left:4px solid #0071bc}fieldset{padding:0;border:0;margin:0}legend{font-size:20px;font-weight:700;margin-bottom:16px}.choice{display:flex;align-items:center;gap:12px;margin:16px 0}.choice input{width:20px;height:20px;accent-color:#0071bc}.actions{display:flex;flex-wrap:wrap;gap:24px;margin-top:24px}footer{margin-top:40px;padding-top:24px;border-top:1px solid #d9d9d9}#status{margin-top:24px;font-weight:bold}button:focus-visible,input:focus-visible{outline:3px solid #bd13b8;outline-offset:3px}[hidden]{display:none!important}@media(max-width:543px){.editor{padding:16px}.actions{flex-direction:column;align-items:flex-start}}</style></head><body><main class="shell"><p>CMS Core component example</p><h1>Review your notice preferences</h1><p class="intro">Check these fictional preferences before completing the local review. This example does not collect health information or contact details.</p><section aria-labelledby="preferences"><h2 id="preferences">Notice preferences</h2><div class="ds-c-review"><div class="ds-c-review__content"><h3 class="ds-c-review__heading">Notice format</h3><p id="format-value">Standard print</p></div><button class="edit" data-field="format" aria-label="Edit notice format">Edit</button></div><div class="ds-c-review"><div class="ds-c-review__content"><h3 class="ds-c-review__heading">Preferred language</h3><p id="language-value">English</p></div><button class="edit" data-field="language" aria-label="Edit preferred language">Edit</button></div></section><form class="editor" id="editor" hidden><fieldset><legend id="legend"></legend><div id="choices"></div></fieldset><div class="actions"><button class="ds-c-button ds-c-button--solid" type="submit">Save preference</button><button class="ds-c-button" id="cancel" type="button">Cancel</button></div></form><div class="actions"><button class="ds-c-button ds-c-button--solid" id="complete">Complete local review</button><button class="ds-c-button" id="reset">Reset example</button></div><p id="status" role="status"></p><footer>Native CMS Core 18.1.0 CSS · Arial fallback<br>Changes exist only on this page. Nothing is submitted or saved after you leave.</footer></main><script>const values={format:'Standard print',language:'English'},options={format:['Standard print','Large print','Electronic text'],language:['English','Spanish']},labels={format:'Notice format',language:'Preferred language'};let field,opener;const editor=document.querySelector('#editor'),status=document.querySelector('#status');function close(){editor.hidden=true;opener?.focus()}document.querySelectorAll('.edit').forEach(button=>button.addEventListener('click',()=>{field=button.dataset.field;opener=button;document.querySelector('#legend').textContent='Edit '+labels[field].toLowerCase();document.querySelector('#choices').replaceChildren(...options[field].map((text,i)=>{const label=document.createElement('label');label.className='choice';const input=document.createElement('input');input.type='radio';input.name='preference';input.value=text;input.checked=text===values[field];label.append(input,document.createTextNode(text));return label}));editor.hidden=false;editor.querySelector('input:checked').focus();status.textContent=''}));editor.addEventListener('submit',event=>{event.preventDefault();values[field]=editor.querySelector('input:checked').value;document.querySelector('#'+field+'-value').textContent=values[field];status.textContent=labels[field]+' updated to '+values[field]+'.';close()});document.querySelector('#cancel').addEventListener('click',close);document.querySelector('#complete').addEventListener('click',()=>{if(!editor.hidden){status.textContent='Save or cancel the open edit before completing the review.';editor.querySelector('input:checked').focus();return}status.textContent='Local review complete. No data was submitted.'});document.querySelector('#reset').addEventListener('click',()=>{values.format='Standard print';values.language='English';Object.entries(values).forEach(([key,value])=>document.querySelector('#'+key+'-value').textContent=value);editor.hidden=true;status.textContent='Example reset.'});</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
CMS Designsystem-Agent-Einrichtung
Ausgangspunkt für die Implementierung
Paket-Exports und Review-Props wurden in den veröffentlichten Metadaten und Typen von 18.1.0 überprüft. Das React-Beispiel dient der Integration; die eigenständige Vorschau führt natives CSS zusammen mit lokalem Anwendungs-JavaScript aus. Das vollständige ZIP-Archiv mit dem funktionsfähigen Beispiel unter Sources enthält außerdem die exakten Abhängigkeiten der Vorschau und das vollständige Dokument. Entpacken Sie es, führen Sie in diesem Verzeichnis python3 -m http.server 8080 aus und öffnen Sie anschließend http://localhost:8080/cms.html. Öffnen Sie modulbasierte Beispiele nicht über file://.
Erstellen Sie einen CMS-Core-Prüfbildschirm mit Version 18.1.0. Laden Sie index.css und core-theme.css gemeinsam. Verwenden Sie für jede unabhängig bearbeitbare Antwort Review mit heading, children, editHref und editAriaLabel; die Bearbeitung auf Abschnittsebene wird separat in der Anwendung zusammengesetzt. Behalten Sie die Reihenfolge der Fragen und die sichtbaren gespeicherten Werte bei, während Entwürfe bearbeitet werden. Stellen Sie beim Speichern und Abbrechen den Fokus wieder her und geben Sie tatsächliche Aktualisierungen bekannt. Verwenden Sie Core-Tokens wie #262626 für den Grundtext, Abstände von 8px mit einer halben Stufe von 4px, einen allgemeinen Rasterabstand von 32px und einen Formularabstand von 16px. Mischen Sie keine Logos von Child-Themes ein und erwecken Sie nicht den Eindruck, eine lokale Prüfung würde ein Formular übermitteln.
05
CMS Designsystem Quellen und Geltungsbereich
Technische Referenz zum Core-Theme. Fiktive Präferenzwerte und ausschließlich lokale Änderungen; keine Beratung zur Anspruchsberechtigung im Gesundheitswesen, keine Zugehörigkeit zum CMS und kein übermitteltes Formular werden dargestellt.
