Esplora i ruoli cromatici reali, gli slot delle schede e la paginazione nativa di Gov Design System CE attraverso un toolkit di lettura completo con sei risorse e gestione esplicita del focus e dello stato della pagina.
Componenti card, button e pagination di Native Gov CE 4.7.1; set di dati locale originale e gestione del focus. · Riferimento per l’implementazione
02
Riferimento sistema di design gov.cz
Primitive cromatiche e alias semantici di tokens.css di @gov-design-system-ce/styles 4.7.1. L’anteprima usa gli stili pubblicati e il pacchetto Roboto.
Gli alias semantici sono mantenuti per rendere visibile il ruolo; non appiattire ogni alias trasformandolo in un valore esadecimale locale non correlato.
--text-secondary
var(--color-neutral-700)
Gli alias semantici sono mantenuti per rendere visibile il ruolo; non appiattire ogni alias trasformandolo in un valore esadecimale locale non correlato.
--text-primary-color
var(--color-primary-600)
Gli alias semantici sono mantenuti per rendere visibile il ruolo; non appiattire ogni alias trasformandolo in un valore esadecimale locale non correlato.
--text-white
var(--color-neutral-0)
Gli alias semantici sono mantenuti per rendere visibile il ruolo; non appiattire ogni alias trasformandolo in un valore esadecimale locale non correlato.
--text-status-error
var(--color-error-700)
Gli alias semantici sono mantenuti per rendere visibile il ruolo; non appiattire ogni alias trasformandolo in un valore esadecimale locale non correlato.
--text-status-success
var(--color-success-700)
Gli alias semantici sono mantenuti per rendere visibile il ruolo; non appiattire ogni alias trasformandolo in un valore esadecimale locale non correlato.
--status-focus
var(--color-focus-600)
Gli alias semantici sono mantenuti per rendere visibile il ruolo; non appiattire ogni alias trasformandolo in un valore esadecimale locale non correlato.
--status-warning
var(--color-warning-400)
Gli alias semantici sono mantenuti per rendere visibile il ruolo; non appiattire ogni alias trasformandolo in un valore esadecimale locale non correlato.
--status-error
var(--color-error-600)
Gli alias semantici sono mantenuti per rendere visibile il ruolo; non appiattire ogni alias trasformandolo in un valore esadecimale locale non correlato.
Fondamenti di Gov CE e ordine degli asset sistema di design gov.cz
Mantieni allineate le versioni dei pacchetti
Questo esempio fissa componenti, stili, icone e font alla versione 4.7.1. I cinque fogli di stile fondamentali vengono caricati nell’ordine pubblicato. Hanno responsabilità diverse: le sole variabili non applicano stili a una card e la sola registrazione di un elemento personalizzato non include il componente globale CSS. L’entry point completo include tutti e cinque i fogli prima del piccolo livello di composizione originale.
Inizializza la configurazione prima di registrare i componenti
Il percorso delle icone viene configurato prima che siano eseguiti i moduli di entry point dei componenti importati dinamicamente. L’ordine è importante perché pagination include le icone delle frecce tra le proprie dipendenze. Copia l’intera directory delle icone nel percorso pubblico configurato, mantenendone le sottodirectory. Il buon esito di un import JavaScript non dimostra che le richieste separate delle icone siano riuscite.
Riferimenti ai colori semantici e agli stati sistema di design gov.cz
Associa il colore a un ruolo
Il riferimento distingue la primitiva blu primaria dagli alias per testo, focus e stati del pulsante. Usare lo stesso blu apparente ovunque cancellerebbe queste distinzioni. Il kit di strumenti usa i pulsanti primari a tinta unita ufficiali e lascia che il foglio di stile del componente ne determini l’aspetto negli stati attivo, hover e disabilitato. Solo il layout circostante della raccolta è originale CSS.
Mantieni visibili la tipografia e il contesto dei contenuti
Roboto proviene dal pacchetto di font abbinato. Le card presentano titoli brevi e orientati all’azione, una riga di metadati e un riepilogo prima dell’azione di lettura. I testi delle sei risorse sono materiale originale di esercitazione OpenDesign, non istruzioni ufficiali tradotte del governo ceco. Servono a mostrare la gerarchia e un’interazione locale completa, senza far passare l’esempio per un servizio governativo.
Slot delle card e azioni di lettura sistema di design gov.cz
Inserisci il titolo nello slot previsto
Ogni gov-card riceve un titolo nello slot headline. Metadati, descrizione e pulsante ne costituiscono il contenuto. L’azione ha un aria-label che include il titolo della risorsa, così gli assistivi distinguono i pulsanti «Leggi la risorsa» ripetuti. Il componente trasferisce gli attributi ARIA all’elemento interattivo interno; un attributo accessible-label inventato non avrebbe lo stesso effetto.
Mantieni il layout al di fuori del contratto del componente
Una griglia CSS a tre colonne diventa a colonna singola sugli schermi stretti. La griglia e il relativo breakpoint sono stati creati per questo esempio: non sono proprietà ufficiali aggiuntive della card. Nell’anteprima, la larghezza minima globale del body di 320px viene inoltre rimossa all’interno del contenitore incorporato molto stretto. Questo intervento limitato sulla composizione mantiene gli stili del componente e impedisce alla pagina contenitore di traboccare.
Paginazione nativa e stato dell’applicazione sistema di design gov.cz
Leggi i dati dell’evento nativo
gov-pagination riceve total=6 e page-size=3. Il suo evento gov-page fornisce detail.pagination.currentPage, che seleziona i tre record corrispondenti. Il componente di paginazione gestisce i controlli della pagina corrente; l’applicazione gestisce il set di dati e la porzione visibile. Tutte le etichette di navigazione predefinite in ceco vengono sostituite esplicitamente con etichette in inglese per questo esempio in inglese.
total indica il numero di record, non il numero di pagine.
page-size determina la lunghezza della porzione.
gov-page espone detail.pagination.currentPage.
Le etichette di navigazione devono corrispondere alla lingua dell’interfaccia.
Evita di mostrare schede obsolete dopo un cambio di pagina
Sistema di design gov.cz Comportamento del focus durante la lettura e al ritorno
Sposta il focus sulla risorsa aperta
L’azione di lettura mostra i dettagli in un’area locale e sposta il focus sul titolo. In questo modo, gli utenti che usano la tastiera raggiungono chiaramente i nuovi contenuti aggiunti sotto la raccolta. Il titolo, reso focalizzabile con tabindex=-1, può ricevere il focus dall’applicazione senza aggiungere una tappa alla normale sequenza di Tab. Il contenuto aperto resta testo ordinario e leggibile.
Torna all’azione che l’ha aperta
Torna alle risorse nasconde i dettagli e riporta il focus sul pulsante interno che li ha aperti. Non è una finestra modale: il focus non è intrappolato, non vengono aggiunte semantiche di dialogo e la pagina non viene oscurata. La raccolta originale resta disponibile. Aprire, chiudere e cambiare pagina più volte permette di verificare se lo stato dell’applicazione e il focus seguono la stessa risorsa.
Sistema di design gov.cz Integrazione locale completa
Usa insieme i file forniti
Questa voce contiene il codice completo dell’applicazione, inclusi tutti e sei i record, la creazione delle schede, la gestione della paginazione e il focus sui dettagli. Il foglio di stile contiene solo la composizione originale. Installa i quattro pacchetti fissati a una versione specifica, copia le icone e salva entrambi i file in un progetto Vite vanilla. L’anteprima nel browser integra esattamente queste voci dei componenti e gli asset dei font locali.
Installa tutti e quattro i pacchetti Gov CE alla versione 4.7.1.
Copia le icone in public/assets/gov-cz-icons mantenendo le sottocartelle.
Salva JavaScript completo e la composizione CSS in src.
Avvia l’app e verifica la paginazione, il ripristino del focus e le richieste delle icone.
Verifica le interazioni e il caricamento degli asset
Apri la prima risorsa, torna al relativo pulsante, passa alla seconda pagina e leggi un’altra risorsa. Verifica che all’inizio i controlli prima/precedente siano disabilitati e che alla fine lo siano quelli successiva/ultima. Controlla lo stesso flusso a larghezza desktop e telefono, anche in un’area incorporata più stretta. Nel pannello di rete verifica la presenza di eventuali icone mancanti e degli errori JavaScript.
Esempi di componenti del sistema di progettazione sistema di design gov.cz
main.js — toolkit completo con paginazione
Dati completi, registrazione dei componenti nativi, suddivisione delle pagine e focus per la lettura.
javascript
import '@gov-design-system-ce/styles/tokens.css';
import '@gov-design-system-ce/styles/styles.css';
import '@gov-design-system-ce/styles/layout.css';
import '@gov-design-system-ce/styles/components.css';
import '@gov-design-system-ce/styles/animations.css';
import '@gov-design-system-ce/fonts/lib/roboto.css';
import './gov-cz.css';
window.GOV_DS_CONFIG={iconsPath:'/assets/gov-cz-icons'};
const resources=[
{title:'Map the service journey',kind:'Workshop',time:'25 minutes',summary:'Connect the first question to a useful outcome.',body:'Start with the person’s goal. Record how they discover the service, what they need before starting and how they know the task has finished. Mark every hand-off where the person must repeat information.'},
{title:'Write a clear action label',kind:'Writing guide',time:'10 minutes',summary:'Name what will happen after a button is activated.',body:'Use a verb and the object of the action. Compare Save draft with Send application and make the distinction explicit. Keep destructive and reversible actions visually and verbally distinguishable.'},
{title:'Review keyboard access',kind:'Checklist',time:'20 minutes',summary:'Inspect focus order, visible focus and recovery.',body:'Work through the page using only the keyboard. Check the first useful control, the order through repeated items, the next-page action and return from a detail view. A selected page and keyboard focus are separate states.'},
{title:'Prepare an error message',kind:'Writing guide',time:'15 minutes',summary:'Explain the issue next to a recoverable action.',body:'State what needs changing and how to change it. Preserve the person’s input. Avoid a generic failure message when the application knows which field or prerequisite is causing the problem.'},
{title:'Test a narrow layout',kind:'Checklist',time:'20 minutes',summary:'Keep reading and actions available on a small screen.',body:'Inspect a long title, two lines of metadata and the pagination controls at a narrow width. Avoid hiding essential actions behind hover. Check that only a genuinely two-dimensional region scrolls sideways.'},
{title:'Record the decision',kind:'Template',time:'10 minutes',summary:'Give the next team enough context to continue.',body:'Record the decision, the evidence used, the person responsible and the condition that would make the team revisit it. A useful record explains the reasoning without presenting an experiment as a settled rule.'}
];
document.querySelector('#root').innerHTML=`<main><p class="eyebrow">OPENDESIGN · ORIGINAL SERVICE TOOLKIT</p><h1>Small steps toward a clearer service</h1><p class="lead">Six practical resources for a team review. Explore two pages and open a resource without leaving the collection.</p><div id="cards" class="cards"></div><div class="pagination-row"><p id="range" role="status"></p><gov-pagination total="6" page-size="3" current="1" color="primary" size="s" accessible-page-label="Page" accessible-select-label="Choose a page" label-prev="Previous page" label-next="Next page" label-start="First page" label-end="Last page" aria-label="Toolkit pages"></gov-pagination></div><section id="detail" hidden aria-labelledby="detail-title"><p class="eyebrow" id="detail-meta"></p><h2 id="detail-title" tabindex="-1"></h2><p id="detail-body"></p><gov-button id="close" type="outlined" color="primary" size="m">Back to resources</gov-button></section><aside><strong>About this example</strong><p>These are original OpenDesign practice notes, not Czech government guidance. Cards, buttons and pagination use Gov Design System CE 4.7.1. Reading a resource is local and does not submit information.</p></aside></main>`;
await import('@gov-design-system-ce/components/dist/components/gov-card.js');
await import('@gov-design-system-ce/components/dist/components/gov-pagination.js');
let page=1,opened=-1;
const cards=document.querySelector('#cards'), detail=document.querySelector('#detail');
function render(){cards.replaceChildren();resources.slice((page-1)*3,page*3).forEach((r,i)=>{let id=(page-1)*3+i;let card=document.createElement('gov-card');card.innerHTML=`<h2 slot="headline">${r.title}</h2><p class="meta">${r.kind} · ${r.time}</p><p>${r.summary}</p><gov-button type="solid" color="primary" size="m" data-resource="${id}" aria-label="Read ${r.title}">Read resource</gov-button>`;cards.append(card)});document.querySelector('#range').textContent=`Resources ${(page-1)*3+1}–${page*3} of ${resources.length}`;detail.hidden=true;opened=-1;}
cards.addEventListener('gov-click',e=>{let b=e.target.closest('[data-resource]');if(!b)return;opened=Number(b.dataset.resource);let r=resources[opened];document.querySelector('#detail-meta').textContent=r.kind+' · '+r.time;document.querySelector('#detail-title').textContent=r.title;document.querySelector('#detail-body').textContent=r.body;detail.hidden=false;document.querySelector('#detail-title').focus();});
document.querySelector('gov-pagination').addEventListener('gov-page',e=>{page=e.detail.pagination.currentPage;render();});
document.querySelector('#close').addEventListener('gov-click',()=>{detail.hidden=true;const button=cards.querySelector(`[data-resource="${opened}"] button`);button?.focus();opened=-1;});render();
Il layout a griglia e la modifica della larghezza minima per l’incorporamento sono CSS originali dell’applicazione.
04
Sistema di design gov.cz Configurazione dell’agente
Punto di partenza per l’implementazione
Mantieni intatte le sottocartelle delle icone. Questo esempio importa direttamente i moduli delle voci dei componenti e non richiede di copiare un runtime per il caricamento differito.
sh
npm create vite@latest gov-toolkit -- --template vanilla
cd gov-toolkit
npm install
npm install @gov-design-system-ce/[email protected] @gov-design-system-ce/[email protected] @gov-design-system-ce/[email protected] @gov-design-system-ce/[email protected]
mkdir -p public/assets/gov-cz-icons
cp -R node_modules/@gov-design-system-ce/icons/lib/. public/assets/gov-cz-icons/
# Save the supplied files as src/main.js and src/gov-cz.css.
# The root index.html must contain <div id="root"></div> and load /src/main.js.
npm run dev
Un prompt per il tuo progetto
Prompt per l’agente
Crea il toolkit Gov CE 4.7.1 fornito usando schede, pulsanti e paginazione nativi. Mantieni l’ordine effettivo dei fogli di stile e la configurazione del percorso delle icone. Usa gov-page detail.pagination.currentPage, etichette ARIA significative in inglese, chiudi i dettagli non più pertinenti al cambio di pagina e ripristina il focus dopo la lettura. Mantieni l’attribuzione originale dei contenuti di esempio.
05
Sistema di design gov.cz Fonti e ambito
Studio originale di un toolkit di servizi OpenDesign basato su componenti, stili, icone e font di Gov Design System CE 4.7.1. I testi di esempio e il comportamento della raccolta sono originali; non si tratta di un servizio governativo ufficiale.
