gov.cz Designsystem.

gov.cz Designsystem Gov-CE-Grundlagen und Reihenfolge der Assets

Paketversionen aufeinander abstimmen

In diesem Beispiel sind Komponenten, Styles, Icons und Schriftarten auf Version 4.7.1 festgelegt. Die fünf Stylesheets für die Grundlagen werden in der veröffentlichten Reihenfolge geladen. Sie erfüllen unterschiedliche Aufgaben: Variablen allein gestalten keine Karte, und die Registrierung eines benutzerdefinierten Elements allein bindet die globale Komponente CSS nicht ein. Der vollständige Einstieg bindet alle fünf Stylesheets vor der kleinen eigenen Kompositionsebene ein.

Konfiguration vor der Komponentenregistrierung initialisieren

Der Icon-Pfad wird festgelegt, bevor die dynamisch importierten Einstiegsmodule der Komponenten ausgeführt werden. Diese Reihenfolge ist wichtig, weil die Paginierung Pfeilsymbole als Teil ihrer eigenen Abhängigkeiten rendert. Kopieren Sie das vollständige Icon-Verzeichnis einschließlich seiner Unterverzeichnisse an den konfigurierten öffentlichen Pfad. Ein erfolgreicher Import von JavaScript beweist nicht, dass auch die separaten Icon-Anfragen erfolgreich waren.

gov.cz Designsystem Semantische Farb- und Zustandsreferenzen

Farbe mit einer Rolle verknüpfen

Die Referenz unterscheidet zwischen dem blauen Primärfarbgrundwert und den Aliasen für Text, Fokus und Schaltflächenzustände. Würde überall dasselbe scheinbare Blau verwendet, gingen diese Zusammenhänge verloren. Das Toolkit verwendet die offiziellen ausgefüllten primären Schaltflächen und überlässt es dem Komponenten-Stylesheet, deren aktives, Hover- und deaktiviertes Erscheinungsbild festzulegen. Nur das umgebende Layout der Sammlung ist eine eigene Umsetzung CSS.

Typografie und inhaltlichen Kontext sichtbar halten

Roboto stammt aus dem passenden Schriftartenpaket. Die Karten enthalten eine kurze, handlungsorientierte Überschrift, eine Metadatenzeile und eine Zusammenfassung vor der Leseaktion. Die sechs Ressourcentexte sind eigenes Übungsmaterial OpenDesign und keine übersetzten offiziellen Anweisungen der tschechischen Regierung. Sie veranschaulichen die Hierarchie und eine vollständige lokale Interaktion, ohne vorzugeben, es handle sich um einen Regierungsdienst.

gov.cz Designsystem Karten-Slots und Leseaktionen

Überschrift in den vorgesehenen Slot setzen

Jede gov-card erhält eine Überschrift im headline-Slot. Metadaten, Beschreibung und Schaltfläche bilden den Inhalt. Die Aktion erhält ein aria-label, das den Ressourcentitel enthält und so für assistive Technologien zwischen gleichlautenden Schaltflächen „Ressource lesen“ unterscheidet. Die Komponente überträgt ARIA-Attribute auf ihr internes interaktives Element; ein erfundenes Attribut für barrierefreie Beschriftungen würde das nicht leisten.

Layout außerhalb des Komponentenvertrags halten

Ein CSS-Raster mit drei Spalten wird auf schmalen Bildschirmen einspaltig. Das Raster und sein Breakpoint sind eigens für dieses Beispiel erstellt und keine zusätzlichen offiziellen Eigenschaften der Karte. In seinem sehr schmalen eingebetteten Container hebt die Vorschau außerdem die globale Mindestbreite des Bodys von 320px auf. Diese begrenzte Anpassung der Komposition erhält das Komponentenstyling und verhindert zugleich, dass der Inhalt über die übergeordnete Seite hinausragt.

gov.cz Designsystem Native Paginierung und Anwendungsstatus

Nutzdaten des nativen Ereignisses auslesen

gov-pagination erhält total=6 und page-size=3. Das gov-page-Ereignis stellt detail.pagination.currentPage bereit; damit werden die passenden drei Datensätze ausgewählt. Die Paginierungskomponente verwaltet ihre Steuerelemente für die aktuelle Seite; die Anwendung verwaltet den Datensatz und den sichtbaren Ausschnitt. Alle standardmäßigen tschechischen Navigationsbeschriftungen werden ausdrücklich durch englische Beschriftungen für diese englischsprachige Anleitung ersetzt.

