Services publics et administration · Nouvelle ressource
Système de design gov.cz.
Découvrez les véritables rôles de couleur de Gov Design System CE, les emplacements des cartes et la pagination native à travers une boîte à outils de lecture complète pour six ressources, avec gestion explicite du focus et de l’état de la page.
Composants de carte, de bouton et de pagination natifs Gov CE 4.7.1 ; jeu de données local d’origine et gestion du focus. · Référence de mise en œuvre
02
Système de design gov.cz Référence de conception
Primitives de couleur et alias sémantiques réels de tokens.css dans @gov-design-system-ce/styles 4.7.1. L’aperçu utilise les styles publiés et le package Roboto.
Les alias sémantiques sont conservés pour que le rôle reste visible ; ne remplacez pas tous les alias par une valeur hexadécimale locale sans lien avec leur rôle.
--text-secondary
var(--color-neutral-700)
Les alias sémantiques sont conservés pour que le rôle reste visible ; ne remplacez pas tous les alias par une valeur hexadécimale locale sans lien avec leur rôle.
--text-primary-color
var(--color-primary-600)
Les alias sémantiques sont conservés pour que le rôle reste visible ; ne remplacez pas tous les alias par une valeur hexadécimale locale sans lien avec leur rôle.
--text-white
var(--color-neutral-0)
Les alias sémantiques sont conservés pour que le rôle reste visible ; ne remplacez pas tous les alias par une valeur hexadécimale locale sans lien avec leur rôle.
--text-status-error
var(--color-error-700)
Les alias sémantiques sont conservés pour que le rôle reste visible ; ne remplacez pas tous les alias par une valeur hexadécimale locale sans lien avec leur rôle.
--text-status-success
var(--color-success-700)
Les alias sémantiques sont conservés pour que le rôle reste visible ; ne remplacez pas tous les alias par une valeur hexadécimale locale sans lien avec leur rôle.
--status-focus
var(--color-focus-600)
Les alias sémantiques sont conservés pour que le rôle reste visible ; ne remplacez pas tous les alias par une valeur hexadécimale locale sans lien avec leur rôle.
--status-warning
var(--color-warning-400)
Les alias sémantiques sont conservés pour que le rôle reste visible ; ne remplacez pas tous les alias par une valeur hexadécimale locale sans lien avec leur rôle.
--status-error
var(--color-error-600)
Les alias sémantiques sont conservés pour que le rôle reste visible ; ne remplacez pas tous les alias par une valeur hexadécimale locale sans lien avec leur rôle.
Système de design gov.cz Fondements de Gov CE et ordre des ressources
Maintenez les versions des packages alignées
Cet exemple fixe les versions des composants, des styles, des icônes et des polices à 4.7.1. Les cinq feuilles de style fondamentales sont chargées dans l’ordre publié. Elles ont des rôles distincts : les variables seules ne stylisent pas une carte, et l’enregistrement d’un élément personnalisé ne charge pas à lui seul le composant global CSS. Le point d’entrée complet inclut les cinq feuilles avant sa petite couche de composition d’origine.
Initialisez la configuration avant l’enregistrement des composants
Le chemin des icônes est configuré avant l’exécution des modules d’entrée des composants importés de façon dynamique. Cet ordre est important, car la pagination affiche des icônes de flèche parmi ses propres dépendances. Copiez le répertoire complet des icônes dans le chemin public configuré, sans modifier ses sous-répertoires. Une importation JavaScript réussie ne garantit pas que les requêtes distinctes des icônes ont abouti.
Système de design gov.cz Références aux couleurs sémantiques et aux états
Associez chaque couleur à un rôle
La référence distingue la primitive primaire bleue des alias de texte, de focus et d’état du bouton. Utiliser le même bleu apparent partout effacerait ces contrats. L’interface utilise les boutons principaux pleins officiels et laisse la feuille de style du composant déterminer leur apparence active, au survol et désactivée. Seule la mise en page de la collection environnante est d’origine CSS.
Gardez la typographie et le contexte du contenu visibles
Roboto provient du package de polices correspondant. Les cartes comportent des titres d’action concis, une ligne de métadonnées et un résumé avant l’action de lecture. Les six textes de ressources sont du contenu pédagogique d’origine OpenDesign ; ils ne constituent pas une traduction des instructions officielles du gouvernement tchèque. Ils servent à illustrer la hiérarchie et une interaction locale complète, sans donner l’impression qu’il s’agit d’un service gouvernemental.
Système de design gov.cz Emplacements des cartes et actions de lecture
Placez le titre dans l’emplacement prévu
Chaque gov-card reçoit un titre dans l’emplacement headline. Les métadonnées, la description et le bouton forment le contenu. L’action a un aria-label qui inclut le titre de la ressource, ce qui permet aux technologies d’assistance de distinguer les boutons « Lire la ressource » répétés. Le composant transmet les attributs ARIA à son élément interactif interne ; un attribut accessible-label inventé ne ferait pas l’affaire.
Gardez la mise en page hors du contrat du composant
Une grille CSS à trois colonnes passe à une seule colonne sur un écran étroit. La grille et son point de rupture sont propres à cet exemple ; ils ne font pas partie des propriétés officielles supplémentaires de la carte. Dans son conteneur intégré très étroit, l’aperçu supprime aussi la largeur minimale globale de 320px du body. Cet ajustement limité de la composition préserve les styles du composant tout en empêchant la page parente de déborder.
Système de design gov.cz Pagination native et état de l’application
Lisez la charge utile de l’événement natif
gov-pagination reçoit total=6 et page-size=3. Son événement gov-page fournit detail.pagination.currentPage, qui sélectionne les trois enregistrements correspondants. Le composant de pagination gère ses commandes de changement de page ; l’application gère le jeu de données et la tranche visible. Tous les libellés de navigation tchèques par défaut sont explicitement remplacés par des libellés anglais dans cette démonstration en anglais.
total correspond au nombre d’enregistrements, et non au nombre de pages.
page-size définit la longueur de la tranche.
gov-page expose detail.pagination.currentPage.
Les libellés de navigation doivent correspondre à la langue de l’interface.
Évitez les détails obsolètes après un changement de page
Système de design gov.cz Focus de lecture et comportement de retour
Déplacez le focus vers la ressource ouverte
L’action de lecture remplit une zone de détail locale et place le focus sur son titre. Les utilisateurs du clavier disposent ainsi d’une destination claire après une action qui ajoute du contenu sous la collection. Le titre pouvant recevoir le focus utilise tabindex=-1 : l’application peut ainsi y placer le focus sans ajouter un arrêt supplémentaire à la navigation par Tab. Le contenu ouvert reste un texte courant facile à lire.
Revenez à l’action qui a ouvert la ressource
Le bouton « Retour aux ressources » masque les détails et replace le focus sur le bouton interne d’origine. Il ne s’agit pas d’une fenêtre modale : le focus n’est pas piégé, aucun rôle de dialogue n’est ajouté et la page n’est pas assombrie. La collection d’origine reste accessible. Ouvrir et fermer plusieurs fois des ressources, puis passer d’une page à l’autre, permet de vérifier que l’état de l’application et le focus suivent la même ressource.
Système de design gov.cz Intégration locale complète
Utilisez les fichiers fournis ensemble
Le point d’entrée contient l’intégralité du code de l’application, y compris les six enregistrements, la création des cartes, la gestion de la pagination et le focus des détails. La feuille de style ne contient que la composition d’origine. Installez les quatre packages épinglés, copiez les icônes et enregistrez les deux fichiers dans un projet Vite vanilla. L’aperçu du navigateur regroupe exactement ces entrées de composants et les ressources locales de police.
Installez les quatre packages Gov CE en version 4.7.1.
Copiez les icônes dans public/assets/gov-cz-icons en conservant les sous-répertoires.
Enregistrez JavaScript complet et la composition CSS dans src.
Lancez l’application et vérifiez la pagination, le retour du focus et les requêtes d’icônes.
Vérifiez les interactions et le chargement des ressources
Ouvrez la première ressource, revenez à son bouton, passez à la deuxième page et consultez une autre ressource. Vérifiez que les commandes première/précédente sont désactivées au début et que les commandes suivante/dernière le sont à la fin. Examinez le même parcours sur ordinateur et sur téléphone, y compris dans un conteneur intégré plus étroit. Dans le panneau réseau, recherchez les icônes manquantes ainsi que les erreurs JavaScript.
Exemples de composants du système de design système de design gov.cz
main.js — boîte à outils complète avec pagination
Données complètes, enregistrement des composants natifs, découpage des pages et gestion du focus de lecture.
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();
La mise en page en grille et la surcharge de largeur minimale pour le contenu intégré sont des CSS d’application originales.
04
Configuration de l’agent système de design gov.cz
Point de départ de l’implémentation
Conservez les sous-répertoires d’icônes. Cet exemple importe directement les modules d’entrée des composants ; il ne nécessite pas de chargeur différé runtime copié.
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 pour votre projet
Prompt pour l’agent IA
Créez la boîte à outils Gov CE 4.7.1 fournie à l’aide des cartes, boutons et commandes de pagination natifs. Respectez l’ordre réel des feuilles de style et la configuration du chemin des icônes. Utilisez gov-page detail.pagination.currentPage, des libellés ARIA pertinents en anglais, fermez les détails obsolètes lors des changements de page et rétablissez le focus après la lecture. Conservez l’attribution du contenu d’exemple original.
05
Sources et périmètre de système de design gov.cz
Étude originale d’une boîte à outils de services OpenDesign, utilisant les composants, styles, icônes et polices de Gov Design System CE 4.7.1. Les textes d’exemple et le comportement de la collection sont originaux ; il ne s’agit pas d’un service officiel du gouvernement.
