Explore as funções reais das cores, os espaços de cartões e a paginação nativa do Gov Design System CE com um kit completo de leitura de seis recursos, incluindo estados explícitos de foco e página.
Componentes de cartão, botão e paginação do Native Gov CE 4.7.1; conjunto de dados local original e gerenciamento de foco. · Referência de implementação
02
Referência de design sistema de design gov.cz
Primitivas de cor e aliases semânticos reais de tokens.css de @gov-design-system-ce/styles 4.7.1. A prévia usa os estilos publicados e o pacote Roboto.
Fundamentos do Gov CE e ordem dos assets sistema de design gov.cz
Mantenha as versões dos pacotes alinhadas
Este exemplo fixa os componentes, estilos, ícones e fontes na versão 4.7.1. As cinco folhas de estilo fundamentais são carregadas na ordem publicada. Suas responsabilidades são diferentes: somente as variáveis não estilizam um card, e registrar um elemento personalizado não carrega o componente global CSS. A entrada completa inclui as cinco folhas antes da pequena camada de composição original.
Inicialize a configuração antes de registrar os componentes
O caminho dos ícones é configurado antes da execução dos módulos de entrada dos componentes importados dinamicamente. Essa ordem é importante porque a paginação renderiza ícones de seta como parte de suas próprias dependências. Copie o diretório completo de ícones para o caminho público configurado, mantendo seus subdiretórios. Uma importação JavaScript bem-sucedida não comprova que essas solicitações de ícones separadas também foram concluídas com sucesso.
Referências a cores semânticas e estados sistema de design gov.cz
Associe a cor a uma função
A referência diferencia a primitiva primária azul dos aliases de texto, foco e estado do botão. Usar o mesmo tom de azul aparente em todos os lugares apagaria esses contratos. O toolkit usa os botões primários sólidos oficiais e deixa a folha de estilos do componente definir sua aparência nos estados ativo, de foco e desabilitado. Somente o layout ao redor da coleção é original CSS.
Mantenha visíveis a tipografia e o contexto do conteúdo
A Roboto vem do pacote de fontes correspondente. Os cards têm títulos curtos e acionáveis, uma linha de metadados e um resumo antes da ação de leitura. Os seis textos de recursos são material original de prática OpenDesign, não instruções oficiais do governo tcheco traduzidas. O objetivo é demonstrar hierarquia e uma interação local completa, sem dar a entender que se trata de um serviço governamental.
Slots de cards e ações de leitura sistema de design gov.cz
Coloque o título no slot compatível
Cada gov-card recebe um título no slot headline. Os metadados, a descrição e o botão compõem o conteúdo. A ação tem um aria-label que inclui o título do recurso, distinguindo os botões repetidos “Ler recurso” para tecnologias assistivas. O componente transfere os atributos ARIA para seu elemento interativo interno; um atributo inventado de rótulo acessível não faria isso.
Mantenha o layout fora do contrato do componente
Uma grade CSS de três colunas passa a ter uma coluna em telas estreitas. A grade e seu breakpoint foram criados para este exemplo e não são propriedades oficiais adicionais do card. A prévia também remove a largura mínima global de 320px do body dentro de seu contêiner incorporado muito estreito. Esse ajuste limitado à composição preserva o estilo do componente e evita que a página pai transborde.
Paginação nativa e estado da aplicação sistema de design gov.cz
Leia o payload do evento nativo
gov-pagination recebe total=6 e page-size=3. Seu evento gov-page fornece detail.pagination.currentPage, que seleciona os três registros correspondentes. O componente de paginação controla os controles da página atual; a aplicação controla o conjunto de dados e a parte visível. Todos os rótulos de navegação padrão em tcheco são substituídos explicitamente por rótulos em inglês neste estudo em inglês.
total é o número de registros, não o número de páginas.
page-size controla o tamanho da parte exibida.
gov-page expõe detail.pagination.currentPage.
Os rótulos de navegação devem corresponder ao idioma da interface.
Evite detalhes desatualizados após mudar de página
Foco de leitura e comportamento ao voltar sistema de design gov.cz
Mova o foco para o recurso aberto
A ação de leitura preenche uma área de detalhes local e move o foco para o título dessa área. Isso oferece aos usuários de teclado um destino claro depois de uma ação que adiciona conteúdo abaixo da coleção. O título focável usa tabindex=-1 para que a aplicação possa direcionar o foco a ele sem criar uma parada adicional na navegação normal com Tab. O conteúdo aberto continua sendo texto comum e legível.
Volte à ação que abriu o recurso
“Voltar aos recursos” oculta os detalhes e move o foco para o botão interno original. Este não é um modal: não prende o foco, não adiciona semântica de diálogo nem escurece a página. A coleção original continua disponível. Abrir e fechar repetidamente, além de navegar entre páginas, permite verificar se o estado da aplicação e o foco acompanham o mesmo recurso.
Integração local completa sistema de design gov.cz
Use os arquivos fornecidos em conjunto
A entrada é código completo da aplicação, incluindo os seis registros, a criação dos cards, o tratamento da paginação e o foco nos detalhes. A folha de estilos contém somente a composição original. Instale os quatro pacotes com versões fixadas, copie os ícones e salve os dois arquivos em um projeto Vite sem framework. A prévia do navegador agrupa exatamente essas entradas de componentes e os assets locais de fontes.
Instale os quatro pacotes Gov CE na versão 4.7.1.
Copie os ícones para public/assets/gov-cz-icons, preservando os subdiretórios.
Salve a JavaScript completa e a composição CSS em src.
Execute o app e inspecione a paginação, o retorno do foco e as solicitações de ícones.
Verifique a interação e o carregamento dos assets
Abra o primeiro recurso, volte ao botão correspondente, avance para a segunda página e leia outro recurso. Verifique se os controles de primeira/anterior ficam desabilitados no início e se os controles de próxima/última ficam desabilitados no fim. Inspecione o mesmo fluxo em larguras de desktop e celular, incluindo uma largura incorporada mais estreita. Confira no painel de rede se há ícones ausentes, além de erros de JavaScript.
Exemplos de componentes do sistema de design sistema de design gov.cz
main.js — toolkit completo com paginação
Dados completos, registro de componentes nativos, seleção de página e foco de leitura.
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();
O layout em grade e a substituição da largura mínima no contêiner incorporado são originais da aplicação CSS.
04
Configuração do agente sistema de design gov.cz
Ponto de partida para implementação
Mantenha intactos os subdiretórios dos ícones. Este exemplo importa módulos de entrada de componentes diretamente; não requer uma cópia do runtime do carregador sob demanda.
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
Um prompt para seu projeto
Prompt para agente de IA
Crie o toolkit Gov CE 4.7.1 fornecido usando cartões, botões e paginação nativos. Mantenha a ordem real das folhas de estilo e a configuração dos caminhos dos ícones. Use gov-page detail.pagination.currentPage, rótulos ARIA significativos em inglês, feche os detalhes desatualizados ao mudar de página e devolva o foco após a leitura. Preserve a atribuição do conteúdo de exemplo original.
05
Sistema de design gov.cz Fontes e escopo
Estudo original de um toolkit de serviços OpenDesign que usa componentes, estilos, ícones e fontes do Gov Design System CE 4.7.1. Os textos de exemplo e o comportamento da coleção são originais; este não é um serviço governamental oficial.
