Administración pública y servicios públicos · Nuevo recurso
Sistema de diseño gov.cz.
Explora los roles de color reales, los espacios para tarjetas y la paginación nativa de Gov Design System CE mediante un kit completo de lectura con seis recursos, que incluye estados explícitos de enfoque y página.
Componentes de tarjetas, botones y paginación de Native Gov CE 4.7.1; conjunto de datos local y gestión del foco originales. · Referencia de implementación
02
Referencia de diseño de sistema de diseño gov.cz
Tokens de color primitivos y alias semánticos de tokens.css de @gov-design-system-ce/styles 4.7.1. La vista previa usa los estilos publicados y el paquete Roboto.
Sistema de diseño gov.cz Fundamentos de Gov CE y orden de los recursos
Mantén alineadas las versiones de los paquetes
Este ejemplo fija los componentes, estilos, iconos y fuentes en la versión 4.7.1. Las cinco hojas de estilo fundamentales se cargan en el orden publicado. Cada una tiene una responsabilidad distinta: las variables por sí solas no dan estilo a una tarjeta, y registrar un elemento personalizado por sí solo no incluye la hoja de estilos global de los componentes CSS. La entrada completa incluye las cinco hojas antes de la pequeña capa de composición original.
Inicializa la configuración antes de registrar los componentes
La ruta de los iconos se configura antes de que se ejecuten los módulos de entrada de los componentes importados dinámicamente. El orden importa porque la paginación representa iconos de flecha como parte de sus propias dependencias. Copia todo el directorio de iconos en la ruta pública configurada, conservando sus subdirectorios. Que la importación de JavaScript se complete correctamente no demuestra que también se hayan completado las solicitudes de esos iconos.
Sistema de diseño gov.cz Referencias semánticas de color y estado
Asocia cada color con una función
La referencia distingue el color primario azul de base de los alias para texto, foco y estado de los botones. Usar el mismo azul aparente en todas partes borraría esas distinciones. El kit de herramientas usa los botones primarios sólidos oficiales y deja que la hoja de estilos del componente determine su apariencia en los estados activo, al pasar el cursor y deshabilitado. Solo la composición de la colección que los rodea es original CSS.
Mantén visibles la tipografía y el contexto del contenido
Roboto procede del paquete de fuentes correspondiente. Las tarjetas incluyen títulos breves y prácticos, una línea de metadatos y un resumen antes de la acción de lectura. Los seis textos de recursos son material de práctica original OpenDesign, no traducciones de instrucciones oficiales del Gobierno checo. Su propósito es mostrar la jerarquía y una interacción local completa, sin dar a entender que se trata de un servicio gubernamental.
Sistema de diseño gov.cz Ranuras de las tarjetas y acciones de lectura
Coloca el título en la ranura prevista
Cada gov-card recibe un título en la ranura headline. Los metadatos, la descripción y el botón forman el contenido. La acción tiene un aria-label que incluye el título del recurso, lo que permite que la tecnología de asistencia distinga los botones repetidos «Leer recurso». El componente transfiere los atributos ARIA a su elemento interactivo interno; un atributo inventado como accessible-label no lo haría.
Mantén el diseño fuera del contrato del componente
Una cuadrícula CSS de tres columnas pasa a una sola columna en pantallas estrechas. La cuadrícula y su punto de ruptura se han creado para este ejemplo; no son propiedades oficiales adicionales de la tarjeta. La vista previa también elimina el ancho mínimo global de 320px del cuerpo dentro de su contenedor incrustado muy estrecho. Este ajuste limitado de la composición conserva los estilos del componente y evita que el contenido desborde la página contenedora.
Sistema de diseño gov.cz Paginación nativa y estado de la aplicación
Lee la carga útil del evento nativo
gov-pagination recibe total=6 y page-size=3. Su evento gov-page proporciona detail.pagination.currentPage, que selecciona los tres registros correspondientes. El componente de paginación controla sus propios controles de página actual; la aplicación controla el conjunto de datos y el segmento visible. Todas las etiquetas de navegación predeterminadas en checo se sustituyen explícitamente por etiquetas en inglés para este ejemplo en inglés.
total indica el número de registros, no el número de páginas.
page-size determina la longitud del segmento.
gov-page expone detail.pagination.currentPage.
Las etiquetas de navegación deben coincidir con el idioma de la interfaz.
Evita que se muestren detalles obsoletos al cambiar de página
Sistema de diseño gov.cz Foco de lectura y comportamiento al volver
Lleva el foco al recurso abierto
La acción de lectura muestra una región de detalle local y lleva el foco a su título. Así, quienes usan el teclado tienen un destino claro tras una acción que añade contenido debajo de la colección. El título se puede enfocar mediante tabindex=-1, de modo que la aplicación pueda llevar el foco hasta él sin añadir una parada más a la navegación habitual con Tab. El contenido abierto sigue siendo texto normal y legible.
Vuelve a la acción que lo abrió
«Volver a los recursos» oculta el detalle y devuelve el foco al botón interno original. Esto no es un cuadro de diálogo modal: no atrapa el foco, no añade semántica de diálogo ni oscurece la página. La colección original sigue disponible. Abrir y cerrar recursos repetidamente, y cambiar de página, permite comprobar si el estado de la aplicación y el foco siguen asociados al mismo recurso.
Sistema de diseño gov.cz Integración local completa
Usa conjuntamente los archivos proporcionados
La entrada es código de aplicación completo e incluye los seis registros, la creación de las tarjetas, la gestión de la paginación y el foco del detalle. La hoja de estilos contiene únicamente la composición original. Instala los cuatro paquetes fijados, copia los iconos y guarda ambos archivos en un proyecto Vite sin framework. La vista previa del navegador agrupa exactamente estas entradas de componentes y los recursos de fuentes locales.
Instala los cuatro paquetes de Gov CE en la versión 4.7.1.
Copia los iconos en public/assets/gov-cz-icons y conserva los subdirectorios.
Guarda en src la JavaScript completa y la composición CSS.
Ejecuta la aplicación y comprueba la paginación, el retorno del foco y las solicitudes de iconos.
Verifica la interacción y la carga de recursos
Abre el primer recurso, vuelve a su botón, pasa a la segunda página y lee otro recurso. Comprueba que los controles de primera página y anterior estén deshabilitados al principio, y que los controles de siguiente y última página lo estén al final. Revisa el mismo flujo tanto en pantallas de escritorio como de teléfono, incluso en un ancho incrustado más estrecho. Comprueba en el panel de red si faltan iconos, además de los errores de JavaScript.
Sistema de diseño gov.cz Ejemplos de componentes del sistema de diseño
main.js — kit de herramientas completo con paginación
Datos completos, registro de componentes nativos, división en páginas y foco de lectura.
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 cuadrícula y la anulación del ancho mínimo en el contenido incrustado son CSS originales de la aplicación.
04
Sistema de diseño gov.cz Configuración del agente de IA
Punto de partida para la implementación
Mantén intactos los subdirectorios de iconos. Este ejemplo importa módulos de entrada de componentes directamente; no requiere copiar el entorno de ejecución del cargador diferido.
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
Una instrucción para tu proyecto
Instrucción para el agente
Crea el kit de herramientas Gov CE 4.7.1 proporcionado con tarjetas, botones y paginación nativos. Mantén el orden real de las hojas de estilo y la configuración de la ruta de iconos. Usa gov-page detail.pagination.currentPage, etiquetas ARIA en inglés que sean significativas, cierra los detalles obsoletos al cambiar de página y devuelve el foco después de la lectura. Conserva la atribución del contenido de muestra original.
05
Sistema de diseño gov.cz Fuentes y alcance
Estudio original de un kit de herramientas de servicio OpenDesign con componentes, estilos, iconos y fuentes de Gov Design System CE 4.7.1. Los textos de muestra y el comportamiento de la colección son originales; no se trata de un servicio gubernamental oficial.