• total bezeichnet die Anzahl der Datensätze, nicht die Anzahl der Seiten.
• page-size legt die Länge des Ausschnitts fest.
• gov-page stellt detail.pagination.currentPage bereit.
• Die Navigationsbeschriftungen müssen zur Sprache der Benutzeroberfläche passen.

Nach einem Seitenwechsel keine veralteten Details anzeigen

gov.cz Designsystem Lesefokus und Rückkehrverhalten

Fokus auf die geöffnete Ressource setzen

Die Leseaktion füllt einen lokalen Detailbereich und setzt den Fokus auf dessen Überschrift. So erhalten Tastaturnutzende ein klares Ziel, nachdem eine Aktion Inhalte unterhalb der Sammlung hinzugefügt hat. Die fokussierbare Überschrift verwendet tabindex=-1, sodass die Anwendung den Fokus darauf setzen kann, ohne einen zusätzlichen regulären Tabstopp einzuführen. Der geöffnete Inhalt bleibt gewöhnlicher, lesbarer Text.

Zur auslösenden Aktion zurückkehren

„Zurück zu den Ressourcen“ blendet die Details aus und setzt den Fokus auf die ursprüngliche interne Schaltfläche. Dies ist kein modaler Dialog: Der Fokus wird nicht eingeschlossen, es wird keine Dialogsemantik hinzugefügt und die Seite wird nicht abgedunkelt. Die ursprüngliche Sammlung bleibt verfügbar. Durch wiederholtes Öffnen und Schließen sowie Seitenwechsel lässt sich prüfen, ob Anwendungsstatus und Fokus derselben Ressource folgen.

gov.cz Designsystem Vollständige lokale Integration

Die bereitgestellten Dateien gemeinsam verwenden

Der Einstieg enthält den vollständigen Anwendungscode, einschließlich aller sechs Datensätze, der Kartenerstellung, der Verarbeitung der Paginierung und des Fokus auf die Details. Das Stylesheet enthält ausschließlich die eigene Komposition. Installieren Sie die vier festgelegten Pakete, kopieren Sie die Icons und speichern Sie beide Dateien in einem einfachen Vite-Projekt. Die Browservorschau bündelt genau diese Komponenteneinstiege und lokalen Schriftarten-Assets.

1. Installieren Sie alle vier Gov-CE-Pakete in Version 4.7.1.
2. Kopieren Sie die Icons einschließlich ihrer Unterverzeichnisse nach public/assets/gov-cz-icons.
3. Speichern Sie JavaScript und die Komposition CSS vollständig in src.
4. Starten Sie die Anwendung und überprüfen Sie Paginierung, Fokus-Rückkehr und Icon-Anfragen.

Interaktion und Laden der Assets überprüfen

Öffnen Sie die erste Ressource, kehren Sie zu ihrer Schaltfläche zurück, wechseln Sie zur zweiten Seite und lesen Sie eine andere Ressource. Prüfen Sie, ob die Schaltflächen für „Erste“ und „Vorherige“ am Anfang und die Schaltflächen für „Nächste“ und „Letzte“ am Ende deaktiviert sind. Untersuchen Sie denselben Ablauf bei Desktop- und Smartphone-Breite sowie bei einer schmaleren eingebetteten Breite. Prüfen Sie im Netzwerkbereich auch auf fehlende Symbole und JavaScript-Fehler.

gov.cz Designsystem-Designsystem-Komponentenbeispiele

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();

body{margin:0;color:var(--text-primary);font-family:Roboto,Arial,sans-serif}main{max-width:1160px;margin:auto;padding:32px}.eyebrow{font-size:12px;letter-spacing:.08em;font-weight:700;color:var(--color-primary-600)}h1{max-width:22ch;font-size:40px;line-height:1.15;margin:16px 0}.lead{max-width:66ch;font-size:18px;line-height:1.6}.cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;margin:32px 0}.cards gov-card{height:100%}.cards h2{font-size:22px;line-height:1.3}.cards p{margin-bottom:20px;line-height:1.6}.meta{font-size:14px;color:#555}.pagination-row{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap}#range{font-size:14px}#detail{padding:24px;border-left:4px solid var(--color-primary-600);background:var(--color-primary-50);margin-top:32px}#detail-body{max-width:66ch;line-height:1.7}aside{margin-top:32px;padding-top:24px;border-top:1px solid #ddd;font-size:14px;line-height:1.6}aside p{max-width:80ch}[hidden]{display:none!important}@media(max-width:760px){main{padding:20px}.cards{grid-template-columns:1fr}h1{font-size:32px}.pagination-row{display:block}gov-pagination{max-width:100%;overflow:auto}}

html,body{min-width:0}.eyebrow{overflow-wrap:anywhere}