Explore as funções reais de tema, os modos de tamanho e o comportamento nativo dos campos de Designsystemet por meio de um editor completo de briefing de tarefa, com indicação de caracteres e estado de apresentação preservado.
Comportamento nativo de ds-field do Designsystemet 1.23.0, CSS e tema padrão com fontes Inter locais. · Referência de implementação
02
Referência de design do sistema de design Designsystemet
Exportações do tema padrão e implementação nativa de ds-field em @digdir/designsystemet-css/web 1.23.0. As linhas de cores registram explicitamente os valores do modo claro.
Comportamento, CSS e pacotes de tema do sistema de design Designsystemet
Carregue as três partes na ordem correta
Designsystemet separa o comportamento independente de framework, o CSS dos componentes e os valores do tema. Este exemplo fixa designsystemet-web e designsystemet-css na versão 1.23.0, importa o CSS e, em seguida, o tema padrão, e registra o comportamento uma única vez. Um campo estilizado sem o pacote de comportamento não é a mesma implementação conectada de ds-field mostrada aqui.
Use o contrato atual de HTML simples
O exemplo usa ds-field envolvendo elementos input, textarea e select comuns com classes ds-input. Assim, os controles nativos do formulário são mantidos, enquanto o pacote conecta rótulos e descrições. Ele não copia um API de campo antigo exclusivo do React. O código-fonte completo inclui as importações corretas dos pacotes e a lógica de revisão original da aplicação.
Esquema de cores e modos de tamanho do sistema de design Designsystemet
Altere a aparência com atributos data
A página define data-color-scheme como light ou dark no elemento raiz. O tema fornece as cores semânticas correspondentes, enquanto os valores do formulário permanecem inalterados. A tabela de parâmetros registra explicitamente os valores padrão de light; ela não sugere que esses mesmos códigos hexadecimais se aplicam ao modo dark. Um botão secundário de aparência descreve a próxima ação.
Aplique o modo de tamanho ao sistema inteiro
O controle de tamanho de leitura altera data-size entre sm, md e lg. Isso muda o modo de tamanho do tema, em vez de ampliar apenas o título. Os fatores publicados para os modos são 1, 1.125 e 1.3125; eles participam das fórmulas dos tokens e não são uma instrução universal para definir um controle com esses valores em pixels. O exemplo testa o modo grande em telas de celular e desktop.
Inter e tipografia semântica no sistema de design Designsystemet
Inclua os pesos pretendidos
A prévia inclui Inter 400, 500 e 600 e ativa o recurso de fonte cv05 documentado para a forma da letra l minúscula. A página usa classes nativas de títulos e parágrafos para que o peso da fonte e a altura da linha sigam o tema. Uma anotação fixa de 14px é uma nota de apoio definida no conteúdo, claramente fora da escala interativa principal.
Mantenha o conteúdo de apoio junto ao controle
A dica do título explica a finalidade do rótulo; a dica do resultado descreve o tipo de conteúdo esperado. Ambas ficam junto aos respectivos controles e são conectadas por ds-field. As orientações de apoio ficam em um cartão separado, posicionado após o formulário em telas estreitas. O layout não depende de passar o cursor sobre um elemento para exibir instruções.
Relações automáticas e feedback de caracteres no sistema de design Designsystemet
Use ds-field para conectar um controle
Cada ds-field contém um controle do tipo campo de entrada, seu rótulo e descrições opcionais data-field. O pacote atribui IDs e cria as relações entre rótulo e descrição. Agrupar controles sem relação dentro de um único ds-field tornaria ambíguo esse comportamento automático. Use um fieldset para agrupar controles, em vez de presumir que o contêiner seja um elemento genérico de formulário.
Mantenha um único controle do tipo campo de entrada em cada ds-field.
Use descrições data-field para conteúdo de apoio relacionado.
Deixe o observador nativo manter os IDs e as relações described-by.
Entenda o que o contador mede
Validação da aplicação e estado de revisão no sistema de design Designsystemet
Valide a tarefa definida no conteúdo separadamente
A aplicação exige um título e um resultado para a tarefa e rejeita resultados que excedam o limite do exemplo. Depois de exibir uma mensagem que indica como resolver o problema, ela coloca o foco no campo correspondente. O contador nativo informa o comprimento, enquanto o manipulador de envio aplica a regra de revisão local. Nenhum atributo maxlength trunca silenciosamente o texto colado.
Preserve os dados ao alterar a apresentação
Uma revisão bem-sucedida exibe o título e o resultado atuais como texto. A edição de qualquer um dos campos limpa o resultado; a alteração da aparência ou do tamanho o preserva, pois esses controles não mudam o briefing. Essa distinção é intencional e foi verificada. Nada é enviado a um serviço de gerenciamento de projetos, e a prévia nunca afirma que uma tarefa externa foi criada.
Implementação completa de campos nativos no sistema de design Designsystemet
Reproduza o exemplo versionado
Crie um projeto Vite vanilla, instale os dois pacotes Designsystemet fixados em versões específicas e o Inter; em seguida, salve o arquivo de entrada completo e digdir.css. Mantenha o elemento raiz de montagem. O código-fonte inclui o registro, a ordem do tema, a marcação do contador, os controles de apresentação e todas as transições de validação da revisão. A prévia local usa o mesmo observador nativo de campos, em vez de uma imitação desenhada à mão.
Importe o comportamento uma vez e, em seguida, CSS do componente e o tema padrão.
Carregue Inter 400, 500 e 600 e salve o arquivo de entrada/CSS completo.
Teste o contador acima do limite e corrija o resultado.
Faça a revisão, alterne o tamanho e a aparência e, em seguida, edite o texto para limpar o resultado.
Teste o comportamento acima do limite e a recuperação
Cole 150 caracteres comuns no campo de resultado e confirme que o contador informa dez caracteres acima do limite. A revisão deve rejeitar o conteúdo. Substitua o texto por um resultado curto e faça a revisão com sucesso; em seguida, altere o modo escuro e o tamanho de leitura sem perder o resultado. Edite o título e confirme que a revisão anterior é limpa. Verifique o foco visível e a quebra de linha em cada largura de tela.
Exemplos de componentes do sistema de design Designsystemet
main.js — estudo completo de campos nativos e tema
Editor completo, marcação real do contador, controles de aparência e tamanho e validação local da revisão.
javascript
import '@digdir/designsystemet-web';
import '@digdir/designsystemet-css';
import '@digdir/designsystemet-css/theme';
import '@fontsource/inter/latin-400.css';
import '@fontsource/inter/latin-500.css';
import '@fontsource/inter/latin-600.css';
import './digdir.css';
document.documentElement.dataset.colorScheme='light';document.documentElement.dataset.size='md';document.getElementById('root').innerHTML=`<main><header><div><p class="eyebrow">DESIGNSYSTEMET / NATIVE FIELD STUDY</p><h1 class="ds-heading" data-size="lg">Write a useful task brief</h1></div><button id="theme" class="ds-button" data-variant="secondary" aria-pressed="false">Dark appearance</button></header><p class="ds-paragraph lead">Describe one outcome clearly. The native field connects its label, hint and character feedback while the theme controls size and appearance.</p><div class="layout"><form id="brief-form" novalidate><ds-field class="ds-field"><label>Task title</label><input id="title" class="ds-input" type="text" value="Review the navigation"/><p data-field="description">Use a short label that identifies the work.</p></ds-field><ds-field class="ds-field"><label>Desired outcome</label><textarea id="outcome" class="ds-input" rows="4">Make the main sections easier to find without changing the accepted content.</textarea><p data-field="description">Describe the result, not a list of implementation instructions.</p><p data-field="counter" data-limit="140" data-over="%d characters over the sample limit" data-under="%d characters remaining"></p></ds-field><p id="error" class="ds-validation-message" hidden role="alert"></p><button class="ds-button" type="submit">Review brief</button></form><aside class="ds-card" data-color="neutral"><h2 class="ds-heading" data-size="sm">Reading size</h2><p class="ds-paragraph">The theme changes the complete size mode rather than scaling only a heading.</p><ds-field class="ds-field"><label for="size">Component size</label><select class="ds-input" id="size"><option value="sm">Small</option><option value="md" selected>Medium</option><option value="lg">Large</option></select></ds-field><h3 class="ds-heading" data-size="xs">A clear brief contains</h3><ul><li>One concrete outcome.</li><li>Constraints that must remain true.</li><li>A way to check the result.</li></ul><p class="small">Default theme and web behavior 1.23.0. Original local application; no task is created elsewhere.</p></aside></div><section id="review" class="ds-card" data-color="success" hidden tabindex="-1"><h2 class="ds-heading" data-size="sm">Local brief review</h2><h3 id="review-title" class="ds-heading" data-size="xs"></h3><p id="review-body" class="ds-paragraph"></p><p class="small">Editing a field clears this review. Appearance and reading size preserve it.</p></section></main>`;const $=id=>document.getElementById(id);function edit(){$('review').hidden=true;$('error').hidden=true}['title','outcome'].forEach(id=>$(id).addEventListener('input',edit));$('theme').addEventListener('click',()=>{const dark=document.documentElement.dataset.colorScheme!=='dark';document.documentElement.dataset.colorScheme=dark?'dark':'light';$('theme').setAttribute('aria-pressed',String(dark));$('theme').textContent=dark?'Light appearance':'Dark appearance'});$('size').addEventListener('change',e=>document.documentElement.dataset.size=e.target.value);$('brief-form').addEventListener('submit',e=>{e.preventDefault();let message='',focus='outcome';if(!$('title').value.trim()){message='Enter a task title.';focus='title'}else if(!$('outcome').value.trim())message='Describe the desired outcome.';else if($('outcome').value.length>140)message='Shorten the outcome to 140 characters or fewer.';if(message){$('error').textContent=message;$('error').hidden=false;$(focus).focus();return}$('review-title').textContent=$('title').value.trim();$('review-body').textContent=$('outcome').value.trim();$('review').hidden=false;$('review').focus()});
As alterações de tema e tamanho preservam os valores; somente edições no conteúdo invalidam a revisão.
04
Configuração de agente do sistema de design Designsystemet
Ponto de partida para implementação
As relações nativas entre rótulos, o estado do contador, a recuperação da validação e as alterações de tamanho nos modos claro e escuro foram testados em um navegador real.
sh
npm create vite@latest ds-brief -- --template vanilla
cd ds-brief
npm install
npm install @digdir/[email protected] @digdir/[email protected] @fontsource/inter
# Replace src/main.js and add src/digdir.css. Keep <div id="root"></div>.
npm run dev
Um prompt para seu projeto
Prompt para agente de IA
Crie o editor de briefing usando o comportamento de Designsystemet 1.23.0, CSS e o tema padrão, na ordem correta. Use ds-field com um único controle nativo, atributos reais data-field do contador e os pesos da fonte Inter. Preserve a revisão ao alterar a aparência e o tamanho, limpe-a após edições no conteúdo e aplique o limite original de 140 caracteres sem truncar o texto colado.
05
Fontes e escopo do sistema de design Designsystemet
Um editor local criado por OpenDesign usando Designsystemet CSS e comportamento da web 1.23.0. O tema padrão e o observador de campos são nativos; o conteúdo do briefing, a regra de 140 caracteres e o fluxo de revisão são originais.
