Implementa CMS Core con variabili del tema versionate, API reali del componente Review e un flusso funzionante di modifica e revisione che conserva le risposte dell’utente e il focus.
CMS Core 18.1.0 CSS e tema nativi. Stato di modifica creato dall’applicazione e JavaScript; fallback Arial, nessun runtime React né invio esterno. · Riferimento per l’implementazione
02
Riferimento di design sistema di design CMS
CMS Core 18.1.0 ha pubblicato core-theme.css e il componente CSS. Se la documentazione generale differisce, fa fede l’artefatto versionato. L’anteprima usa Arial come fallback e un contenitore da 48rem specifico dell’applicazione.
Sistema di design CMS Scegli Core o un tema derivato
Il pacchetto è una famiglia, non un’unica veste grafica con marchio
CMS Core fornisce le basi condivise dell’interfaccia, con sistemi derivati separati per Healthcare.gov, Medicare.gov e CMS.gov. Questo riferimento è basato su @cmsgov/design-system 18.1.0 e sul relativo core-theme.css. Un colore, un logo o un componente disponibile in un tema derivato non è automaticamente una regola di Core. L’esempio usa intenzionalmente un flusso neutro per le preferenze di notifica e non include banner ufficiali del governo né elementi di identità visiva.
Sono disponibili percorsi di integrazione React, Preact, tramite web component e manuali con HTML/CSS. La documentazione consiglia i componenti JavaScript quando è utile il loro comportamento integrato; la raccolta di web component ne è un sottoinsieme. Il nostro esempio autonomo usa Core CSS reali con JavaScript dell’applicazione per modificare, salvare e annullare. Non afferma che CSS gestisca la convalida, il routing o la persistenza.
Sistema di design CMS Consultare il tema con versione
Includere entrambi i fogli di stile
index.css definisce le regole dei componenti e core-theme.css fornisce le relative variabili. Se si omette il tema, i nomi di classe validi potrebbero avere valori non risolti. Al contrario, importare un tema Medicare mentre si descrive la tipografia Core è fuorviante, anche se la pagina viene visualizzata. La configurazione include entrambe le risorse della stessa versione 18.1.0.
Il tema con versione è la fonte dei valori numerici usati in questa guida. Per esempio, --color-base è #262626, anche se la descrizione generale della tipografia menziona ancora #333. Nel tema, --grid-gutter-width corrisponde a --spacer-4 (32px), mentre --grid-form-gutter-width corrisponde a --spacer-2 (16px). Una frase generica che descrive gutter da 16px non va applicata a tutte le varianti della griglia. Queste differenze sono importanti per riprodurre un layout reale.
Sistema di design CMS Tipografia e gerarchia di Core
Un’unica famiglia, dimensioni esplicite per ruolo
Core usa Open Sans per titoli e contenuto del corpo. La catena di fallback del tema 18.1.0 prosegue con Inter, Roboto, Helvetica Neue, Arial Nova, Nimbus Sans, Arial e sans-serif. L’esempio locale usa Arial in modo esplicito, così da non richiedere file di font esterni; di conseguenza, le sue metriche differiscono da quelle della tipografia ufficiale completa.
La dimensione base del corpo è 1rem, con un’interlinea di 1.5. Le variabili delle dimensioni includono 14, 16, 18, 21 e 24px con una radice di 16px, seguite da ruoli responsive più grandi: 3xl è 30px su dispositivi mobili e 36px negli altri casi; 4xl è 36px su dispositivi mobili e 48px negli altri casi; 5xl è 36px su dispositivi mobili, 48px su tablet e 60px nel ruolo più grande. Sono valori del tema, non un invito a usare la dimensione massima per ogni titolo di pagina. Usa titoli semantici e la utility appropriata o la mappatura ds-content.
Sistema di design CMS Spaziatura e layout responsive
Ritmo di otto pixel con un mezzo passo
Da --spacer-1 a --spacer-7 corrispondono valori da 8 a 56px, con incrementi di otto pixel. --spacer-half è 4px e --spacer-none è zero. Una classe come ds-u-margin--2 indica quindi 16px, non 2rem. Il CSS nativo della riga di revisione applica 16px di padding verticale e un bordo inferiore di 2px; non serve aggiungere un’altra scheda con padding attorno a ogni risposta del modulo.
La larghezza massima del sito di Core è 1104px, con margini del sito di 3rem e margini mobili di 1.5rem nel tema con versione. L’esempio sceglie un contenitore di lettura più piccolo, pari a 48rem, per due brevi righe di revisione. Questa è una larghezza dell’applicazione, non un nuovo token CMS.
Sistema di design CMS Anatomia della riga di revisione e API
Un’etichetta, un valore e una destinazione contestuale per la modifica
Review contiene un elemento soggetto a revisione. L’intestazione è h3 per impostazione predefinita, ma può essere impostata con headingLevel; seguono i children che rappresentano il valore corrente. editHref indica una destinazione; se non è presente, non viene mostrato alcun link di modifica. editAriaLabel assegna un nome accessibile non ambiguo a un link Modifica visibile che si ripete. La dichiarazione dei tipi della versione 18.1.0 prevede anche editText, onEditClick e editContent: quest’ultimo sostituisce il link predefinito quando si fornisce contenuto personalizzato.
L’esempio React usa props effettive, verificate nella dichiarazione pubblicata. I percorsi sono esempi di route dell’applicazione che chi la integra deve implementare. L’alternativa con CSS nativo mostra la struttura ds-c-review, ds-c-review__content e ds-c-review__heading; l’applicazione deve comunque gestire la navigazione e gli aggiornamenti.
Sistema di design CMS Modifica di una riga o di una sezione
Mantenere prevedibile il percorso di correzione
Il pattern CMS per la revisione dei moduli distingue la modifica di una singola risposta da quella di un’intera sezione. Le preferenze indipendenti relative al formato delle notifiche e alla lingua si prestano alla modifica di una riga. Risposte interdipendenti, come i componenti del nucleo familiare e le relazioni tra loro, possono richiedere la modifica dell’intera sezione, così che l’applicazione possa ricalcolare la coerenza complessiva. Le indicazioni ufficiali specificano che il componente Review non implementa il posizionamento di un pulsante Modifica a livello di sezione accanto alla relativa intestazione.
L’anteprima apre un fieldset dedicato alla riga selezionata. Salva aggiorna solo quel valore e riporta il focus al controllo Modifica che ha avviato l’azione; Annulla scarta la bozza. Inoltre, mantiene invariata la risposta visibile mentre l’editor è aperto. Un messaggio di stato locale comunica la modifica effettiva, anziché annunciare un successo solo perché è comparso il modulo di modifica.
Usa le stesse etichette delle domande e lo stesso ordine in fase di inserimento e di revisione.
Assegna a ogni riga un nome contestuale per la modifica, anche quando il link visibile dice Modifica.
Se è necessario modificare insieme risposte correlate, gestisci la modifica della sezione al di fuori del componente per una singola riga.
Sistema di design CMS Revisione, completamento e attendibilità
Una revisione non è una ricevuta di invio
Review è adatto alle risposte modificabili di un modulo, non a sostituire i risultati di una ricerca. In un vero flusso di invio, il pattern prevede un’azione finale di invio dopo la revisione. Prima di mostrare una ricevuta, tale azione deve corrispondere a un esito reale del backend. L’esempio offre invece Completa la revisione locale e specifica chiaramente che i dati non vengono inviati né archiviati.
Core distingue il blu primario #0071bc, il rosso di errore #e31c3d, il verde di esito positivo #12890e e il grigio del bordo #d9d9d9. Una preferenza salvata viene indicata anche con il testo, non solo con il colore. L’indicatore di focus usa i riferimenti chiaro e scuro del tema; non rimuoverlo quando si applica uno stile minimale al controllo Modifica. Il messaggio di stato finale è raggiungibile da tastiera e non cancella le righe di revisione.
Sistema di design CMS Installare ed estendere in sicurezza
Un percorso CSS completo e uno con il componente reale
Installa il pacchetto bloccato alla versione indicata e importa css/index.css e css/core-theme.css tramite le esportazioni del pacchetto. Chi usa React importa Review dalla radice del pacchetto; per Preact è disponibile un entry /preact. L’esempio non richiede la compilazione di Sass. Se copi CSS statico, mantieni i percorsi relativi delle risorse di font e immagini oppure scegli esplicitamente un fallback supportato, come fa questo esempio.
Lo spazio dei nomi CMS distingue i layout ds-l-, i componenti ds-c- e le utility ds-u-. Le classi dell’applicazione non devono spacciarsi per componenti ufficiali non documentati. Nell’anteprima, il contenitore di lettura e l’editor in linea sono composizioni locali; la riga di revisione e i pulsanti usano gli stili distribuiti.
Carica il componente Core e il tema CSS corrispondenti, quindi visualizza le due righe di revisione.
Collega ogni azione di modifica a un editor controllato; dopo il salvataggio e l’annullamento, ripristina il focus.
Verifica i valori modificati, le bozze scartate e il completamento locale finale a larghezze desktop e mobile.
Il documento completo include layout, controlli e inizializzazione. Estrai l’archivio di esempio collegato per ottenere gli esatti asset vendor relativi, quindi avvialo tramite HTTP.
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>
Scarica l’esempio completo dalla sezione Fonti. Il README indica il comando esatto per avviarlo in locale.
Mantieni i percorsi vendor relativi a questo documento; l’archivio include tutti gli asset usati da questa anteprima.
04
Sistema di design CMS Configurazione dell’agente IA
Punto di partenza per l’implementazione
Le esportazioni del pacchetto e le props di Review sono state verificate nei metadati e nei tipi pubblicati della versione 18.1.0. L’esempio React serve per l’integrazione; l’anteprima autonoma esegue CSS nativo e JavaScript locale dell’applicazione. Lo ZIP dell’esempio completo funzionante, disponibile in Fonti, include anche le dipendenze esatte dell’anteprima e il documento completo. Estrailo, esegui python3 -m http.server 8080 in quella directory e apri http://localhost:8080/cms.html. Non aprire gli esempi basati su moduli tramite file://.
Crea una schermata di revisione con CMS Core 18.1.0. Carica insieme index.css e core-theme.css. Per ogni risposta modificabile in modo indipendente, usa Review con heading, children, editHref ed editAriaLabel; la modifica a livello di sezione è una composizione separata dell’applicazione. Mantieni l’ordine delle domande e i valori salvati visibili mentre si modificano le bozze. Dopo il salvataggio o l’annullamento, ripristina il focus e comunica gli aggiornamenti effettivi. Usa i token Core, compresi il testo base #262626, gli spaziatori da 8px con mezzo passo da 4px, il gutter generale della griglia da 32px e il gutter del modulo da 16px. Non mescolare loghi di temi derivati né fingere che una revisione locale invii una richiesta.
05
Sistema di design CMS Fonti e ambito
Riferimento tecnico per Core-theme. Valori delle preferenze fittizi e modifiche solo locali; non sono rappresentati consigli sull’idoneità sanitaria, affiliazioni al CMS o moduli inviati.
